当前位置: 首页 > news >正文

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();}
});

相关文章:

SlickGrid点击/双击事件

分析 SlickGrid提供了点击事件方法grid.onClick和grid.onDblClick用于捕获用户对表格列的点击&#xff0c;捕获到点击事件之后&#xff0c;修改表格数据&#xff0c;然后使用grid.updateRow方法将修改后的数据更新到表格中。 展示 代码 创建grid&#xff08;HTML&#xff09;…...

一文详细深入总结服务器选型

1. 题记&#xff1a; 服务器选型工作是项目规划检讨的一项非常重要的工作&#xff0c;本文详细深入总结服务器选型。 2. 服务器基础知识概览 2.1 服务器的定义与功能 2.1 .1 定义 服务器是一种高性能计算机&#xff0c;其设计目的是在网络中提供服务。它可以处理来自多个客…...

一、Nginx反向代理(七层代理)二、Nginx的TCP/UDP调度器(四层代理)

一、Nginx反向代理&#xff08;七层代理&#xff09; 实验要求 使用Nginx实现Web反向代理功能&#xff0c;实现如下功能&#xff1a; 后端Web服务器两台&#xff0c;可以使用httpd实现Nginx采用轮询的方式调用后端Web服务器两台Web服务器的权重要求设置为不同的值最大失败次数为…...

CSS+JQuery 实现弹力球效果,碰到屏幕边框弹回

实现弹力球效果&#xff0c;碰到屏幕边框弹回&#xff0c;效果如下 代码如下&#xff1a; <img src"../image/ball.png" alt"" class"ball"> <style>.ball {position: fixed;top: 50vh;left: 50vw;width: 15vw;height: 15vw;border…...

shell编程规范和脚本变量

什么是shell 人和计算机内核之间的中介&#xff1a; 计算机的语言是二进制&#xff0c;把人类的语言翻译成计算机能够识别的语言&#xff0c;然后让内核来处理 内核完成之后要把结果反馈给用户&#xff0c;要把计算机的翻译成人类能够识别的语言 命令解释器&#xff0c;pyc…...

jspm美容院管理系统

摘要 首先,论文一开始便是清楚的论述了系统的研究内容。其次,剖析系统需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确系统的需求。然后在明白了系统的需求基础上需要进一步地设计系统,主要包罗软件架构模式、整体功能模块、数据库设计…...

Prometheus结合K8s(二)使用

上一篇介绍了如何搭建 Prometheus结合K8s&#xff08;一&#xff09;搭建-CSDN博客&#xff0c;这章介绍使用 页面访问 kubectl get svc -n prom 看promeheus和granfana的端口访问页面 Prometheus 点击status—target&#xff0c;可以看到metrics的数据来源&#xff0c;即各…...

【虚幻引擎】UE5数字人开发实战教程

本套课程将会交大家如何去开发属于自己的数字人&#xff0c;包含大模型接入&#xff0c;流式输出&#xff0c;语音识别&#xff0c;语音合成&#xff0c;口型驱动&#xff0c;动画蓝图&#xff0c;语音唤醒等功能。 课程介绍视频如下&#xff1a; 【虚幻引擎】UE5 历时一个多月…...

深入分析:固定参考框架在RViz中的作用与对数据可视化的影响 ros ubuntu20.04

深入分析&#xff1a;固定参考框架在RViz中的作用与对数据可视化的影响 RViz (Robot Visualization) 是 ROS (Robot Operating System) 中一种重要的三维可视化工具&#xff0c;主要用于实时观察和分析传感器数据、机器人状态信息以及环境模型。RViz的核心功能之一是固定参考框…...

Android:时间选择器(最下面有效果图)

