zTree的 用法

zTree入门:

zTree:常用于目录树节点的展示使用，先给出如下一整套的节点代码展示，请看：

var zTree, rMenu = $("#rMenu");// zTree实例 ||右键菜单父节点
var treeBtns = { //树结构右键菜单配置  依据 treeNode.level
    "0": [
        {
            name: '新增方案',
            event: 'addFaPop()'
        }
    ],
    "1": [
        {
            name: '预览方案',
            event: 'previewFz()'
        },
        {
            name: '新增分组',
            event: 'addFzPop()'
        },
        {
            name: '复制方案',
            event: 'copyFzPop()'
        },

        {
            name: '导入方案节点',
            event: 'importFz()'
        },
        {
            name: '导出方案节点',
            event: 'exportFz()'
        },
        {
            name: '导入数据中心配置文件',
            event: 'importJsonFz()'
        },
        {
            name: '导出方案主配置文件',
            event: 'exportMainConfig()'
        },
        {
            name: '删除方案',
            event: 'removeFz()'
        }
    ],
    "2": [
        {
            name: '新增图层分组',
            event: 'addTczPop()'
        },
        {
            name: '新增图层',
            event: 'addFwPop()'
        },
        {
            name: '复制分组',
            event: 'copyFzPop()'
        },
        {
            name: '删除分组',
            event: 'removeFz()'
        }
    ],
    "3": [
        {
            name: '删除图层',
            event: 'removeFz()'
        }
    ],
    "4": [
        {
            name: '新增图层',
            event: 'addFwPop()'
        },
        {
            name: '删除图层组',
            event: 'removeFz()'
        }
    ]
};
var pNodes,arrNode;//根节点
var zTreeObj = (function(){
    var handler = {};
    var setting = { //zTree 配置
        async: {
            enable: true, //是否启用异步
            url:GeoParmaData.queryTcfaxxTree,//接口地址
            type: 'post',//请求方式
            autoParam: {},//自动填充的参
            otherParam:{},//额外的参
            dataFilter: function(treeId,parentNode,responseData){
                var result = responseData.result;
                $.each(result,function(i,d){
                    if(d.jdlx == '3'){
                        d.iconSkin = 'icon-file';
                    }else{
                        d.iconSkin = 'icon-folder';
                    }
                });
                return result;
            }
        },
        data: {
            simpleData: {
                enable: true,
                idKey: 'kid',
                pIdKey: 'pid',
                rootPId: 0
            },
            key: {
                name: 'mc'
            }
        },
        view: {
            dblClickExpand: false, //是否双击展开
            showLine: false, //是否展示线
            showIcon:true //是否展示icon
        },
        check: {
            enable: false //是否启用多选
        },
        callback: {
            onRightClick: OnRightClick, //右键点击事件
            onClick: OnTreeClick, //左键点击事件
            beforeAsync: BeforeAsync
        }
    };


    handler.init = function(){ //树结构初始化
        pNodes = {kid:"0", mc: '图层管理方案',type:'root',open:true,isParent:true};//根结构
        $.fn.zTree.init($("#treeDemo"), setting, []);
        zTree = $.fn.zTree.getZTreeObj("treeDemo");
        //添加根节点
        arrNode = zTree.addNodes(null, 0, pNodes);
        refreshNode();
    };

    return handler.init();
}());

/**
 *  右键点击事件
 * **/
function OnRightClick(event, treeId, treeNode) {
    if (!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) {

    } else if (treeNode && !treeNode.noR) {
        zTree.selectNode(treeNode);
        $("#"+treeNode.tId+"_a").click();
        if(treeNode.level < 3){
        	   showRMenu(treeNode.level, event.clientX, event.clientY);
        }else{
        	  showRMenu('2', event.clientX, event.clientY);
        }
      
    }
}
/**
 *  左键点击事件
 * **/
