正文

easyui DataGrid 的 Checkbox 选择多行

IP云
IP云V管理员/8 阅读
07/31
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

这么一来在取得 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 程序如下：

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.});