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：

selectRow

index

Select a row, the row index start with 0.