jqgrid更改子网格的位置或将子网格图标添加到自定义列而不是其他任何地方？

Posted 2021-04-19

我是jqgrid的新手。我想用subgrid创建一个jqgrid，我从trirand.com获得了代码。但是在示例中，显示子行或子网格的子网格图标默认位于所有行的第一位。我们如何将图标的位置更改为任何其他列，以使列数据文本和（+）图标位于表的同一单元格中。由于我的数据采用JSON格式，因此图标位置要求可能会发生变化。点击它我需要显示相关的子网格。

任何帮助对我来说都非常重要。

答案

解决方案取决于您使用的jqGrid版本和jqGrid的分支。 Tony Tomov开发商业Guriddo jqGrid JS，我开发free jqGrid，完全免费提供。

我在免费的jqGrid fork中重写了jqGrid的旧代码的许多部分。其中一个功能：可以将"subgrid"列移动到网格中的任何其他位置。只需使用remapColumns或更好的新remapColumnsByName方法重新排序列。可以跳过remapColumnsByName的最后一列，这些位置将不会更改或跳过第一个标准列，如"rn"列，其中可以看到行号（如果使用选项rownumbers: true）。演示https://jsfiddle.net/OlegKi/o1L8k2k6/使用以下调用

.jqGrid("remapColumnsByName", ["name", "invdate", "subgrid"], true);

在列"subgrid"和"name"之后移动"invdate"列。人们会看到结果如

如果你需要在另一列中放置“+”/“ - ”图标，那么首先应该使用自定义格式化程序将图标放在列中，然后你可以使用beforeSelectRow来检测内部的点击专栏。此外，您可以使用.jqGrid("hideCol", "subgrid")隐藏标准子网格列。例如，自定义格式化程序的代码可以是

formatter: function (cellValue) {
    // place the icon using Font Awesome icons (http://fontawesome.io/)
    // the the original data itself. One should encode the data
    // with respect of $.jgrid.htmlEncode for example to be sure that
    // ANY data could be correctly displayed in the column (like ' symbol)
    return "<span class='mysubgrid fa fa-fw fa-plus'></span>" +
        "&nbsp;" + $.jgrid.htmlEncode(cellValue);
}

演示https://jsfiddle.net/OlegKi/o1L8k2k6/2/另外使用以下beforeSelectRow代码来处理打开/关闭子网格

beforeSelectRow: function (rowid, e) {
    var $target = $(e.target), $subgridTd;
    if ($target.hasClass("mysubgrid")) {
        $subgridTd = $target.closest("tr.jqgrow>td")
            .siblings("td")
            .filter(".ui-sgcollapsed");

        // simulate opening/closing of the subgrid
        $target.removeClass("fa-minus fa-plus"); // remove both classes
        $target.addClass(
            $subgridTd.hasClass("sgexpanded") ?
                "fa-plus" :
                "fa-minus"
        );
        // simulate click on the original subgrid button
        $subgridTd.find(".sgbutton").click();
    }
    return true; // allow selection of the row
}

看起来像

另一答案

为此，您可以使用切换子网格的方法。这些方法称为expandSubGridRow，collapseSubGridRow或toggleSubGridRow。

有关更多信息，请参阅Guriddo documentation here

您可以绑定所需单元格上的单击（使用formatter或cellattr事件）来切换子网格行