jQuery EasyUI DataGrid Checkbox 数据设定与取值

    • 纯粹做个记录，以免日后忘记该怎么设定。

      这一篇将会说明两种使用 jQuery EasyUI DataGrid 的 Checkbox 设定方式，以及在既有数据下将 checked 为 true 的该笔数据列的 Checkbox 设定为 Checked，另外就是两种 Checkbox 设定方式下如何取得有勾选的数据。


      有关 jQuery EasyUI DataGrid 的相关资料，可以前往官网查看，

      jQuery EasyUI 官网
      jQuery EasyUI Documentation
      DataGrid Demo
      CheckBox select on DataGrid

      使用的范例 JSON 数据：
       

      view sourceprint?
      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 原始码内容

       

      view sourceprint?
      01.<body>
      02.<h2>Custom CheckBox on DataGrid</h2>
      03. 
      04.<input type="button" id="ButonGetCheck" value="Get Checked" />
      05.<br/><br/>
      06. 
      07.<table id="dg"></table>
      08. 
      09.</body>

      我是习惯把 DataGrid 的相关设定放在 Javascript 程序中，因为这会比直接在 HTML 的 Table Tag 使用属性设定的方式还具有弹性，

      Javascript 程序中的 DataGrid 设定


      view sourceprint?
      01.$('#dg').datagrid({
      02.title: 'CheckBox Selection on DataGrid',
      03.url: 'datagrid_data3.json',
      04. '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
      18.});

      设定完成后的页面如下：


       

      但是我们的 JSON 数据里有个字段是「checked」，这个字段的数据 true / false 就是用来设定 Checkbox 是否勾选，而设定的动作必须要在 DataGrid 加载数据完成后再去执行，这边会使用到 jQuery 的 each 去逐一检查每个数据列的的数据内容，假如 checked 为 true，那就使用「checkRow」这个 Method 将该数据列的 Checkbox 设为勾选的状态，


       

      修改后的 DataGrid 设定程序如下：

      view sourceprint?
      01.$('#dg').datagrid({
      02.title: 'CheckBox Selection on DataGrid',
      03.url: 'datagrid_data3.json',
      04. '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,
      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


       

      程序如下：

      view sourceprint?
      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 程序：

      view sourceprint?
      01.$('#dg').datagrid({
      02.title: 'CheckBox Selection on DataGrid',
      03.url: 'datagrid_data3.json',
      04. '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,
      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 的设定

      view sourceprint?
      01.$('#dg').datagrid({
      02.title: 'CheckBox Selection on DataGrid',
      03.url: 'datagrid_data3.json',
      04. '700',
      05.rownumbers: true,
      06.columns:[[
      07.{field:'checked',formatter:function(value,row,index){
      08.if(row.checked){
      09.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 的方法，

      程序如下：

      view sourceprint?
      01.$.extend($.fn.datagrid.methods, {
      02.getChecked: function (jq) {
      03.var rr = [];
      04.var rows = jq.datagrid('getRows');
      05.jq.datagrid('getPanel').find('div.datagrid-cell input:checked').each(function () {
      06.var index = $(this).parents('tr:first').attr('datagrid-row-index');
      07.rr.push(rows[index]);
      08.});
      09.return rr;
      10.}
      11.});

      这么一来在取得 DataGrid 的 Checkbox 有勾选的数据值就可以沿用方式一的程序，

      view sourceprint?
      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 程序如下：

       

      view sourceprint?
      01.$(function(){
      02.$('#dg').datagrid({
      03.title: 'CheckBox Selection on DataGrid',
      04.url: 'datagrid_data3.json',
      05. '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.});

      以上

有时候不是我们失去了目标，而是失去了方向。
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/871735097-/p/3767804.html