純粹做個記錄，以免日後忘記該怎麼設定。
這一篇將會說明兩種使用 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": true13.},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": true23.},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": true33.},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": false43.}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: true18.});設定完成後的頁面如下：
但是我們的 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: true23.});這邊的 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: true24.});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.});