【基础中心】笔记五--zTree的用法

最近在做菜单树，前端用的是zTree，总结一下用到的方法。

1.初始化zTree

// 基本设置
var setting = {
    view: {
        showIcon: false,
        selectedMulti: true
    },
    data: {
        simpleData: {
            enable: true,
            idKey: "id",
            pIdKey: "pId"
        }
    },
    check: {
        enable: false
    },
    callback: {
        onClick: zTreeClick
    }
};

// treeNodes是全局变量，得到所有的节点
treeNodes = [];
// 遍历取出对我们有用的数据
$.each(nodes,function(index,num){
    generateTree(num);                      
});

// 初始化树
$.fn.zTree.init($('#tree'), setting, treeNodes);

2.递归调用得到所有节点

function generateTree(num){

    // 如果有子菜单一直循环下去
    if(num.funcMenuExtends != null){
        $.each(num.funcMenuExtends,function(i,n){

            treeNodes.push({"id":n.menuId,"name":n.menuName,"pId":n.parMenuId,"menuType":n.menuType});

            // 递归调用生成下级子菜单
            generateTree(n);
        });
    }
};

3.选中节点展开并且自动触发点击事件

使用于不直接点击树上的节点，但能触发zTreeClick的事件

function autoClickFuncMenu(menuId){

    // 获取树对象
    var zTreeObj = $.fn.zTree.getZTreeObj("tree");
    // 根据id获取节点
    var node = zTreeObj.getNodeByParam("id",menuId);

    zTreeObj.selectNode(node,true);//指定选中ID的节点  
    zTreeObj.expandNode(node, true, false);//指定选中ID节点展开
    // 自动触发点击事件
    zTreeObj.setting.callback.onClick(null, zTreeObj.setting.treeId, node);

};

4.点击节点动态获取父和本节点的名称形成标题

4.1

// --------------------------------------找到选中节点的所有父节点-------------------------------------

function checkAllParents(treeNode){

    if (treeNode.getParentNode() == null) {
        return;
    }else{
        treeNode.checked=true;
        // 递归调用
        checkAllParents(treeNode.getParentNode());
        parentNames.push(treeNode.getParentNode().name);
        parentMenuIds.push(treeNode.getParentNode().id);
    }
};

4.2

// --------------------------------------找到该节点以及父节点生成数组-------------------------------------

function checkAllNodes(treeNode){
    // 全局变量，在这里清空
    parentNames = [];
    parentMenuIds = [];

    checkAllParents(treeNode); 
    parentNames.push(treeNode.name);
    parentMenuIds.push(treeNode.id);
};

4.3

// --------------------------------------动态展示选中节点右侧页面的标题-------------------------------------

function autoShowDivTitle(parentNames,parentMenuIds){

    var str = "";
    // 最后一个标题不要链接的样式
    for(var i = 0; i < parentNames.length; i++){
        if(i == parentNames.length - 1){
            str += parentNames[i];
        } else{
            str += "<a href='#' onclick='autoClickFuncMenu( "+ parentMenuIds[i] +");'>" + parentNames[i] + "</a>" + " > ";
        }
    }
    $("#divTitle").html(str);
};

5.新增或修改节点节点

新增或修改节点后需要刷新树，当查询树的方法没执行完，节点一开始展开了，最后又合上了，达不到我们要的效果。所以先让刷新树的方法执行。给他一定的时间执行完后，再展开节点，就可以实现效果。

// 刷新树
funcMenuTreeList();
// 延时执行，展开节点
setTimeout(function() {

        autoClickFuncMenu(menuId);          
}, 3000);

6.官方文档

更多资源查看:
zTree官方 API