zTree 还原设计稿-树结构样式（1）

最新推荐文章于 2025-05-15 09:47:40 发布

fk129

最新推荐文章于 2025-05-15 09:47:40 发布

阅读量618

点赞数

CC 4.0 BY-SA版权

分类专栏： zTree

本文链接：https://blog.youkuaiyun.com/qq_36061522/article/details/97933434

zTree 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何在zTree控件中定制样式及调整节点间距，包括覆盖默认样式和自定义节点间距的方法，适用于需要精细化控制树状结构显示效果的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用zTree控件时，不可避免的会要根据设计稿完成对控件原有样式的覆盖；
下面是设计稿的树样式
在这里插入图片描述
这里面的问题是后面节点背景条的实现；

下面看下zTree初始化的代码：
在这里插入图片描述

这里对li标签下的ul标签进行padding-left的设置，形成子节点的缩进；那我们的就不能只针对这里的li标签进行背景设置

解决：
1.对原有样式的覆盖

.ztree li ul{
	padding-left:0px
}

2.通过自定义控件的方式，对节点进行padding-left的设置

function addDiyDom(treeId, treeNode){
	// console.log(treeNode)
	// 根据级别设置左侧间距
	$('#'+treeNode.tId+'_a').css('padding-left',25*treeNode.level+15+'px')
}

自定义控件的使用，可参考zTree 单击展开节点添加自定义控件