純粹做個記錄，以免日后忘記該怎么設定。
這一篇將會說明兩種使用 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.
});