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

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

之后在按照项目的要求调整好就可以了。