SlickGrid复选框

news2024/11/27 21:20:46

分析

        1、先在columns首列添加复选框;

        2、在SlickGrid注册刚添加的复选框;

        3、添加复选框变化事件;

        4、注册按钮点击事件,点击获取已选中的行。

展示

代码

复选框样式(CSS)

.slick-cell-checkboxsel {
    background: #f0f0f0;
    border-right-color: silver;
    border-right-style: solid;
}

创建grid(HTML)

<div id="myGrid" class="slic-container" style="width:100%;height:300px;"></div>

创建grid(JavaScript)

var grid;
var data = [];
var options = {
    editable: true,
    enableCellNavigation: true,
    asyncEditorLoading: false,
    autoEdit: false,
    gridMenu: {iconCssClass: "sgi sgi-menu sgi-17px"}
};
var checkboxSelector = new Slick.CheckboxSelectColumn({cssClass: "slick-cell-checkboxsel"});
var columns = [  // 创建columns
    checkboxSelector.getColumnDefinition(),
    {"id": 0, "name": "A", "field": 0, "width": 100},
    {"id": 1, "name": "B", "field": 1, "width": 100},
    {"id": 2, "name": "C", "field": 2, "width": 100},
    {"id": 3, "name": "D", "field": 3, "width": 100},
    {"id": 4, "name": "E", "field": 4, "width": 100}
]

document.addEventListener("DOMContentLoaded", function() {
    for (var i = 0; i < 100; i++) {  // 生成数据
        var d = (data[i] = {});
        d[0] = "Row " + i;
    }

    grid = new Slick.Grid("#myGrid", data, columns, options);  // 创建grid
    grid.setSelectionModel(new Slick.RowSelectionModel({selectActiveRow: false}));
    grid.registerPlugin(checkboxSelector);  // 注册复选框

    grid.onSelectedRowsChanged.subscribe(function (e, args) {  // 复选框变化事件
        var sortedSelectedRows = args.rows.sort(function (a, b) { return a - b });
        console.log(sortedSelectedRows);  // 打印已选中的行
    });
});

点击按钮(HTML)

<button id="showSelect">showSelect</button>

按钮点击事件(JavaScript)

document.querySelector("#showSelect").addEventListener('click', function() {  // 注册点击事件
    var selectedRowsIndexes = grid.getSelectedRows();
    console.log(selectedRowsIndexes);  // 打印已选中的行
});

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

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

相关文章

基于单片机的智慧小区人脸识别门禁系统

本设计基于单片机的智慧小区人脸识别门禁系统。由STM32F103C8T6单片机核心板、显示模块、摄像头模块、舵机模块、按键模块和电源模块组成。可以通过摄像头模块对进入人员人脸数据进行采集&#xff0c;识别成功后&#xff0c;舵机模块动作&#xff0c;模拟门禁打开&#xff0c;门…

【小白学机器学习33】 大数定律python的 pandas.Dataframe 和 pandas.Series基础内容

目录 0 总结 0.1pd.Dataframe有一个比较麻烦琐碎的地方&#xff0c;就是引号 和括号 0.2 pd.Dataframe关于括号的原则 0.3 分清楚几个数据类型和对应的方法的范围 0.4 几个数据结构的构造关系 list → np.array(list) → pd.Series(np.array)/pd.Dataframe 1 python 里…

Edge浏览器保留数据,无损降级退回老版本+禁止更新教程(适用于Chrome)

3 个月前阿虚就已经写文章告警过大家&#xff0c;Chromium 内核的浏览器将在 127 以上版本开始限制仍在使用 Manifest V2 规范的扩展&#xff1a;https://mp.weixin.qq.com/s/v1gINxg5vMh86kdOOmqc6A 像是 IDM、油猴脚本管理器、uBblock 等扩展都会受到影响&#xff0c;后续将无…

基于Spring Boot的装饰工程管理系统论文

摘 要 如今社会上各行各业&#xff0c;都喜欢用自己行业的专属软件工作&#xff0c;互联网发展到这个时候&#xff0c;人们已经发现离不开了互联网。新技术的产生&#xff0c;往往能解决一些老技术的弊端问题。因为传统装饰工程项目信息管理难度大&#xff0c;容错率低&#x…

路由器的工作原理

网络拓扑结构 主机A&#xff1a; IP地址&#xff1a;10.1.0.1/16 MAC地址&#xff1a;MACA 主机B&#xff1a; IP地址&#xff1a;10.2.0.1/16 MAC地址&#xff1a;MACB 网关G0/0/0&#xff1a; IP地址&#xff1a;10.1.0.2/16 MAC地址&#xff1a;MACC 网关G0/0/1&#…

【深度学习|特征增强模块】FFN(前馈神经网络)和E_FFN(增强型前馈神经网络)是transformer特征增强的重要组成部分!

【深度学习|特征增强模块】FFN&#xff08;前馈神经网络&#xff09;和E_FFN&#xff08;增强型前馈神经网络&#xff09;是transformer特征增强的重要组成部分&#xff01; 【深度学习|特征增强模块】FFN&#xff08;前馈神经网络&#xff09;和E_FFN&#xff08;增强型前馈神…

51单片机从入门到精通:理论与实践指南(一)

单片机在智能控制领域的应用已非常普遍&#xff0c;发展也很迅猛&#xff0c;学习和使用单片机的人员越来越多。虽然新型微控制器在不断推出&#xff0c;但51单片机价格低廉、易学易用、性能成熟&#xff0c;在家电和工业控制中有一定的应用&#xff0c;而且学好了51单片机&…

