原文来源：http://blog.csdn.net/baronyang/article/details/9323463
纯粹做个记录，以免日后忘记该怎么设定。
这一篇将会说明两种使用 jQuery EasyUI DataGrid 的 Checkbox 设定方式，以及在既有数据下将 checked 为 true 的该笔数据列的 Checkbox 设定为 Checked，另外就是两种 Checkbox 设定方式下如何取得有勾选的数据。
有关 jQuery EasyUI DataGrid 的相关资料，可以前往官网查看，
jQuery EasyUI 官网
jQuery EasyUI Documentation
DataGrid Demo
CheckBox select on DataGrid
使用的范例 JSON 数据：
01.{
02."total": 4,
03."rows": [
04.{
05."productid": "FI-SW-01",
06."productname": "Koi",
07."unitcost": 10.00,
08."status": "P",
09."listprice": 36.50,
10."attr1": "Large",
11."itemid": "EST-1",
12."checked": true
13.},
14.{
15."productid": "K9-DL-01",
16."productname": "Dalmation",
17."unitcost": 12.00,
18."status": "P",
19."listprice": 18.50,
20."attr1": "Spotted Adult Female",
21."itemid": "EST-10",
22."checked": true
23.},
24.{
25."productid": "RP-SN-01",
26."productname": "Rattlesnake",
27."unitcost": 12.00,
28."status": "P",
29."listprice": 38.50,
30."attr1": "Venomless",
31."itemid": "EST-11",
32."checked": true
33.},
34.{
35."productid": "RP-SN-01",
36."productname": "Rattlesnake",
37."unitcost": 12.00,
38."status": "P",
39."listprice": 26.50,
40."attr1": "Rattleless",
41."itemid": "EST-12",
42."checked": false
43.}
44.]
45.}
设定方式一：使用预设的设定方式
网页的 HTML 原始码内容
01.<body>
02.<h2>Custom CheckBox on DataGrid</h2>
03.
04.<input type="button" id="ButonGetCheck" value="Get Checked" />
05.<br/><br/>
06.
07.<table id="dg"></table>
08.
09.</body>
我是习惯把 DataGrid 的相关设定放在 Javascript 程序中，因为这会比直接在 HTML 的 Table Tag 使用属性设定的方式还具有弹性，
Javascript 程序中的 DataGrid 设定
01.$('#dg').datagrid({
02.title: 'CheckBox Selection on DataGrid',
03.url: 'datagrid_data3.json',
04.width: '700',
05.rownumbers: true,
06.columns:[[
07.{ field:'ck',checkbox:true },
08.{ field: 'productid', title: 'productid' },
09.{ field: 'productname', title: 'productname' },
10.{ field: 'unitcost', title: 'unitcost' },
11.{ field: 'status', title: 'status' },
12.{ field: 'listprice', title: 'listprice' },
13.{ field: 'itemid', title: 'itemid' }
14.]],
15.singleSelect: false,
16.selectOnCheck: true,
17.checkOnSelect: true
18.});
设定完成后的页面如下：
<!-- Baidu Button END --><!--192.168.100.35-->分享到：
相关推荐
在IT行业中，EasyUI Datagrid是一款基于jQuery的前端数据展示组件，它提供了丰富的表格功能，如排序、分页、过滤等。在实际工作中，我们经常需要将这些展示的数据导出到Excel文件，以便进行进一步的分析或存储。下面...
JS EasyUI DataGrid是一款基于jQuery和EasyUI框架的数据表格组件，它提供了丰富的功能，如数据分页、排序、过滤和自定义操作等。在实际应用中，动态加载数据是DataGrid的一个重要特性，允许用户在需要时加载更多的...
jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像（onMouseOver/onMouseOut） Demo 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件，源码奉献！！！
在IT领域，EasyUI Datagrid是一款基于jQuery的前端数据展示组件，它提供了丰富的表格功能，如数据分页、排序、筛选等。当我们需要将Datagrid中的数据进行打印时，可能会遇到一些挑战，因为通常默认的浏览器打印功能...
在这个"EasyUI DataGrid 过滤用法实例"中，我们将深入探讨如何利用 EasyUI 的 DataGrid 组件实现数据过滤功能，帮助用户更高效地查找和管理表格中的信息。 首先，`datagrid-filter.js` 文件很可能包含了实现过滤...
easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格
### 解决EasyUI dataGrid列较多时无数据显示不全的问题 在使用EasyUI框架进行前端开发的过程中，可能会遇到dataGrid组件在数据为空时列显示不完整的问题。这不仅影响用户体验，也降低了系统的可用性。本文将详细...
EasyUI是一个基于jQuery的UI库，提供了丰富的组件，包括datagrid，它是一个用于展示表格数据的组件。在某些场景下，用户可能希望在滚动表格时，某些重要的列（通常是标题或标识列）始终保持可见，这就是“右冻结”的...
easyui的datagrid的数据渲染
在使用EasyUI框架开发Web应用时，Datagrid组件是一个非常重要的元素，它提供了一种方便的方式来展示和操作数据。在标题“easyui datagrid在编辑状态下更新列的值”中，我们关注的是如何在Datagrid的编辑模式下动态地...
EasyUI的Datagrid是一个强大的表格组件，它可以显示大量数据并支持排序、分页、过滤和编辑等功能。在Web应用中，Datagrid常用于展示结构化的数据，使用户能够高效地浏览和操作信息。 2. **鼠标悬停事件**： 在...
easyUI datagrid 自动调整行号大小
一个update扩展方法 文档中一种是比较笨的方法 一次只能修改一个列而且受列编辑类型影响（比如number datetime）扩展一次编辑多列，不受编辑类型影响，没有编辑属性也可以。
easyui datagrid editor回车切换单元格示例，适合熟悉easyui但又不懂如何做的人员，可能参考一下源码JS。
首先，`datagrid`是EasyUI中的一个核心组件，它用于展示数据表格，支持分页、排序、过滤等多种操作。在实现多条件筛选时，我们需要对datagrid的`columns`属性进行配置，定义每一列的显示方式和筛选条件。例如，我们...
在本项目中，"easyui datagrid 分页查询样例"是利用EasyUI Datagrid与后端SpringMVC框架集成，实现数据的后台分页查询功能。下面将详细阐述这一知识点。 首先，EasyUI Datagrid的核心在于其强大的数据绑定能力，它...
通过阅读这份文档，我们可以了解 Datagrid 的基本配置和高级特性，以及如何与后端数据源进行交互。 `jquery-easyui-document.chm` 是 jQuery EasyUI 的官方帮助文档，通常包含了完整的 API 参考、示例代码和使用...
默认情况下，EasyUI Datagrid 支持基本的数据排序功能，但其默认排序逻辑是基于字符编码的，因此无法直接实现中文按拼音顺序的排序。 #### 三、前端解决方案 对于前端来说，可以通过自定义排序函数的方式来实现中文...
标题 "easyui datagrid标题列宽度自适应" 涉及到的是JavaScript库EasyUI中的一个功能特性，它主要用于Web应用程序的数据展示。EasyUI是一个基于jQuery的轻量级框架，提供了一系列易于使用的UI组件，包括datagrid，...
在实际开发中，确保数据绑定正确并能双向更新是非常关键的，这样才能实现CheckBox和DataGrid之间的实时交互。 通过以上步骤，我们可以成功地在DataGrid中使用CheckBox实现全选功能。这提高了用户界面的易用性，也...