zTree 样式 修改 成 elementui 树 类似样式

需求介绍

根据 UI 的出图 来，主要是 内部基本使用的 是 elementUI 的框架，所以设计的样式就与其类似和靠近

思路如下

主要介绍 js 部分的修改，css 相对要修改比较简单。
在 jquery.ztree.core-3.5.js 文件中进行修改。先了解一下渲染的步骤，以及关键需要修改的地方：

首先调用了 init 函数 -> 在 init 函数中 调用了 view.createNodes -> 调用了 view.appendNodes, 在 此函数中组装了 结点的 html , view.makeDOMNodeLine 函数封装了 展开关闭按钮的 span, view.makeDOMNodeNameBefore 函数 封装了 a 标签的 开始部分。

• 修改步骤：
  1）将 展开关闭的按钮 放到 a 标签里面
  2）不通过 ul 的padding 进行缩进，通过 a 标签 的 level * leftLength 来进行缩进

修改如下

1. 将 展开关闭的按钮 放到 a 标签里面

// 第 862 行开始看
view.makeDOMNodeMainBefore(html, setting, node);
data.getBeforeA(setting, node, html);
view.makeDOMNodeNameBefore(html, setting, node);
data.getInnerBeforeA(setting, node, html);
view.makeDOMNodeLine(html, setting, node);  // 展开关闭按钮放到 a 标签内部
view.makeDOMNodeIcon(html, setting, node);

2. a 标签 的 level * leftLength 来进行缩进

// 第 1152 行开始看
html.push("<a id='", node.tId, consts.id.A, "' class='", consts.className.LEVEL, node.level,"' treeNode", consts.id.A," onclick=\"", (node.click || ''),
"\" "," style='padding-left:", node.level * 18 + 8,"px' ", ((url != null && url.length > 0) ? "href='" + url + "'" : ""), " target='",view.makeNodeTarget(node),"' style='", fontStyle.join(''),
"'");

将 ul 的 padding 取消掉
配合 css ：

.ztree li a.curSelectedNode {
  width: 100%; 
}

效果如下

本文作者： jeneen
发布时间： 2022-05-06
最后更新： 2023-05-09
本文标题： zTree 样式 修改 成 elementui 树 类似样式
本文链接： https://zx1001011.github.io/2022/05/06/makelittechangetoztree/
版权声明： 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处！

赏

谢谢你请我吃糖果

支付宝

微信