SlickGrid点击/双击事件

分析

        SlickGrid提供了点击事件方法grid.onClick和grid.onDblClick用于捕获用户对表格列的点击,捕获到点击事件之后,修改表格数据,然后使用grid.updateRow方法将修改后的数据更新到表格中。

展示

 代码

创建grid(HTML)

<!--创建grid-->
<div id="myGrid" class="slick-container" style="width:600px;height:500px;"></div>

创建grid(JavaScript)

// 五角星样式
function priorityFormatter(row, cell, value, columnDef, dataContext) {const count = value === 'Low' ? 1 : value === 'Medium' ? 2 : 3;let icon = '';for (let i = 0; i < count; i++) {icon += '<span class="sgi sgi-star-outline"></span>';}return icon;
}var grid;
var data = [];
var columns = [  // 创建columns{id: "title", name: "Title", field: "title", width: 200, cssClass: "cell-title", editor: Slick.Editors.Text},{id: "priority", name: "Priority", field: "priority", width: 80, selectable: false, resizable: false},{id: "priority", name: "Priority", field: "priority", width: 80, selectable: false, resizable: false, formatter: priorityFormatter}
];var options = {editable: true,enableAddRow: false,enableCellNavigation: true,asyncEditorLoading: false,rowHeight: 30
};document.addEventListener("DOMContentLoaded", function() {for (var i = 0; i < 100; i++) {  // 创建数据var d = (data[i] = {});d["title"] = "Task " + i;d["priority"] = "Medium";}grid = new Slick.Grid("#myGrid", data, columns, options);
});

注册点击事件

// 注册点击事件
grid.onClick.subscribe(function (e) {var cell = grid.getCellFromEvent(e);if (grid.getColumns()[cell.cell].id == "priority") {if (!grid.getEditorLock().commitCurrentEdit()) {return;}// 修改表格数据var states = {"Low": "Medium", "Medium": "High", "High": "Low"};data[cell.row].priority = states[data[cell.row].priority];grid.updateRow(cell.row);  // 将修改后的数据更新到表格e.stopPropagation();}
});

注册双击事件

// 注册双击事件
grid.onDblClick.subscribe(function (e) {var cell = grid.getCellFromEvent(e);if (grid.getColumns()[cell.cell].id == "priority") {if (!grid.getEditorLock().commitCurrentEdit()) {return;}// 修改表格数据var states = {"Low": "Medium", "Medium": "High", "High": "Low"};data[cell.row].priority = states[data[cell.row].priority];grid.updateRow(cell.row);  // 将修改后的数据更新到表格e.stopPropagation();}
});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/61470.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

iOS UI 自动化 手势右滑退出当前页面

1、TouchAction from appium.webdriver.common.touch_action import TouchAction# 获取屏幕的宽度和高度 screen_width driver.get_window_size()["width"] screen_height driver.get_window_size()["height"]# 定义滑动的起点和终点坐标 start_x 0 en…

【Unity ShaderGraph实现流体效果之Node入门(二)】

Unity ShaderGraph实现流体效果之Node入门&#xff08;二&#xff09; 前言Shader Graph NodeStep NodeMultiply NodeRotate About AxisAddfresnel effectIs Front Face 前言 在&#xff08;一&#xff09;中讨论了一部分在制作流体效果时使用的Node&#xff0c;本章继续将剩余…

Redis 6.2 源码导读

Redis 是一个高性能的开源内存键值数据库&#xff0c;广泛用于缓存、会话管理和实时分析。Redis 6.2 版本引入了一些新特性和改进。 以下是 Redis 6.2 源码的一些关键部分和导读&#xff1a; 1. 源码结构 Redis 的源码主要分布在以下几个目录中&#xff1a; src/&#xff1…

集合卡尔曼滤波(Ensemble Kalman Filter),用于二维滤波(模拟平面上的目标跟踪),MATLAB代码

集合卡尔曼滤波&#xff08;Ensemble Kalman Filter&#xff09; 文章目录 引言理论基础卡尔曼滤波集合卡尔曼滤波初始化预测步骤更新步骤卡尔曼增益更新集合 MATLAB 实现运行结果3. 应用领域结论 引言 集合卡尔曼滤波&#xff08;Ensemble Kalman Filter, EnKF&#xff09;是…

解决Docker环境变量的配置的通用方法

我们部署的很多服务都是以Docker容器的形式存在的。 在运行Docker容器前&#xff0c;除了设置网络、数据卷之外&#xff0c;还需要设置各种各样的环境变量。 有时候&#xff0c;由于容器版本的问题&#xff0c;一些文档没有及时更新&#xff0c;可能同时存在多个新旧版本的环…

2446.学习周刊-2024年46周

封面 拍摄于11月17日&#xff0c;身心疲惫的时候&#xff0c;去山里走走看看风景&#xff0c;富氧的环境能缓解身心疲劳。 ✍优秀博文 # 深度解析数仓建模与指标体系构建的底层逻辑 | 金字塔原理在数仓建模分析中的应用基于“理采存管用”的数据中台建设方案业务逻辑不要放入…

自然语言处理:第六十三章 阿里Qwen2 2.5系列

本人项目地址大全&#xff1a;Victor94-king/NLP__ManVictor: CSDN of ManVictor 项目地址: QwenLM/Qwen2.5: Qwen2.5 is the large language model series developed by Qwen team, Alibaba Cloud. 官网地址: 你好&#xff0c;Qwen2 | Qwen & Qwen2.5: 基础模型大派对&a…

六、卷积神经网络(CNN)基础

卷积神经网络&#xff08;CNN&#xff09;基础 前言一、CNN概述二、卷积层2.1 卷积2.2 步幅(Stride)2.3 填充(Padding)2.4 多通道卷积2.5 多卷积计算2.6 特征图大小计算2.7 代码演示 三、池化层3.1 池化层计算3.1.1 最大池化层3.1.2 平均池化层 3.2 填充(Padding)3.3 步幅(Stri…

Spring Security SecurityContextHolder(安全上下文信息)

在本篇博客中&#xff0c;我们将讨论 Spring Security 的 SecurityContextHolder 组件&#xff0c;包括其实现方式、关键特性&#xff0c;并通过实际示例进行说明。 理解 SecurityContextHolder SecurityContextHolder 是 Spring Security 存储当前安全上下文详细信息的地方。…

通过vite+vue3+pinia从0到1搭建一个uniapp应用

最近项目上要做一个app&#xff0c;选择了用uniapp作为开发框架&#xff1b;我大概看了一下uniapp的文档&#xff0c;根据文档从0到1搭了一个uniapp应用供大家参考。 因为本人习惯使用了WebStorm编译器&#xff0c;但是uniapp官方推荐使用HBuilder搭建&#xff0c;如果和我一样…

【Pytorch】torch.nn.functional模块中的非线性激活函数

在使用torch.nn.functional模块时&#xff0c;需要导入包&#xff1a; from torch.nn import functional 以下是常见激活函数的介绍以及对应的代码示例&#xff1a; tanh (双曲正切) 输出范围&#xff1a;(-1, 1) 特点&#xff1a;中心对称&#xff0c;适合处理归一化后的数据…

java-贪心算法

1. 霍夫曼编码&#xff08;Huffman Coding&#xff09; 描述&#xff1a; 霍夫曼编码是一种使用变长编码表对数据进行编码的算法&#xff0c;由David A. Huffman在1952年发明。它是一种贪心算法&#xff0c;用于数据压缩。霍夫曼编码通过构建一个二叉树&#xff08;霍夫曼树&a…

网络安全学习74天(记录)

11.21日&#xff0c;今天学习了 app抓包&#xff08;需要的工具charles&#xff08;激活&#xff09;&#xff0c;夜神模拟器&#xff0c;postern&#xff0c;&#xff09; 思路&#xff1a;首先charles需要抓取的app的包&#xff0c;需要的是装证书&#xff0c;将charles的证…

【数据结构】【线性表】【练习】反转链表

申明 该题源自力扣题库19&#xff0c;文章内容&#xff08;代码&#xff0c;图表等&#xff09;均原创&#xff0c;侵删&#xff01; 题目 给你单链表的头指针head以及两个整数left和right&#xff0c;其中left<right&#xff0c;请你反转从位置left到right的链表节点&…

实时数仓:Lambda架构和Kappa架构有什么联系和区别

Kappa 和 Lambda 架构是处理大数据和实时数据流的两种不同设计模式。以下是对这两种架构的概述和比较&#xff1a; Lambda 架构 定义&#xff1a; Lambda 架构的全称是 Lambda Architecture。这个架构旨在处理大规模数据&#xff0c;结合了批处理和流处理的优点&#xff0c;以…

第7章 服务发现

本章将深入介绍服务发现,它为什么很重要,以及它是如何在Kubernetes中实现的。此外,还会涉及一些排查问题的技巧。 为了更好地理解本章的内容,读者应该首先了解Kubernetes的Service对象及其工作原理。这是第6章的内容。 本章分以下内容展开。 快速入门。服务注册。服务发现…

vllm源码解析(一):整体架构与推理代码

vlllm官方代码更新频发,每个版本都有极大变动, 很难说哪个版本好用. 第一次阅读vllm源码是0.4.0版本,对这版圈复杂度极高的调度代码印象深刻 0.4.1对调度逻辑进行重构,完全大变样, 读代码速度快赶不上迭代的速度了。 现在已经更新到0.5.4, 经过长时间观察&#xff0c;发现主要的…

数据库index(索引)使用注释事项

1、索引类型&#xff0c;通常选择NORMAL或者UNIQUE. NORMAL&#xff1a;正常的一种索引吧。 UNIQUE:索引列必须是不能重复的。 2、索引方法&#xff1a;通常选择BTREE 3、使用SQL查询的时候&#xff0c;不需要特别处理索引的字段。数据库会自动的处理&#xff0c;提升SQL的查…

电解车间铜业机器人剥片技术是现代铜冶炼过程中自动化和智能化的重要体现

电解车间铜业机器人剥片技术是现代铜冶炼过程中自动化和智能化的重要体现 电解车间铜业机器人剥片技术是现代铜冶炼过程中自动化和智能化的重要体现&#xff0c;它主要应用于铜电解精炼的最后阶段&#xff0c;即从阴极板上剥离出纯铜的过程。以下是该技术的几个关键点&#xff…

集成了高性能ARM Cortex-M0+处理器的一款SimpleLink 2.4 GHz无线模块-RF-BM-2340B1

蓝牙模组 - RF-BM-2340B1是基于美国TI的CC2340R5为核心设计的一款SimpleLink 2.4 GHz 无线模块。支持Bluetooth 5.3 Low Energy、Zigbee 、IEEE 802.15.4g、TI 15.4-Stack (2.4 GHz)及私有协议。集成了高性能ARM Cortex-M0处理器&#xff0c;具有512 KB Flash、32 KB超低泄漏SR…