zoukankan html css js c++ java

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

查看全文

相关阅读:
纯js实现10分钟倒计时
 js中的constructor
双指放大缩小问题（不需要第三方插件）
js异步加载的3种方式（转载）
5种处理js跨域问题方法汇总（转载）
oncopy="document.selection.empty()"跟oncopy="return false"什么区别？
十进制转换为二进制
 99%的人都理解错了HTTP中GET与POST的区别（转载
 简单封装：检测邮箱是否合法
 Xshell记录日志的方法

原文地址：https://www.cnblogs.com/liangwenchao-912/p/4883636.html