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 數據:
     

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

     

    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 設定


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

    設定完成后的頁面如下:

     

    \
     

    但是我們的 JSON 數據里有個字段是「checked」,這個字段的數據 true / false 就是用來設定 Checkbox 是否勾選,而設定的動作必須要在 DataGrid 加載數據完成后再去執行,這邊會使用到 jQuery 的 each 去逐一檢查每個數據列的的數據內容,假如 checked 為 true,那就使用「checkRow」這個 Method 將該數據列的 Checkbox 設為勾選的狀態,

     

    \
     

    修改后的 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:'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

     

    \
     

    程序如下:

     

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

    以上


  • 免責聲明!

    本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



     
    粵ICP備18138465號   © 2018-2025 CODEPRJ.COM