如何让jQuery树形表格的展开/折叠节点显示连接虚线

问题详情 #

使用层级树形表格插件时碰到个问题：带+/-展开/折叠按钮的节点，没法像普通非分支节点那样显示连接虚线。尤其是当后面跟着展开节点时，下面这段结构的<span>元素完全出不来虚线：

<span class="tree-table-space-block" data-part-level="1_3" data-all-level="1_3" data-level="1"><i></i></span>

问题截图：

修复方案 #

这种连接虚线一般是插件用CSS伪元素（:before/:after）或者背景样式实现的，直接给tree-table-space-block元素补下面的CSS规则就行：

/* 给带层级属性的space-block元素加上垂直虚线 */
.tree-table-space-block[data-part-level][data-all-level] {
  position: relative;
}

.tree-table-space-block[data-part-level][data-all-level]:before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  width: 1px;
  border-left: 1px dashed #ccc; /* 颜色和样式可自行调整，匹配原有虚线风格 */
}

/* 若最后一级节点出现多余线条，可添加此规则调整 */
.tree-table-space-block[data-part-level$="_3"]:before {
  height: calc(100% - 1em); /* 缩短线条，避免和下一级节点的线条重叠 */
}

额外提示 #

1. 如果插件原本的虚线是用背景图实现的，把上面的border-left换成对应的背景样式即可，示例：

background: url('你的虚线图路径') repeat-y center center;

2. 将#ccc替换为项目的主题色，保证视觉风格统一。
3. 多测试不同层级的节点（修改data-part-level的后缀值），确保所有场景下虚线都能正常显示。

内容的提问来源于stack exchange，提问作者StackNewbie