easyui DataGrid 的 Checkbox 选择多行

这么一来在取得 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.});

巴特西

easyui DataGrid 的 Checkbox 选择多行

最新文章

热门文章