jquery - 有没有直接的方法来选择 jqGrid 中组内的行？

Question

我正在使用一个 jqGrid，它根据州或省进行分组。组内的每一行都有一个复选框。我需要在组标题中放置一个复选框，以允许用户选择/取消选择该组中的所有行复选框。

在查看 jqGrid 生成的 HTML 时，我没有在组内的行上看到任何与组相关的类或 ID。我也没有找到使用列选项或分组配置添加此类的方法。

有什么建议吗？

Answer 1

我们已经通过子网格解决了同样的问题，并且该解决方案可能适用于分组场景。我们使用custom formatters为标题链接/复选框和子网格复选框添加样式和数据属性。然后，我们在标题行中有一个链接或复选框，上面有一个事件，该事件使用 jQuery 选择子网格中具有适当数据属性和样式的所有复选框。最后，网格加载完成事件添加“检查全部”链接的单击事件处理程序。

下面是子网格复选框列的自定义格式化程序示例。请注意 data-groupingId 属性，它存储用于将标题行与子网格行相关联的值。

function checkBoxColumnFormatter(cellvalue, options, rowObject) {
    return "<input type=\"checkbox\"" + data-groupingId=\"" + rowObject.GroupingId + "\" class=\"subgridCheck\" />";
}

下面是“检查全部”列的自定义格式化程序示例。请注意 data-groupingId 属性，它存储用于将标题行与子网格行相关联的值。

function checkAllColumnFormatter(cellValue, options, rowObject) {
    var link = $("<a class=\"checkAll\" href=\"#\" data-groupingId=\"" + rowObject.Id + "\">Check All</a>");

    var linkHtml = $("<div>").append(link.clone()).remove().html();

    return linkHtml;
}

这是加载完成事件，它连接在上述格式化程序中创建的“检查所有”链接的点击事件。

function mainGridLoadComplete(data) {
    $(".checkAll").click(function (e) {
        checkSubGridRows(
            $(this).attr("data-groupingId")); // Use the data attribute to specify the value that will be on all the *relevant* subgrid checkboxes.
    });
},

最后，这是完成这项工作的方法。

function checkSubGridRows(groupingId) {
    $("#GridId .subgridCheck[data-groupingId=\"" + groupingId + "\"]").not(":disabled").each(
        function () {
            $(this).attr("checked", "checked");
        });
}

这对我们来说非常有效。考虑到所有因素，当事情变得像这样复杂时，我宁愿有一个客户端模型来从 JSON Web 服务接收数据并成为 jqGrid 的权威来源。我认为这最终比让 jqGrid 抓取数据本身并吞下实际的数据对象更好，这使得直接获取数据以供引用或处理变得困难或不可能。然而，创建和管理客户端模型/ View 分离并不是一件简单的事情。所以这是一个快速的替代方案。但要小心，因为这可能会很快失控。