纯粹做个记录，以免日后忘记该怎么设定。

这一篇将会说明两种使用 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.});

设定完成后的页面如下：


 

但是我们的 JSON 数据里有个字段是「checked」，这个字段的数据 true / false 就是用来设定 Checkbox 是否勾选，而设定的动作必须要在 DataGrid 加载数据完成后再去执行，这边会使用到 jQuery 的 each 去逐一检查每个数据列的的数据内容，假如 checked 为 true，那就使用「checkRow」这个 Method 将该数据列的 Checkbox 设为勾选的状态，


 

修改后的 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.onLoadSuccess:function(data){                   
19.if(data){
20.$.each(data.rows, function(index, item){
21.if(item.checked){
22.$('#dg').datagrid('checkRow', index);
23.}
24.});
25.}
26.}                
27.});

重新执行页面后就可以看到 checked 为 true 的数据列 Checkbox 都为勾选，


 

再来就是要取得勾选的数据值，这边也是使用 DataGrid 所提供的 Method「getChecked」 www.it165.net


 

程序如下：

1.$('#ButonGetCheck').click(function(){
2.var checkedItems = $('#dg').datagrid('getChecked');
3.var names = [];
4.$.each(checkedItems, function(index, item){
5.names.push(item.productname);
6.});               
7.console.log(names.join(","));
8.});

最后的执行结果：


 

方式一的完整 Javascript 程序：

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.onLoadSuccess:function(data){                   
19.if(data){
20.$.each(data.rows, function(index, item){
21.if(item.checked){
22.$('#dg').datagrid('checkRow', index);
23.}
24.});
25.}
26.}                
27.});
28. 
29.$('#ButonGetCheck').click(function(){
30.var checkedItems = $('#dg').datagrid('getChecked');
31.var names = [];
32.$.each(checkedItems, function(index, item){
33.names.push(item.productname);
34.});               
35.console.log(names.join(","));
36.});

设定方式二：不使用预设的设定方式与 Method

这个设定的方式应该是在 jQuery EasyUI 1.3 之前所使用的，因为早期的版本并没有足够的设定方式与 Method 让使用者可以去增加 Checkbox 的项目，这边所使用的 JSON 数据以及 HTML 原始码都跟设定方式一的内容是一样的，不一样的地方在于 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:'checked',formatter:function(value,row,index){
08.if(row.checked){
09.return '<input type="checkbox" name="DataGridCheckbox" checked="checked">';
10.}
11.else{
12.return '<input type="checkbox" name="DataGridCheckbox">';
13.}
14.}},
15.{ field: 'productid', title: 'productid' },
16.{ field: 'productname', title: 'productname' },
17.{ field: 'unitcost', title: 'unitcost' },
18.{ field: 'status', title: 'status' },
19.{ field: 'listprice', title: 'listprice' },
20.{ field: 'itemid', title: 'itemid' }
21.]],
22.singleSelect: true
23.});

这边的 Checkbox 设定则是使用 formatter 的方式，类似 ASP.NET GridView 的 ItemTemplate 设定方式，判断每个数据列的 checked 字段数据是否为 true，如 checked 为 true 则回传一个有勾选的 Checkbox，不过这样的设定方式就不会在 DataGrid 的字段名称列出现可让使用者全选的 Checkbox，如需要的话就必须再用其它的方式来做设定，不过这边就不介绍，


 

接着就是取得有勾选的数据值，因为这里是使用自己加入 checkbox tag 的方式，所以就无法使用 DataGrid 所提供的 getChecked 方法，而是必须要另外写程序来处理，可以使用 extend 的方式去扩充 DataGrid 的方法，

程序如下：

01.$.extend($.fn.datagrid.methods, {
02.getChecked: function (jq) {
03.var rr = [];
04.var rows = jq.datagrid('getRows');
05.jq.datagrid('getPanel').find('div.datagrid-cell input:checked').each(function () {
06.var index = $(this).parents('tr:first').attr('datagrid-row-index');
07.rr.push(rows[index]);
08.});
09.return rr;
10.}
11.});

这么一来在取得 DataGrid 的 Checkbox 有勾选的数据值就可以沿用方式一的程序，

1.$('#ButonGetCheck').click(function(){
2.var checkedItems = $('#dg').datagrid('getChecked');
3.var names = [];
4.$.each(checkedItems, function(index, item){
5.names.push(item.productname);
6.});               
7.console.log(names.join(","));
8.});

执行结果：

完整 Javascript 程序如下：

01.$(function(){
02.$('#dg').datagrid({
03.title: 'CheckBox Selection on DataGrid',
04.url: 'datagrid_data3.json',
05.width: '700',
06.rownumbers: true,
07.columns:[[
08.{field:'checked',formatter:function(value,row,index){
09.if(row.checked){
10.return '<input type="checkbox" name="DataGridCheckbox" checked="checked">';
11.}
12.else{
13.return '<input type="checkbox" name="DataGridCheckbox">';
14.}
15.}},
16.{ field: 'productid', title: 'productid' },
17.{ field: 'productname', title: 'productname' },
18.{ field: 'unitcost', title: 'unitcost' },
19.{ field: 'status', title: 'status' },
20.{ field: 'listprice', title: 'listprice' },
21.{ field: 'itemid', title: 'itemid' }
22.]],
23.singleSelect: true
24.});
25. 
26.$('#ButonGetCheck').click(function(){
27.var checkedItems = $('#dg').datagrid('getChecked');
28.var names = [];
29.$.each(checkedItems, function(index, item){
30.names.push(item.productname);
31.});               
32.console.log(names.join(","));
33.});
34.});
35. 
36.$.extend($.fn.datagrid.methods, {
37.getChecked: function (jq) {
38.var rr = [];
39.var rows = jq.datagrid('getRows');
40.jq.datagrid('getPanel').find('div.datagrid-cell input:checked').each(function () {
41.var index = $(this).parents('tr:first').attr('datagrid-row-index');
42.rr.push(rows[index]);
43.});
44.return rr;
45.}
46.});
 
 

