使用ztree 自定义样式做树形结构，通讯录

最新推荐文章于 2022-07-04 11:56:52 发布

xieqian0204

最新推荐文章于 2022-07-04 11:56:52 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签： jquery

本文链接：https://blog.youkuaiyun.com/xieqian0204/article/details/106499897

本文详细介绍如何在ZTree中自定义图标，包括创建空的ul元素，设置自定义图标的路径，以及如何通过修改zTreeStyle.css来调整小三角样式，适用于创建通讯录等应用场景。

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

ztree简单的自定义图标

1. 首先新建一个空的ul

<ul id="treeDemo" class="ztree"></ul>

2. 对数据进行渲染这个时候可以加上自己提前下载好的自定义的图标


        var zNodes =[
            { id:1, name:"XXX项目", open:true,iconOpen:"content/images/img/fileopen.png",iconClose:"content/images/img/fileclose.png"},
            { id:11, pId:1, name:"项目1", open:false,iconOpen:"content/images/img/fileopen.png",iconClose:"content/images/img/fileclose.png"},
            { id:111, pId:11, name:"石材生产加工环境污染防治条例石材生产加工环境污染防治条例",icon:"content/images/img/word.png"},
            { id:12, pId:1, name:"项目2", open:false,iconOpen:"content/images/img/fileopen.png",iconClose:"content/images/img/fileclose.png"},
            { id:121, pId:12, name:"石材生产加工环境污染防治条例",icon:"content/images/img/word.png"},
            { id:13, pId:1, name:"项目3", open:false,iconOpen:"content/images/img/fileopen.png",iconClose:"content/images/img/fileclose.png"},
            { id:131, pId:13, name:"条例",icon:"content/images/img/word.png"},
            { id:14, pId:1, name:"项目4", open:false,iconOpen:"content/images/img/fileopen.png",iconClose:"content/images/img/fileclose.png"},
            { id:141, pId:14, name:"条例",icon:"content/images/img/word.png"},
            { id:15, pId:1, name:"项目5", open:false,iconOpen:"content/images/img/fileopen.png",iconClose:"content/images/img/fileclose.png"},
            { id:151, pId:15, name:"条例",icon:"content/images/img/word.png"},
            { id:16, pId:1, name:"项目6", open:true,iconOpen:"content/images/img/fileopen.png",iconClose:"content/images/img/fileclose.png"},
            { id:161, pId:16, name:"关于立法报告的文档",icon:"content/images/img/word.png"},
            { id:162, pId:16, name:"关于立法报告的文档",icon:"content/images/img/word.png"},
            { id:163, pId:16, name:"关于立法报告的文档",icon:"content/images/img/word.png"},
            { id:164, pId:16, name:"关于立法报告的文档",icon:"content/images/img/word.png"}
        ];