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

Posted 2023-05-08

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

【英文标题】：jqgrid change position of subgrid or add a subgrid icon to custom column and not anywhere else?

【发布时间】：2018-02-19 18:39:01

【问题描述】：

我是 jqgrid 的新手。我想创建一个带有子网格的 jqgrid，我从 trirand.com 获得了代码。但在示例中，显示子行或子网格的子网格图标默认位于所有行的第 1 位。

我们如何将图标的位置更改为任何其他列，以使列数据文本和 (+) 图标位于表格的同一单元格中。由于我的数据是 JSON 格式，并且图标位置要求可以更改。点击后我需要显示相关的子网格。

【参考方案1】：

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

我在免费的 jqGrid 分支中重写了 jqGrid 的许多旧代码。功能之一：可以将"subgrid" 列移动到网格中的任何其他位置。只需使用remapColumns 或更好的新remapColumnsByName 方法对列进行重新排序。可以跳过remapColumnsByName 的最后一列，这些位置不会改变或跳过第一个标准 列，如"rn" 列，在那里可以看到行号（如果选项@987654334 @ 用来）。演示 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

看起来像

【参考方案2】：

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

欲了解更多信息，请参阅Guriddo documentation here

您可以绑定单击所需单元格（使用格式化程序或 cellattr 事件）来切换子网格行

【讨论】：

老兄，但我找不到有关如何将子网格加号应用于任何位置的任何帮助

正如我在回答中所说，使用格式化程序或 cellattr 事件添加加号。您将需要手动添加它并绑定单击或使用将执行 toggllSubGridRow 的 onCellSelect 事件。子网格默认加号位置不可更改