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

这一篇将会说明两种使用 jQuery EasyUI DataGrid 的 Checkbox 设定方式，以及在既有数据下将 checked 为 true 的该笔数据列的 Checkbox 设定为 Checked，另外就是两种 Checkbox 设定方式下如何取得有勾选的数据。

有关 jQuery EasyUI DataGrid 的相关资料，可以前往官网查看，

jQuery EasyUI 官网
jQuery EasyUI Documentation
DataGrid Demo
CheckBox select on DataGrid

使用的范例 JSON 数据：
 

设定方式一：使用预设的设定方式
网页的 HTML 原始码内容

 

我是习惯把 DataGrid 的相关设定放在 JavaScript 程序中，因为这会比直接在 HTML 的 Table Tag 使用属性设定的方式还具有弹性，

javascript 程序中的 DataGrid 设定

设定完成后的页面如下：

 

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

 

 

修改后的 DataGrid 设定程序如下：

 

view sourceprint?

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

 

 

程序如下：

 

view sourceprint?

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 程序：

 

view sourceprint?

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 的设定

 

view sourceprint?

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 的方法，

 

程序如下：

view sourceprint?

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 有勾选的数据值就可以沿用方式一的程序，

view sourceprint?

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 程序如下：

 

view sourceprint?

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 数据设定与取值