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

2023年3月27日 207次阅读

我正在使用基于州或省分组的jqGrid.组内的每一行都有一个复选框.我需要在组头中放置一个复选框,允许用户选择/取消选择该组中的所有行复选框.

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

有什么建议？

最佳答案 我们已经用子网格解决了同样的问题,并且该解决方案可以适用于分组场景.我们使用
custom formatters为标题链接/复选框和子网格复选框添加样式和数据属性.然后我们在标题行中有一个链接或复选框,其上有一个事件,它使用jQuery选择子网格中具有相应数据属性和样式的所有复选框.最后,grid load complete事件为“check all”链接添加了click事件处理程序.

这是subgrid复选框列的示例自定义格式化程序.请注意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抓取数据本身并吞下实际的数据对象,这使得很难或不可能直接获取数据以供参考或处理.但是,创建和管理客户端模型/视图分离并非易事.所以这可以作为一种快速替代方案.但要注意,因为这可能会失控.

点赞