如何在行分组的数据表中添加复选框？ [英] How to add checkbox in datatables for row grouping?

问题描述

我的代码如下：
http://jsfiddle.net/rkovmhkp/3/

     ...

       }).rowGrouping({
                    fnOnGrouped: function(groups){
                        console.log("Groups", groups);

                        for(key in groups){
                            if(groups.hasOwnProperty(key)){
                               $(groups[key].nGroup).css('background-color', '#F99');
                            }
                        }                   
                    }
                }); 

      ...

我想在左上角添加复选框。当用户选中复选框时，系统将显示行分组数据表。当用户取消选中复选框时，系统将显示没有行分组的数据。谢谢

I want add checkbox in the upper left corner. When user check the checkbox, The system will show row grouping datatables. When user uncheck the checkbox, The system will show datatables without row grouping. Thank you

推荐答案

解决方案

使用以下代码：

$(document).ready(function () {    
   initTable(true);

   $('.btn-row-grouping-enable').on('click', function(){       
      if(!this.checked){ 
          removeRowGrouping('#example');
      }

      initTable(this.checked);          
   });

});

function initTable(hasRowGrouping){   
     $('#example').dataTable({
         "bDestroy": true,
         "bLengthChange": false,
         "bPaginate": false,
         "bJQueryUI": true,
         "fnCreatedRow": function (nRow, aData, iDataIndex){
             $(nRow).css('background-color', /*oData.colour*/ '#99F');
         }
     });

     if(hasRowGrouping){
        $('#example').dataTable().rowGrouping({
           fnOnGrouped: function (groups) {
              console.log("Groups", groups);

              for (key in groups) {
                 if (groups.hasOwnProperty(key)) {
                     $(groups[key].nGroup).css('background-color', '#F99');
                 }
              }
          }
        });
     }
}

// Remove rowGrouping plugin
function removeRowGrouping(selector){
   var oSettings = jQuery(selector).dataTable().fnSettings();

   for (f = 0; f < oSettings.aoDrawCallback.length; f++) {
      if (oSettings.aoDrawCallback[f].sName == 'fnRowGrouping') {
           oSettings.aoDrawCallback.splice(f, 1);
           break;
      }
   }

   oSettings.aaSortingFixed = null;              
}

演示 / p>

DEMO

请参阅这个jsFiddle 代码和演示。

LINKS

• 数据表删除rowgrouping


• datatables remove rowgrouping

这篇关于如何在行分组的数据表中添加复选框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！