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

问题描述：

我是jqgrid的新手。我想创建一个带有子网格的jqgrid，我从中获取了来自trirand.com的代码。但在该示例中，显示子行或子网格的子网格图标默认位于所有行的第一位。我们如何将图标的位置更改为任何其他列，以便列数据文本和（+）图标位于表格的同一个单元格中。由于我的数据采用JSON格式，图标位置要求可能会发生变化。点击，我需要显示相关的子网格。jqgrid更改子网格的位置或将子网格图标添加到自定义列而不是其他任何地方？

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

答

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

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

您可以绑定所需的细胞点击（使用格式化或cellattr事件）来切换亚格列

老兄，但我找不到任何帮助如何应用子网格加号到任何位置 –

正如我在我的回答中所说的使用格式化程序或cellattr事件来添加加号。你需要手动添加这个，并绑定一个点击或使用onCellSelect事件，它将执行toggllSubGridRow。子网格默认加号的位置不能改变 –

答

的解决方案取决于jqGrid的的版本，您使用的是jqGrid的分叉。托尼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);

列"name"和"invdate"后移动"subgrid"列。一看就会喜欢

结果如果需要放置“+” /“ - ”图标，另一列里面，那么你应该使用，首先，自定义格式放置里面的图标然后您可以使用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 
}

它看起来像

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

相关推荐