jqgrid的分组复选功能

jqgrid的分组复选功能
分组复选功能是说，只全选/取消该分组下的所有行。当然也可以单选。

如果jqgrid的表id是grid, 那么分组时，组名所在的那个行row 下的tr将会带有 class =“gridghead_0”, tr嵌套的分组行的class会从 gridghead_1 到 gridghead_n.

1、复选框checkbox的click或者change事件函数，必须使用’on’触发【checkbox click/change handler (JS DOM Ready function)】

$("#grid").on("change", "input[type=checkbox]", function (e) {        
    var currentCB = $(this);
    var grid = jQuery('#grid');
    var isChecked = this.checked;
    if (currentCB.is(".groupHeader")) { //if group header is checked, to check all child checkboxes                     
        var checkboxes = currentCB.closest('tr').nextUntil('tr.gridghead_0').find('.cbox[type="checkbox"]');
        checkboxes.each(function(){
            if (!this.checked || !isChecked)                   
                grid.setSelection($(this).closest('tr').attr('id'), true); 
        });
    } else {  //when child checkbox is checked
        var allCbs = currentCB.closest('tr').prevAll("tr.gridghead_0:first").nextUntil('tr.gridghead_0').andSelf().find('[type="checkbox"]');
        var allSlaves = allCbs.filter('.cbox');
        var headerCB = allCbs.filter(".groupHeader");
        var allChecked = !isChecked ? false : allSlaves.filter(":checked").length === allSlaves.length;
        headerCB.prop("checked", allChecked);
    }
}); 

可能以上代码会乱码看不清楚，所以我特意截了一张图供大家参考

2、设置jqgrid的分组属性【settings/options for ‘multiselect’ and ‘grouping’】

multiselect: true,
grouping:true,
groupingView : {
    groupField : ['name'],
    groupText : ['<input type="checkbox" class="groupHeader"/> <b>  {0}  </b>'],
    groupColumnShow : [false],
},

3、当选中所有行后触发的事件【when select-all is checked, to check group header checkbox】

onSelectAll: function(rowIds, allChecked) {
    $("input.groupHeader").attr('checked', allChecked);
},