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

Question

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

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

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

有一个div，其中class =＆＃34; tree-wrap tree-wrap-ltr＆＃34;在每一行的开头，每个级别都有一个样式=＆＃34;宽度：18px;＆＃34;并继续在每个级别添加18px。

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

等等

我想也许一些漂亮的js循环可以遍历每个div并添加一些border属性，这些属性又可以作为级别连接器可见。 问题是检查节点何时是最后一个子节点，以及下面的节点是兄弟节点，让多条线路并行流下来。

有更好的想法吗？

Answer 1

jqGrid使用div的left属性和图标（如果使用right选项，则使用direction: "rtl"）将图标放在TreeGrid的项目之前。每个级别的宽度为18px，请参阅the part of code。所以我没有看到任何简单方法来实现您的要求。

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