zTree 还原设计稿-树结构样式(1)

在使用zTree控件时,不可避免的会要根据设计稿完成对控件原有样式的覆盖;
下面是设计稿的树样式
zTree 还原设计稿-树结构样式(1)_第1张图片
这里面的问题是后面节点背景条的实现;

下面看下zTree初始化的代码:
zTree 还原设计稿-树结构样式(1)_第2张图片
在这里插入图片描述
这里对li标签下的ul标签进行padding-left的设置,形成子节点的缩进;那我们的就不能只针对这里的li标签进行背景设置
zTree 还原设计稿-树结构样式(1)_第3张图片

解决:
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 单击展开节点 添加自定义控件

你可能感兴趣的:(zTree)