jQuery EasyUI DataGrid Checkbox 数据设定与取值的更多相关文章

  1. EasyUI datagrid checkbox数据设定与取值（转自http://blog.csdn.net/baronyang/article/dnetails/9323463，感谢分享，谢谢）

    这一篇将会说明两种使用 jQuery EasyUI DataGrid 的 Checkbox 设定方式,以及在既有数据下将 checked 为 true 的该笔数据列的 Checkbox 设定为 Che ...

  2. Jquery EasyUI datagrid后台数据表格生成及分页详解

    由于项目原因,网站后台需要对用户信息进行各种操作,有时还需要进行批量操作,所以首先需要将用户信息展示出来,查了不少资料.发现Jquery EasyUI确实是一个不错的选择,功能强大,文档也比较全面,而 ...

  3. ThinkPHP+jQuery EasyUI Datagrid查询数据的简单处理

    ThinkPHP和jQuery EasyUI这两个都是不错的框架,现在要把它两个整合到一块,做个简单的Ajax调用查询. 在ThinkPHP模板中引入EasyUI的相关文件,然后设置按钮3的调用: & ...

  4. jQuery easyui datagrid 的数据加载

        其实easyuidatagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数据:另一种是加载js对象,也就是使用loadDate方法,这种方法用于加载本地js数据(非ur ...

  5. jquery easyui datagrid实现数据改动

    1.单击选中待改动行 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA= ...

  6. [转载]再次谈谈easyui datagrid 的数据加载

    这篇文章只谈jQuery easyui datagrid 的数据加载,因为这也是大家谈论最多的内容.其实easyui datagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数 ...

  7. jquery easyui datagrid 无滚动条，datagrid 没垂直滚动条

    jquery easyui datagrid 无滚动条,datagrid 没垂直滚动条 ============================== 蕃薯耀 2018年2月6日 http://www. ...

  8. 谈谈easyui datagrid 的数据加载(转)

    这篇文章只谈jQuery easyui datagrid 的数据加载,因为这也是大家谈论最多的内容.其实easyui datagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数 ...

  9. 再次谈谈easyui datagrid 的数据加载

    from:http://www.easyui.info/archives/204.html 这篇文章只谈jQuery easyui datagrid 的数据加载,因为这也是大家谈论最多的内容.其实ea ...

随机推荐

  1. JPush Wiki

    极光推送包含有通知与自定义消息两种类型的推送.本文描述他们的区别,以及建议的应用场景. 功能角度 通知 或者说 Push Notification,即指在手机的通知栏(状态栏)上会显示的一条通知信息. ...

  2. EntityFramework中支持BulkInsert扩展（转载）

    前言 很显然,你应该不至于使用 EntityFramework 直接插入 10W 数据到数据库中,那可能得用上个几分钟.EntityFramework 最被人诟病的地方就是它的性能,处理大量数据时的效 ...

  3. Type InvokeMember()用法简介

    举例: Type tDate = typeof(System.DateTime); Object result = tDate.InvokeMember("Now", Bindin ...

  4. Ubuntu各版本下载地址

    Ubuntu各版本下载地址:     http://old-releases.ubuntu.com/releases/

  5. 安装完最小化 RHEL/CentOS 7 后需要做的 30 件事情（二）转载自码农网

    7. 安装 PHP PHP 是用于 web 基础服务的服务器端脚本语言.它也经常被用作通用编程语言.在最小化安装的 CentOS 中安装 PHP: # yum install php 安装完 php ...

  6. 解决treeview未选中时，默认选中首个根节点的问题！

    private void treeView1_MouseUp(object sender, MouseEventArgs e) { TreeNode selectnode = this.treeVie ...

  7. asp.net控件开发基础(1)（转）原文更多内容

    asp.net本身提供了很多控件,提供给我们这些比较懒惰的人使用,我认为控件的作用就在此,因为我们不想重复工作,所以要创建它,这个本身便是一个需求的关系,所以学习控件开发很有意思. wrox网站上有本 ...

  8. js:数据结构笔记5--链表

    数组: 其他语言的数组缺陷:添加/删除数组麻烦: js数组的缺点:被实现为对象,效率低: 如果要实现随机访问,数组还是更好的选择: 链表: 结构图: 基本代码: function Node (elem ...

  9. 简单几何(凸包) POJ 1696 Space Ant

    题目传送门 题意:一个蚂蚁一直往左边走,问最多能走多少步,且输出路径 分析:就是凸包的变形题,凸包性质,所有点都能走.从左下角开始走,不停排序.有点纠结,自己的凸包不能AC.待理解透凸包再来写.. 好 ...

  10. 模拟 CSU 1562 Fun House

    题目传送门 /* 题意:光线从 '*' 发射,遇到 '/' 或 '\' 进行反射,最后射到墙上,将 'x' 变成 '&' 模拟:仔细读题,搞清楚要做什么,就是i,j的移动,直到撞到墙,模拟一下 ...