jQuery EasyUI DataGrid Checkbox 数据设定与取值

转：http://www.it165.net/pro/html/201305/6000.html

这一篇将会说明两种使用 jQuery EasyUI DataGrid 的 Checkbox 设定方式，以及在既有数据下将 checked 为 true 的该笔数据列的 Checkbox 设定为 Checked，另外就是两种 Checkbox 设定方式下如何取得有勾选的数据。
使用的范例 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 原始码内容

方式一的完整 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,
           onLoadSuccess : function(data) {

                            if (data) {
                                $.each(data.rows, function(index, item) {
                                    if (item.checked) {
                                        $('#dg').datagrid('selectRow',parseInt(item.id - 1));
                                    }
                                });
                            }
                        }
});

注：datagrid Method：

selectRowindexSelect a row, the row index start with 0.