jqgrid - 组标题复选框以多选组项目答案

【问题标题】：jqgrid - checkbox for Group header to multiselect group itemsjqgrid - 组标题复选框以多选组项目
【发布时间】：2012-12-23 13:02:07
【问题描述】：

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

我想要实现的是在组标题级别有一个复选框。因此，每个组都将有一个多选复选框，选中该复选框时仅检查该特定组中的所有行，而其余组保持原样。

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

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

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

谢谢

【问题讨论】：

只有几点需要注意。确保您已尝试解决自己的问题。您应该尝试发布一些代码。检查你的拼写和语法。例如“我”是“我”。我们知道英语不是每个人的母语，但如果您不确定，请尝试找人校对。

标签： gridview jqgrid grouping multi-select

【解决方案1】：

在组标题中可以有一个复选框，但在 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 就绪时将不存在。

【讨论】：

大卫感谢您的意见。快乐的编码员我来这里是为了解决与编码相关的问题，而不是学习英语语法或拼写。无论如何，谢谢。
@JaikishenJayadev -- 不要忘记投票和/或接受有用的答案。
我能找到这个功能的演示/小提琴吗？

【解决方案2】：

演示是JSFIDDLE DEMO

正如@david 所建议的，通过 groupText 属性为组标题添加了复选框 HTML。并为复选框 click/change 事件编写处理程序。

如果父jqgrid表的id是grid，组头行tr是class ="gridghead_0"，嵌套组头的class将跟随@987654325 @。

复选框单击/更改处理程序（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: true,
grouping:true,
groupingView : {
    groupField : ['name'],
    groupText : ['<input type="checkbox" class="groupHeader"/> <b>  {0}  </b>'],
    groupColumnShow : [false],
},
...

当select-all被选中时，检查组头复选框

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

【讨论】：