jqGrid的 - 复选框组头复选组项目(jqgrid - checkbox for Group h

目前我使用的jqGrid将数据绑定。我有2个问题：1）多选是真的，我们有标题行不管其选择的分组中的所有行复选框。

我试图做到的，是在组头的水平，有一个复选框。因此，每个小组将有多项选择的复选框选中它时只检查中的所有行特定群组中留下剩余的组，因为它是。

如果在组头中的复选框选项是不可能的，我们才能有组头点击，使我们可以检查组中的所有行？我发现，在问过类似的问题，请点击这里，但他们没有使用的jqGrid。

2）我的下一个问题是，我们可以嵌入.GIF，.JPG图像作为在jqGrid的列中的数据的一部分？

我作为一个新的用户我很抱歉我不是能够添加快照。

谢谢

Answer 1:

演示是的jsfiddle DEMO

作为@大卫建议，通过groupText属性组头添加的复选框HTML。和写入处理程序复选框， 点击/变更事件。

如果父母的jqGrid表的id是grid ，组头行tr是class ="gridghead_0" ，和嵌套组头类将遵循gridghead_1 to gridghead_n 。

复选框点击/更改处理（JS DOM就绪功能）

 $("table tbody").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); } });

对于“多选”和“分组”设置/选项

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

当选择-所有被选中，来检查分组头复选框

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

Answer 2:

有可能有在组头复选框，但没有内置的功能，这在jqGrid的。

您可以通过添加HTML groupText财产。然后你就可以在jqGrid的配置之外的输入代码中的点击听众。你可以有这样的事情在你的jqGrid配置：

groupingView: { 
  groupField: [ <fill in your values> ],
  groupOrder: [ <fill in your values> ],        
  groupText: ['<span class="groupText">{0} - {1} Records(s)</span>' + 
    '<span class="group-span">' + 
    '<input type="checkbox" class="grouping">' + 
    '<label class="grouping-label">Select this group</label>' + 
    '</span>'],         
  groupColumnShow: [true],
  groupCollapse: true
}

现在，你必须代码使用jQuery的听众on ，因为复选框不会在DOM准备好存在的方法。

文章来源: jqgrid - checkbox for Group header to multiselect group items