EasyUI datagrid checkbox数据设定与取值(转自http://blog.csdn.net/baronyang/article/dnetails/9323463,感谢分享,谢谢)
这一篇将会说明两种使用 jQuery EasyUI DataGrid 的 Checkbox 设定方式,以及在既有数据下将 checked 为 true 的该笔数据列的 Checkbox 设定为 Checked,另外就是两种 Checkbox 设定方式下如何取得有勾选的数据。
使用的范例 JSON 数据:
{ "total": 4, "rows": [ { "productid": "FI-SW-01", "productname": "Koi", "unitcost": 10.00, "status": "P", "listprice": 36.50, "attr1": "Large", "itemid": "EST-1", "checked": true }, { "productid": "K9-DL-01", "productname": "Dalmation", "unitcost": 12.00, "status": "P", "listprice": 18.50, "attr1": "Spotted Adult Female", "itemid": "EST-10", "checked": true }, { "productid": "RP-SN-01", "productname": "Rattlesnake", "unitcost": 12.00, "status": "P", "listprice": 38.50, "attr1": "Venomless", "itemid": "EST-11", "checked": true }, { "productid": "RP-SN-01", "productname": "Rattlesnake", "unitcost": 12.00, "status": "P", "listprice": 26.50, "attr1": "Rattleless", "itemid": "EST-12", "checked": false } ] }
设定方式一:使用预设的设定方式
网页的 HTML 原始码内容
<body> <h2>Custom CheckBox on DataGrid</h2> <input type="button" id="ButonGetCheck" value="Get Checked" /> <br/><br/> <table id="dg"></table> </body>
我是习惯把 DataGrid 的相关设定放在 Javascript 程序中,因为这会比直接在 HTML 的 Table Tag 使用属性设定的方式还具有弹性,
Javascript 程序中的 DataGrid 设定
1 $('#dg').datagrid({ 2 title: 'CheckBox Selection on DataGrid', 3 url: 'datagrid_data3.json', 4 width: '700', 5 rownumbers: true, 6 columns:[[ 7 { field:'ck',checkbox:true }, 8 { field: 'productid', title: 'productid' }, 9 { 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 设定程序如下:
1 $('#dg').datagrid({ 2 title: 'CheckBox Selection on DataGrid', 3 url: 'datagrid_data3.json', 4 width: '700', 5 rownumbers: true, 6 columns:[[ 7 { field:'ck',checkbox:true }, 8 { field: 'productid', title: 'productid' }, 9 { 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 程序:
1 $('#dg').datagrid({ 2 title: 'CheckBox Selection on DataGrid', 3 url: 'datagrid_data3.json', 4 width: '700', 5 rownumbers: true, 6 columns:[[ 7 { field:'ck',checkbox:true }, 8 { field: 'productid', title: 'productid' }, 9 { 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 的设定
1 $('#dg').datagrid({ 2 title: 'CheckBox Selection on DataGrid', 3 url: 'datagrid_data3.json', 4 width: '700', 5 rownumbers: true, 6 columns:[[ 7 {field:'checked',formatter:function(value,row,index){ 8 if(row.checked){ 9 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 的方法,
程序如下:
1 $.extend($.fn.datagrid.methods, { 2 getChecked: function (jq) { 3 var rr = []; 4 var rows = jq.datagrid('getRows'); 5 jq.datagrid('getPanel').find('div.datagrid-cell input:checked').each(function () { 6 var index = $(this).parents('tr:first').attr('datagrid-row-index'); 7 rr.push(rows[index]); 8 }); 9 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 程序如下:
1 $(function(){ 2 $('#dg').datagrid({ 3 title: 'CheckBox Selection on DataGrid', 4 url: 'datagrid_data3.json', 5 width: '700', 6 rownumbers: true, 7 columns:[[ 8 {field:'checked',formatter:function(value,row,index){ 9 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 });