jqgrid treegrid节点连接线显示父子链接

Question

我正在使用 Jqgrid Treegrid 来显示一些分层数据。我遇到了两种不同的树实现，它们具有通过连接到节点的一些线显示父子链接的功能。 一个这样的实现是由 Jquery Jeasyui 库，你可以找到它here

第二个有点类似的实现是Tabelizer - here

现在的问题是我们如何在 Jqgrid treegrid 中实现这个功能？

在每一行的开头都有一个 class="tree-wrap tree-wrap-ltr" 的 div，向下的每一层都有一个 style="width:18px;"并在每个级别不断添加 18px。

Means level 0  style=width:18px
levle 1  style=width:36px
level 2  style=width:54px

等等

我在想也许一些漂亮的 js 循环可以遍历每个 div 并添加一些边框属性，这些属性又可以作为关卡连接器可见。 关键是检查一个节点何时是最后一个子节点，以及何时下面的节点是兄弟节点，以让多条线并行向下流动。

有更好的想法吗？

Answer 1

jqGrid 使用带有图标的 div 的 left 属性（或 right 在使用 direction: "rtl" 选项的情况下）将图标放置在 TreeGrid 的项目之前。每个级别的宽度都是 18px 见the part of code。所以我没有看到任何简单的方法来实现您的要求。

您可以尝试放置额外的<div> 或一些具有相应左侧位置的背景图像以获得您需要的外观，但这并不容易。很明显，需要在展开/折叠行时更改图标/图像。不幸的是，jqGrid 在展开/折叠的情况下不提供任何额外的回调/事件。因此，必须将方法“子类化”。请参阅the answer 以获取相应的代码示例。无论如何，所需行为的实现并不容易，如果需求对您的项目并不重要，我不建议您开始这样做。