1

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

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

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

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

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

谢谢

4

2 回答 2

3

演示是JSFIDDLE DEMO

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

如果父 jqgrid 表的id是grid，组标题行tr是 with class ="gridghead_0"，嵌套组标题的类将跟随gridghead_1 to gridghead_n。

  1. 复选框单击/更改处理程序（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);
    }
});

  2. “多选”和“分组”的设置/选项

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

  3. 选中全选时，检查组标题复选框

    onSelectAll: function(rowIds, allChecked) {
    $("input.groupHeader").attr('checked', allChecked);
},
于 2014-05-07T07:49:03.413 回答
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
}

现在您必须使用 jQueryon方法对侦听器进行编码，因为复选框在 dom 就绪时将不存在。

于 2013-01-09T15:07:42.113 回答