jquery easyui datagrid 怎么设置checkbox列属性

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

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

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

jQuery EasyUI官网

jQuery EasyUI Documentation

DataGrid Demo

CheckBox select on DataGrid

使用的范例 JSON数据：

view source print?

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原始码内容

view source print?

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

view source print?

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

view source print?

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 source print?

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 source print?

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.