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

Question

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

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

Answer 1

解决方案取决于您使用的jqGrid的版本和jqGrid的 fork 。 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"列。人们会看到像

这样的结果

如果您需要在另一列中放置“+”/“ - ”图标，那么首先应使用自定义格式化程序将图标放在列中，然后您可以使用{{1}检测列内部的点击。此外，您可以使用beforeSelectRow隐藏标准子网格列。自定义格式化程序的代码可以是，例如，

.jqGrid("hideCol", "subgrid")

演示https://jsfiddle.net/OlegKi/o1L8k2k6/2/另外使用以下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); } 代码来处理打开/关闭子网格

beforeSelectRow

看起来像

Answer 2

为了做到这一点，你可以使用切换子网格的方法。这些方法称为expandSubGridRow，collapseSubGridRow或toggleSubGridRow。

有关详细信息，请参阅Guriddo documentation here

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