ztree的使用

Posted 2020-12-26 pengfei25

一、异步加载

　　

function renderStationTree(){
    var setting = { 
            view: { 
                dblClickExpand: false 
            }, 
            async: {
                enable: true,
                url:"../merchant/getMerchantTree",
                type:"post",
                autoParam: ["id"]
            },
            data: {
                key: {
                    name: "name",
                },
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "pId"
                }
            },
            callback: { 
                onAsyncSuccess: zTreeOnAsyncSuccess,
                beforeExpand: beforeExpand,
                onExpand: onExpand,
                onClick: onClick
            } 
        }; 
    
    var zNodes =[]; 
    var curExpandNode = null;
    function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
        var treeNodes = JSON.parse(msg),groupId = ‘‘,name = ‘‘;
        for(var i=0;i<treeNodes.length;i++){
            if(treeNodes[i].pId != 0){
                groupId = parseInt(treeNodes[i].id.split(‘g‘)[1]);
                name = treeNodes[i].name;
                break;
            }
        }
        $(‘#groupId‘).val(groupId);
        $(‘#defaultId‘).val(groupId);
        defaultSelected();
        initReportDataTable(defaultSelectedNodeId);
    };
    function beforeExpand(treeId, treeNode) {
        var pNode = curExpandNode ? curExpandNode.getParentNode():null;
        var treeNodeP = treeNode.parentTId ? treeNode.getParentNode():null;
        var zTree = $.fn.zTree.getZTreeObj("tree");
        for(var i=0, l=!treeNodeP ? 0:treeNodeP.children.length; i<l; i++ ) {
            if (treeNode !== treeNodeP.children[i]) {
                zTree.expandNode(treeNodeP.children[i], false);
            }
        }
        while (pNode) {
            if (pNode === treeNode) {
                break;
            }
            pNode = pNode.getParentNode();
        }
        if (!pNode) {
            singlePath(treeNode);
        }

    }
    function singlePath(newNode) {
        if (newNode === curExpandNode) return;
        var zTree = $.fn.zTree.getZTreeObj("tree"),rootNodes, tmpRoot, tmpTId, i, j, n;
        if (!curExpandNode) {
            tmpRoot = newNode;
            while (tmpRoot) {
                tmpTId = tmpRoot.tId;
                tmpRoot = tmpRoot.getParentNode();
            }
            rootNodes = zTree.getNodes();
            for (i=0, j=rootNodes.length; i<j; i++) {
                n = rootNodes[i];
                if (n.tId != tmpTId) {
                    zTree.expandNode(n, false);
                }
            }
        } else if (curExpandNode && curExpandNode.open) {
            if (newNode.parentTId === curExpandNode.parentTId) {
                zTree.expandNode(curExpandNode, false);
            } else {
                var newParents = [];
                while (newNode) {
                    newNode = newNode.getParentNode();
                    if (newNode === curExpandNode) {
                        newParents = null;
                        break;
                    } else if (newNode) {
                        newParents.push(newNode);
                    }
                }
                if (newParents!=null) {
                    var oldNode = curExpandNode;
                    var oldParents = [];
                    while (oldNode) {
                        oldNode = oldNode.getParentNode();
                        if (oldNode) {
                            oldParents.push(oldNode);
                        }
                    }
                    if (newParents.length>0) {
                        zTree.expandNode(oldParents[Math.abs(oldParents.length-newParents.length)-1], false);
                    } else {
                        zTree.expandNode(oldParents[oldParents.length-1], false);
                    }
                }
            }
        }
        curExpandNode = newNode;
    }

    function onExpand(event, treeId, treeNode) {
        curExpandNode = treeNode;
    }
    //单击节点
    function onClick(e,treeId, treeNode) {
        var id = parseInt(treeNode.id.split(‘g‘)[1]);
        var zTree = $.fn.zTree.getZTreeObj("tree");
        var stationObj = $("#groupName"); 
        var stationInput=$(‘#groupId‘);
        if(treeNode.level == 0){
            return false;
        }else{
            nodes = zTree.getSelectedNodes(), 
            v = "",
            selectId="";
            for (var i=0, l=nodes.length; i<l; i++) { 
            v += nodes[i].name + ","; 
            selectId+=nodes[i].id + ","; 
            } 
            if (v.length > 0 ) v = v.substring(0, v.length-1); 
            if (selectId.length > 0 ) selectId = selectId.substring(1, selectId.length-1);     
            stationObj.val(v);
            stationInput.val(selectId);
            renderDeviceList(selectId);
            selectedId=treeNode.id.split(‘g‘)[1];
            if(defaultSelectedNodeId != selectedId){
                defaultSelectedNodeDom.removeClass(‘curSelectedNode‘);
            }
            $(‘#groupName‘).focus();
            hideStation();
            $(‘#groupName‘).focus();
        }
    }    
    $(‘#groupName‘).on(‘click‘,function(){
        var stationObj = $("#groupName"); 
        var stationOffset = $("#groupName").offset(); 
        $("#stationCon").css({left:stationOffset.left + "px", top:stationOffset.top + stationObj.outerHeight()-5 + "px"}).slideDown("fast"); 
        $("body").bind("mousedown", onBodyDown); 
    })
    function showStation(){ 
        var stationObj = $("#groupName"); 
        var stationOffset = $("#groupName").offset(); 
        $("#stationCon").css({left:stationOffset.left + "px", top:stationOffset.top  + stationObj.outerHeight()-5 + "px"}).slideDown("fast"); 
        $("body").bind("mousedown", onBodyDown); 
    } 
    function hideStation() { 
        $("#stationCon").fadeOut("fast"); 
        $("body").unbind("mousedown", onBodyDown); 
    }
    function onBodyDown(event) { 
        if (!(event.target.id == "menuBtn" || event.target.id == "stationCon" || $(event.target).parents("#stationCon").length>0)) { 
            hideStation(); 
        } 
    }
    $.fn.zTree.init($("#tree"), setting, zNodes);                
}