function OnTreeClick(event, treeId, treeNode){
    if(treeNode.level != 0){
        if(currLevel != treeNode.level){
            currLevel = treeNode.level;
            currTab = 0;
        }
        currKid = treeNode.kid;
        currBm = treeNode.bm;
        PageObj.setTabs(treeNode.jdlx);
        if(treeNode.children && treeNode.children.length > 0){
            zTree.expandNode(treeNode,true);
        }
        $tabBox.children().eq(currTab).click();
    }
}
/**
 *  展示右键点击后的菜单
 * **/
function showRMenu(type, x, y) {
    $("#rMenu ul").show();
    var aHtml = renderRightMenu(type);
    $("#rMenu ul").empty().append(aHtml.join(''));
    y += document.body.scrollTop;
    x += document.body.scrollLeft;
    rMenu.css({"top":y+"px", "left":x+"px", "visibility":"visible"});

    $("body").bind("mousedown", onBodyMouseDown);
}

/**
 *  渲染右侧点击后的菜单
 * **/
function renderRightMenu(type){
    var aHtml = [];
    $.each(treeBtns[type],function(i,d){
        aHtml.push('<li onclick="'+ d.event +'">'+ d.name +'</li>')
    });
    return aHtml;
}

/**
 *  隐藏右侧点击后的菜单
 * **/
function hideRMenu() {
    if (rMenu) rMenu.css({"visibility": "hidden"});
    $("body").unbind("mousedown", onBodyMouseDown);
}

/**
 *  点击body后的事件
 * **/
function onBodyMouseDown(event){
    if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length>0)) {
        rMenu.css({"visibility" : "hidden"});
    }
}
function BeforeAsync(treeId,treeNode){
    if(treeNode == undefined){
        return false;
    }
}

/**
 *  刷新根节点
 * **/
function refreshNode() {
    /*根据 treeId 获取 zTree 对象*/
    var type = "refresh";
    var silent = false;
    zTree.reAsyncChildNodes(arrNode[0], type, silent,function(){
        var node = zTree.getNodeByParam("kid",0);
        var child = node.children;
        if(child.length > 0){
            zTree.selectNode(child[0]);
            $("#"+child[0].tId+"_a").click();
        }

    });
}
function refreshCurrNode() {
    var type = 'refresh';
    var silent = false;
    var nodes = zTree.getSelectedNodes()[0];
    zTree.reAsyncChildNodes(arrNode[0], type, silent,function(){
        if(nKid != null){
            var node = zTree.getNodeByParam("kid",nKid);
            zTree.selectNode(node);
            $("#"+node.tId+"_a").click();
            nKid = null;
        }else{
            var node = zTree.getNodeByParam("kid", nodes.kid);
            zTree.selectNode(node);
            $("#"+node.tId+"_a").click();
        }
    });
}
/**
 *  刷新父节点
 * **/
function refreshParentNode(){
    var nodes = zTree.getSelectedNodes();
    var parentNode;
    var type = 'refresh';
    var silent = false;
    if(nodes.length > 0){
        parentNode = nodes[0].getParentNode();
        if(parentNode.type == 'root'){
            refreshNode();//刷新根节点
            return;
        }
    }
    zTree.reAsyncChildNodes(arrNode[0], type, silent,function(){
        var node = zTree.getNodeByParam("kid",parentNode.kid);
        zTree.selectNode(node);
        $("#"+node.tId+"_a").click();
    });
}

/**
 *  添加方案
 * **/
function addFaPop() {
    hideRMenu();
    PageObj.addFaPop();
}

疑难点解析： 

pNodes = {kid:"0", mc: '图层管理方案',type:'root',open:true,isParent:true};//根结构
$.fn.zTree.init($("#treeDemo"), setting, []);
zTree = $.fn.zTree.getZTreeObj("treeDemo");
//添加根节点
arrNode = zTree.addNodes(null, 0, pNodes);

zTree.selectNode(treeNode);----------------------选中节点；treeNode：点击事件中传入的参数，即选中的数据 

event.clientX----------------------------像素大小，即调整位置使用