Question

目前我正在使用jqgrid来绑定数据。我有两个问题： 1）当Multiselect为true时，我们在标题行中有一个复选框，它选择所有行而不管分组。

我想要实现的是在组头的级别设置一个复选框。因此，每个组都有一个多选复选框，当选中该复选框时，只检查该特定组中的所有行，而保留其余组。

如果组标题中的复选框选项不可用，我们是否可以点击组标题，以便我们可以检查该组中的所有行？我在click here发现了类似的问题，但他们没有使用jqgrid。

2）我的下一个问题是我们可以将.gif，.jpg图像作为jqgrid列中数据的一部分嵌入吗？

由于我是新用户，我很抱歉我无法添加快照。

由于

Answer 1

演示是JSFIDDLE DEMO

正如@david建议的那样，通过组头的groupText属性添加了复选框HTML。并为复选框点击/更改事件编写处理程序。

如果父jqgrid表的 id 为grid，则组标题行tr为class ="gridghead_0"，嵌套组标题为 class 将关注gridghead_1 to gridghead_n。

复选框单击/更改处理程序（JS DOM Ready函数）

$("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'和'分组'的设置/选项

...
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中没有内置功能。

您可以通过groupText属性添加HTML。然后，您可以在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 - 组标题的复选框，用于多选组项目

2 个答案:

复选框单击/更改处理程序（JS DOM Ready函数）

'multiselect'和'分组'的设置/选项