内容简介：jQuery EasyUI DataGrid Checkbox 数据设定与取值
纯粹做个记录，以免日后忘记该怎么设定。
这一篇将会说明两种使用 jQuery EasyUI DataGrid 的 Checkbox 设定方式，以及在既有数据下将 checked 为 true 的该笔数据列的 Checkbox 设定为 Checked，另外就是两种 Checkbox 设定方式下如何取得有勾选的数据。
有关 jQuery EasyUI 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 数据设定与取值》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
- 如何优雅地链式取值
- KotlinTips：getValueSafely 安全取值
- 如何优雅的链式取值之 MayBe 函子
- 前嗅ForeSpider教程：字段的取值与清洗
- Proxmox 设定直通硬盘
- 设定新的进程名称
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Ant Colony Optimization
Marco Dorigo、Thomas Stützle / A Bradford Book / 2004-6-4 / USD 45.00
The complex social behaviors of ants have been much studied by science, and computer scientists are now finding that these behavior patterns can provide models for solving difficult combinatorial opti......一起来看看 《Ant Colony Optimization》 这本书的介绍吧!