1.创建DateUtil类 /*** Created by wangshuai on 2024/11/19.*/ public class DateUtil {public final static String PATTERN_ALL"yyyy-MM-dd HH:mm:ss";public final static String PATTERN_DEFAULT"yyyy-MM-dd";/*** 获取当前时间* return yyyy-MM-dd*…...

第十六届蓝桥杯模拟赛(第一期)-c++/c

c/c蓝桥杯模拟赛题解&#xff0c;非常详细 质因数 1、填空题 【问题描述】 如果一个数 p 是个质数&#xff0c;同时又是整数 a 的约数&#xff0c;则 p 称为 a 的一个质因数。 请问 2024 有多少个质因数。 【答案提交】 这是一道结果填空的题&#xff0c;你只需要算出结果后提…...

如何挑选路由器?需要看哪些参数?

挑选路由器时&#xff0c;选择合适的型号和参数对于确保家庭或办公网络的速度、稳定性和覆盖范围至关重要。以下是挑选路由器时需要考虑的关键参数和因素&#xff1a; 1. 无线标准 (Wi-Fi标准) 无线标准是衡量路由器性能的核心指标。不同的无线标准提供不同的速率、范围和技术…...

mysql-备份(二)

前章介绍了MySQL的内部数据结构btree&#xff0c;这章讲述mysql的备份 1&#xff1a;环境 ubuntu22.04 LST mysql5.7.42 or win10 mysql5.7.44 (这里图简单直接windows部署) download:https://downloads.mysql.com/archives/community/ 2:install 1> unzip mysql-5.7.44-w…...

Tailwind CSS 和 UnoCSS简单比较

UnoCSS 和 Tailwind CSS 都是流行的原子化 CSS 框架&#xff0c;但它们在设计理念、性能和使用方式上有一些重要的区别。下面是对它们的详细对比&#xff1a; 1. 概述 Tailwind CSS&#xff1a;Tailwind 是一个原子化的 CSS 框架&#xff0c;提供了大量的预定义类&#xff08;…...

unity3d————范围检测

目录 知识点一&#xff1a;什么是范围检测 知识点二&#xff1a;如何进行范围检测 问题&#xff1a; Physics.queriesHitTriggers 怎么查看是不是true&#xff1f; QueryTriggerInteraction.UseGlobal 参数意味着是否检测触发器将依据全局设置 Physics.queriesHitTrigge…...

修改this.$confirm的按钮位置、图标、文字及标题

在Vue.js项目中&#xff0c;this.$confirm 通常是基于某些UI库&#xff08;如Element UI或Ant Design Vue&#xff09;的对话框确认方法。 以下是基于Element UI的this.$confirm的用法示例。 在此之前&#xff0c;你的项目要已经安装了Element UI&#xff0c;如果没安装话就打…...

SQL MID() 函数详解

SQL MID() 函数详解 SQL 中的 MID() 函数是一个非常有用的字符串处理工具&#xff0c;它允许用户从字符串中提取特定位置的子字符串。这个函数在数据库查询和报告中特别有用&#xff0c;尤其是在需要从较长的文本字段中提取特定信息时。本文将详细介绍 MID() 函数的用法、参数…...

【蓝桥杯备赛】123(前缀和的复杂应用)

5. 前缀和的复杂应用 5.1. 123&#xff08;4 星&#xff09; 5.1.1. 题目解析 这道题仍然是求一段区间的和&#xff0c;很容易能够想到前缀和找规律&#xff1a; 1------------------1 号块 1 2----------------2 号块 1 2 3--------------3 号块 1 2 3 4------------4 号…...

MINES

MINES (m)6A (I)dentification Using (N)anopor(E) (S)equencing Tombo(v1.4) 命令在 MINES 之前执行&#xff1a; &#xff08;仅在 fast5 文件中尚未包含 fastq 时需要&#xff09; tombo preprocess annotate_raw_with_fastqs --fast5-basedir /fast5_dir/ --fastq-file…...

H.265流媒体播放器EasyPlayer.js H5流媒体播放器关于如何查看手机端的日志信息并保存下来

现今流媒体播放器的发展趋势将更加多元化和个性化。人工智能的应用将深入内容创作、用户体验优化等多个方面&#xff0c;带来前所未有的个性化体验。 EasyPlayer.js H.265流媒体播放器属于一款高效、精炼、稳定且免费的流媒体播放器&#xff0c;可支持多种流媒体协议播放&#…...

多渠道订单数据处理自动化,落地步骤与ERP打通方案 | 2026企业级智能体实战手册

在2026年的数字化转型深水区&#xff0c;企业面临的不再是“是否要自动化”的问题&#xff0c; 而是如何在高并发、多维度的全渠道业务压力下&#xff0c; 实现订单流、资金流与信息流的绝对同步。 传统的OMS&#xff08;订单管理系统&#xff09;与ERP&#xff08;企业资源计划…...

RK3368安卓9.0固件烧录后开机卡Recovery?手把手教你调整分区表解决4GB闪存空间不足

RK3368安卓9.0固件烧录实战&#xff1a;4GB闪存分区优化全解析 当你满怀期待地将Android 9.0固件烧录到RK3368开发板&#xff0c;却发现设备直接进入了Recovery模式&#xff0c;屏幕上躺着那个令人沮丧的红色感叹号机器人——这可能是每个嵌入式开发者都经历过的"入门仪式…...

ThunderAI:开源本地AI助手桌面应用部署与核心架构解析

1. 项目概述&#xff1a;一个开源的AI助手桌面应用 最近在GitHub上闲逛&#xff0c;发现了一个挺有意思的项目&#xff0c;叫“ThunderAI”。这名字听起来就挺带劲&#xff0c;对吧&#xff1f;点进去一看&#xff0c;是个用Python写的桌面应用程序&#xff0c;核心功能是把几个…...

从零到一:Lmbench 性能测试实战与结果深度解读

1. 为什么你需要Lmbench性能测试 第一次听说Lmbench时&#xff0c;我也和大多数新手一样困惑&#xff1a;系统性能测试工具那么多&#xff0c;为什么非要选这个老古董&#xff1f;直到在服务器部署项目时连续遇到三次性能瓶颈&#xff0c;我才真正理解它的价值。那次我们用某款…...

从灾难电影到现实防疫:技术视角下的系统脆弱性与韧性构建

1. 从科幻到现实&#xff1a;流行病史与灾难电影的预言性对话作为一名长期关注科技与社会交叉领域的写作者&#xff0c;我发现自己近年来越发沉迷于一种特殊的电影类型——灾难片&#xff0c;尤其是那些以病毒大流行为主题的影片。这并非单纯的娱乐消遣&#xff0c;而更像是一种…...

KeymouseGo完全指南:5分钟掌握桌面自动化终极工具

KeymouseGo完全指南&#xff1a;5分钟掌握桌面自动化终极工具 【免费下载链接】KeymouseGo 类似按键精灵的鼠标键盘录制和自动化操作 模拟点击和键入 | automate mouse clicks and keyboard input 项目地址: https://gitcode.com/gh_mirrors/ke/KeymouseGo 你是否厌倦了…...

3分钟快速上手:SillyTavern如何让你成为AI聊天高手

3分钟快速上手&#xff1a;SillyTavern如何让你成为AI聊天高手 【免费下载链接】SillyTavern LLM Frontend for Power Users. 项目地址: https://gitcode.com/GitHub_Trending/si/SillyTavern 你是否厌倦了千篇一律的AI对话界面&#xff1f;想要一个能真正理解你需求、支…...

GPU硬件操作强度与LLM推理效率优化实践

1. 硬件操作强度&#xff08;HOI&#xff09;与LLM推理效率的深度解析在GPU加速的大型语言模型推理场景中&#xff0c;我们常常遇到一个看似矛盾的现象&#xff1a;计算单元利用率不足的同时&#xff0c;显存带宽却成为瓶颈。这种现象的根源在于硬件操作强度&#xff08;Hardwa…...

Armv8-A架构缓存维护指令详解与应用实践

1. A64系统指令中的缓存维护操作概述在Armv8-A架构中&#xff0c;缓存维护操作是确保系统内存一致性的关键机制。作为体系结构设计中最精妙的部分之一&#xff0c;缓存维护指令直接操控处理器缓存层次结构的状态&#xff0c;对系统性能、功能正确性和安全性都有着决定性影响。现…...

HUM4D数据集:无标记人体动作捕捉的挑战与评估

1. HUM4D数据集概述HUM4D是一个专门针对无标记人体动作捕捉技术评估的基准数据集&#xff0c;由计算机视觉研究团队开发。这个数据集的核心价值在于填补了现有动作捕捉基准在复杂场景下的空白——那些包含快速运动、严重遮挡、深度突变和身份混淆的真实挑战。在动作捕捉领域&am…...