javascript - 如何在数据表中添加复选框以进行行分组？

Question

我的代码是这样的: 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');
                            }
                        }                   
                    }
                }); 

      ...

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

Answer 1

SOLUTION

使用下面的代码:

$(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;              
}

DEMO

参见this jsFiddle用于代码和演示。

LINKS

• datatables remove rowgrouping