zTree异步加载修改节点图标方法

项目需要用到zTree插件，zTree就不做介绍了，下面两个连接是是zTree的文档和示例

zTree文档：http://www.treejs.cn/v3/api.php

zTree示例：http://www.treejs.cn/v3/demo.php#_101

 

zTree的基本用法通过看演示及文档基本都能掌握

 

下面记录下项目中特别的用法

1.异步加载时修改图标

    $('#rptIndTree').height($(window).height()-120);
    var setting = {
        check: {
            enable: true,
            chkStyle: "radio",
            radioType: "all"
//            chkboxType:{ "Y": "ps", "N": "ps" }
        },
        data: {
            key: {
                name: "NAME"
            },
            simpleData: {
                enable: true,
                idKey: "ID",
                pIdKey: "PID",
                rootPId: "0"
            }
        },
       async : {    
            enable : true,   
            type: 'get',
            url : url, // Ajax 获取数据的 URL 地址    
            autoParam : [], 
            otherParam: []  
        },
        callback : {
            onAsyncSuccess: zTreeOnAsyncSuccess,
            onClick: zTreeOnClick,
            onCheck: zTreeOnCheck,
            beforeClick: zTreeBeforeClick,
            beforeCheck: zTreeBeforeCheck
        }
    };
    zTree = $.fn.zTree.init($("#rptIndTree"), setting, "");

上面是基本的加载zTree的代码

加载完后在加载成功的回调函数中处理树节点的图标zTreeOnAsyncSuccess

//加载完后执行
function zTreeOnAsyncSuccess(){
    var treeObj = $.fn.zTree.getZTreeObj("rptIndTree");
    var nodes = treeObj.getNodes();
    for (var i=0, l=nodes.length; i < l; i++) {
        if('undefined' != typeof(nodes[i].children)){
            nodes[i].iconOpen =  '../menu1_open.png';  //父菜单打开图标
            nodes[i].iconClose =  '../menu1_close.png';  //父菜单关闭图标
            treeObj.updateNode(nodes[i]);
            
            for (var k=0, _l=nodes[i].children.length; k < _l; k++) {
                nodes[i].children[k].icon = '../menu2_def.png';  //子菜单图标
                treeObj.updateNode(nodes[i].children[k]);
            }
        }else{
            nodes[i].icon = '../menu2_def.png';  //没有子菜单图标
            treeObj.updateNode(nodes[i]);
        }
    }
}

遍历每个树节点根据有无子节点来修改图标，如果有子节点需要同时设置iconOpen和iconClose 属性，否则改节点打开和关闭都是同一种样式。

修改了节点的图标属性后，然后更新该节点用到以下方法：

treeObj.updateNode(nodes[i])

 在zTree文档中可以查找到此方法。

转载于:https://www.cnblogs.com/but-he/p/9922680.html