jQuery EasyUI DataGrid Checkbox 數據設定與取值

純粹作個記錄，以避免往後忘記該怎麼設定。php

這一篇將會說明兩種使用 jQuery EasyUI DataGrid 的 Checkbox 設定方式，以及在既有數據下將 checked 爲 true 的該筆數據列的 Checkbox 設定爲 Checked，另外就是兩種 Checkbox 設定方式下如何取得有勾選的數據。html

有關 jQuery EasyUI DataGrid 的相關資料，能夠前往官網查看，

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

使用的範例 JSON 數據：

 
    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 原始碼內容

web

 
    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 使用屬性設定的方式還具備彈性，json

Javascript 程序中的 DataGrid 設定less

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

設定完成後的頁面以下：ui

可是咱們的 JSON 數據裏有個字段是「checked」，這個字段的數據 true / false 就是用來設定 Checkbox 是否勾選，而設定的動做必需要在 DataGrid 加載數據完成後再去執行，這邊會使用到 jQuery 的 each 去逐一檢查每一個數據列的的數據內容，假如 checked 爲 true，那就使用「checkRow」這個 Method 將該數據列的 Checkbox 設爲勾選的狀態，this

修改後的 DataGrid 設定程序以下：url

 
      01. 
      $('#dg').datagrid({ 
     
      02. 
      title: 'CheckBox Selection on DataGrid', 
     
      03. 
      url: 'datagrid_data3.json', 
     
      04. 
      width: '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 都爲勾選，spa

再來就是要取得勾選的數據值，這邊也是使用 DataGrid 所提供的 Method「getChecked」 www.it165.net.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 程序：

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

 
         01. 
         $('#dg').datagrid({ 
        
         02. 
         title: 'CheckBox Selection on DataGrid', 
        
         03. 
         url: 'datagrid_data3.json', 
        
         04. 
         width: '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 的方法，

程序以下：

 
          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 有勾選的數據值就能夠沿用方式一的程序，

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