java写一个石头剪刀布小游戏

石头剪刀布是一款经典的手势游戏,通常由两人参与,玩法简单且充满趣味。玩家通过出示手势代表“石头”、“剪刀”或“布”,并根据规则比较手势决定胜负。它广泛用于休闲娱乐、决策或解压活动。 一、功能简介 用户与计算机对战。 用户输入选择:石头、剪刀或布。 计算机随机生…

MATLAB深度学习(六)——LSTM长短期神经网络原理与应用

LSTM的应用可以参见一个相当好的视频&#xff1a;小车倒立摆最优控制教程 - Part1 Simulink Simscape Multibody仿真建模_哔哩哔哩_bilibili 6.1 序列建模——循环神经网络 循环神经网络RNN是一类专门用于处理序列性数据x&#xff0c;&#xff0c;xn的神经网络结构&#xff0c…

音视频技术扫盲之预测编码的基本原理探究

预测编码是一种数据压缩技术&#xff0c;广泛应用于图像、视频和音频编码等领域。其基本原理是利用数据的相关性&#xff0c;通过对当前数据的预测和实际值与预测值之间的差值进行编码&#xff0c;从而实现数据压缩的目的。 一、预测编码的基本概念 预测编码主要包括预测器和…

第六届国际科技创新学术交流大会暨信息技术与计算机应用学术会议(ITCA 2024)

重要信息 会议官网&#xff1a;itca2024.iaecst.org 会议时间&#xff1a;2024年12月06-08日 会议地点&#xff1a;中国-广州&#xff08;越秀国际会议中心&#xff09; 会议简介 第六届信息技术与计算机应用学术会议(ITCA 2024) 依旧作为第六届国际科技创新学术交流大会…

Leetcode 将有序数组转换为二叉搜索树

算法思想及代码解析&#xff1a; 这段代码的目的是将一个有序数组转换为 高度平衡的二叉搜索树&#xff08;Balanced Binary Search Tree, BST&#xff09;。以下是算法的详细解释&#xff1a; 1. 什么是高度平衡的二叉搜索树&#xff1f; 二叉搜索树&#xff1a;对于树中的每…

15 go语言(golang) - 并发编程goroutine原理及数据安全

底层原理 Go 的 goroutine 是一种轻量级的线程实现&#xff0c;允许我们在程序中并发地执行函数。与传统的操作系统线程相比&#xff0c;goroutine 更加高效和易于使用。 轻量级调度 用户态调度&#xff1a;Go 运行时提供了自己的调度器&#xff0c;这意味着 goroutine 的创建…

ESP-KeyBoard:基于 ESP32-S3 的三模客制化机械键盘

概述 在这个充满挑战与机遇的数字化时代&#xff0c;键盘已经成为我们日常学习、工作、娱乐生活必不可少的设备。而在众多键盘中&#xff0c;机械键盘&#xff0c;以其独特的触感、清脆的敲击音和经久耐用的特性&#xff0c;已经成为众多游戏玩家和电子工程师的首选。本文将为…

PyTorch基础05_模型的保存和加载

目录 一、模型定义组件——重构线性回归 二、模型的加载和保存 2、序列化保存对象和加载 3、保存模型参数 一、模型定义组件——重构线性回归 回顾之前的手动构建线性回归案例&#xff1a; 1.构建数据集&#xff1b;2.加载数据集(数据集转换为迭代器)&#xff1b;3.参数初…

《Python基础》之函数的用法

一、简介 在 Python 中&#xff0c;函数是一段可重用的代码块&#xff0c;用于执行特定的任务。函数可以帮助你将代码模块化&#xff0c;提高代码的可读性和可维护性。 函数的用途 代码重用&#xff1a;通过函数&#xff0c;你可以将常用的代码块封装起来&#xff0c;避免重复…

java:aqs实现自定义锁

aqs采用模板方式设计模式&#xff0c;需要重写方法 package com.company.aqs;import java.util.concurrent.TimeUnit; import java.util.concurrent.locks.AbstractQueuedSynchronizer; import java.util.concurrent.locks.Condition; import java.util.concurrent.locks.Lock;…

【小白学机器学习34】基础统计2种方法:用numpy的方法np().mean()等进行统计,pd.DataFrame.groupby() 分组统计

目录 1 用 numpy 快速求数组的各种统计量&#xff1a;mean, var, std 1.1 数据准备 1.2 直接用np的公式求解 1.3 注意问题 1.4 用print() 输出内容&#xff0c;显示效果 2 为了验证公式的背后的理解&#xff0c;下面是详细的展开公式的求法 2.1 均值mean的详细 2.2 方差…

vue2 中使用 Ag-grid-enterprise 企业版

文章目录 问题Vue2 引入企业版不生效npm run dev 时卡住了94% after seal 卡在这里了测试打包源 git 解决方案记录 问题 我想用企业版的树状表格 Vue2 引入企业版不生效 编译引入 // vue.config.js module.exports {transpileDependencies: ["ag-grid-enterprise"…

RESTful快速开发

&#xff08;3&#xff09;RESTful快速开发 &#xff08;2&#xff09;中的控制器仍然存在大量的冗余代码 问题1&#xff1a; 每个方法的RequestMapping注解中都定义了访问路径/users&#xff0c;重复性太高 问题2&#xff1a;每个方法的RequestMapping注解中都要使用method属…