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"}
];
上面是比较简单的,下面是用ztree 做一个通讯录
通讯录是这样的 还是自定义图标 然后后面的小三角可以修改ztree里面的zTreeStyle.css
之后在按照项目的要求调整好就可以了。