ztree自定义图标(iconSkin，iconClose,iconOpen)

设计图:

先放上ztree的api:http://www.treejs.cn/v3/api.php

首先是ztree的初始化:

js文件的初始化

​
 var obj = [
        {
        name: '福建省',
        id:1,
            iconOpen:openurl,
            iconClose:closeurl,
        children: [
            {
                name: '福州市',
                iconOpen:openurl,//自定义的父类展开图标
                iconClose:closeurl,//自定义的父类关闭图标
                children: [{
                    name:'XX河',
                    iconSkin:"iconSkin"
                }]
            }, {
                name:'厦门市',
                iconOpen:openurl,
                iconClose:closeurl,
                children:[
                    {
                    name:'白马河',
                         iconSkin:"iconSkin"
                },
                    {
                        name:'琴亭湖',
                        iconSkin:"iconSkin"
                    }]
            }
        ]
    }, {
            name:'江苏省',
            id:2,
            iconOpen:openurl,
            iconClose:closeurl,
            children:[{
                name:'南京市'
            }]
        }, {
            name:'河南',
            id:3,
            iconOpen:openurl,
            iconClose:closeurl,
            children:[
                {
                    name:'南阳'
                }
            ]
        }, {
            name:'广东',
            id:4,
            iconOpen:openurl,
            iconClose:closeurl,
            children:[{
                name:'深圳'
            }
            ]
        },{
            name:'安徽',
            id:5,
            iconOpen:openurl,
            iconClose:closeurl,
            children:[{
                name:'合肥'
            }]
        }
    ]
    var setting={
        view:{
            dblClickExpand: false,
            showLine: false,
            fontCss: {color: 'rgb(102, 102, 102)',
               "font-size":14},
            selectedMulti: true,
            txtSelectedEnable: true,
            dblClickExpand: false
        },
        check:{
            enable:false,
            chkStyle:'checkbox'
        },
        callback: {
            onClick:onNodeClick
        }
    };

    $.fn.zTree.init($("#treeDemo"),setting,obj);//单击展开

    function onNodeClick (e,treeID,treeNode) {
        var zTree=$.fn.zTree.getZTreeObj("treeDemo");//单击展开
        zTree.expandNode(treeNode);
    }

​

注意我代码里面的两个单击展开父类，由于ztree没有自定义单击一次展开父类的设定（默认是双击展开），我们需要用特殊的方法，在callback里面调用函数来使它单击一次就展开父类。

参考下列博客:

https://blog.csdn.net/u014018281/article/details/77881402

https://blog.csdn.net/zsg88/article/details/71189289

html页面的容器:

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

好了，接下来就是调换默认图标了，我上面的js代码中已经注释了iconOpen以及iconClose两个在obj里面的参数，它们两个对应的是图片各自的url(obj为定义的结点对象数组)，对每一个结点都添加这个，有点麻烦，但管用。在子节点中用iconSkin参数，注意iconSkin对应的为css样式。所以我们必须添加css样式:
 

.ztree li span.button.iconSkin_ico_docu{
    background: url("../image/dizhihei.png") no-repeat;
}

在这里关键的是，iconSkin_ico_docu，虽然js中为iconSkin，但是ztree会自动为你添加后面的_ico_docu，所以一定要加，还有，前面的.ztree li span.button也要加上，不然会优先级不够（我猜），下面是我没加上的效果:

很惨的教训。

以下是我搞了一下午的效果:

还有一个问题就是前面的+_不知道怎么去掉，正在寻找解决的办法。