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