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文檔中可以查找到此方法。