Tree 树菜单

使用说明 PLUGIN

树菜单插件ztree是国人开发的一款插件，该插件功能全面，API详细，还有丰富的在线实例，该插件在开发者中大范围使用。详见官网。

本框架没有对插件源文件做任何修改，仅仅是内置了一套皮肤，让树菜单插件更漂亮精致。

普通用法

下面四个例子综合展示了：无线菜单、有线菜单、复选菜单、单选菜单、拖拽菜单，链接菜单和禁止菜单。

<script src="src/js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://src.axui.cn/v1.0/src/plugins/ztree/js/jquery.ztree.all.min.js"></script>
<script type='text/javascript'>
    $(document).ready(function () {

        var zNodes =[
            { id:1, pId:0, name:"北京市", isParent:true, open:true},
            { id:2, pId:1, name:"朝阳区"},
            { id:3, pId:1, name:"丰台区"},
            { id:4, pId:1, name:"海淀区"},
            { id:5, pId:0, name:"广东省", isParent:true},
            { id:6, pId:5, name:"广州市", isParent:true},
            { id:7, pId:6, name:"花都区"},
            { id:8, pId:6, name:"番禺区"},
            { id:9, pId:6, name:"越秀区"},
            { id:10, pId:5, name:"深圳市", isParent:true},
            { id:11, pId:10, name:"福田区"},
            { id:12, pId:10, name:"罗湖区"},
            { id:13, pId:10, name:"龙岗区"},
            { id:14, pId:5, name:"河源市"},
            { id:15, pId:0, name:"湖南省", isParent:true},
            { id:16, pId:15, name:"长沙市"},
            { id:17, pId:15, name:"永州市"},
            { id:18, pId:15, name:"株洲省"},
            { id:19, pId:0, name:"湖北省", isParent:true},
            { id:20, pId:19, name:"武汉市"},
            { id:21, pId:19, name:"襄阳市"},
            { id:22, pId:19, name:"荆州市"},
            { id:23, pId:19, name:"九江市"},
            { id:24, pId:0, name:"上海市"},
        ];
        var setting01 = {
            view: {
                showLine: false,
                addHoverDom: addHoverDom,
                removeHoverDom: removeHoverDom,
                selectedMulti: false
            },
            check: {
                enable: true,
                chkStyle: 'radio'

            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            edit: {
                enable: true
            },

        };


        var newCount = 1;
        function addHoverDom(treeId, treeNode) {
            var sObj = $("#" + treeNode.tId + "_span");
            if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
            var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
                + "' title='add node' onfocus='this.blur();'></span>";
            sObj.after(addStr);
            var btn = $("#addBtn_"+treeNode.tId);
            if (btn) btn.bind("click", function(){
                var zTree = $.fn.zTree.getZTreeObj("tree01");
                zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, name:"新增节点" + (newCount++)});
                return false;
            });
        };
        function removeHoverDom(treeId, treeNode) {
            $("#addBtn_"+treeNode.tId).unbind().remove();
        };
        $.fn.zTree.init($("#tree01"), setting01, zNodes);


        var setting02 = {
            view: {
                dblClickExpand: false,
                selectedMulti: false
            },
            check: {
                enable: true
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            edit: {
                enable: true
            }
        };
        $.fn.zTree.init($("#tree02"), setting02, zNodes);

        var setting03 = {
            view: {
                showIcon: false,
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
        };
        $.fn.zTree.init($("#tree03"),setting03, zNodes);


        var setting04 = {
            view: {
                enable: true,
                chkDisabledInherit: true
            },
            check: {
                enable: true
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
        };
        var zNodes04 =[
            { id:1, pId:0, name:"北京市", isParent:true, open:true},
            { id:2, pId:1, name:"朝阳区"},
            { id:3, pId:1, name:"丰台区",chkDisabled:true,},
            { id:4, pId:1, name:"海淀区"},
            { id:5, pId:0, name:"广东省", isParent:true},
            { id:6, pId:5, name:"广州市", isParent:true},
            { id:7, pId:6, name:"花都区"},
            { id:8, pId:6, name:"番禺区"},
            { id:9, pId:6, name:"越秀区"},
            { id:10, pId:5, name:"深圳市", isParent:true},
            { id:11, pId:10, name:"福田区"},
            { id:12, pId:10, name:"罗湖区",chkDisabled:true, checked:true,},
            { id:13, pId:10, name:"龙岗区"},
            { id:14, pId:5, name:"河源市"},
            { id:15, pId:0, name:"湖南省", isParent:true},
            { id:16, pId:15, name:"长沙市"},
            { id:17, pId:15, name:"永州市",chkDisabled:true, checked:true,},
            { id:18, pId:15, name:"株洲省"},
        ];
        $.fn.zTree.init($("#tree04"), setting04, zNodes04);

    });
</script>

                             <div class="ax-row ax-split">
                                    <div class="ax-col ax-col-6">
                                        <ul class="ax-tree" id="tree01"></ul>
                                    </div>
                                    <div class="ax-col ax-col-6">
                                        <ul class="ax-tree" id="tree02"></ul>
                                    </div>
                                    <div class="ax-col ax-col-6">
                                        <ul class="ax-tree" id="tree03"></ul>
                                    </div>
                                    <div class="ax-col ax-col-6">
                                        <ul class="ax-tree" id="tree04"></ul>
                                    </div>
                                </div>

新增元素

使用addDiyDom方法给节点增加新元素

<script src="src/js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://src.axui.cn/v1.0/src/plugins/ztree/js/jquery.ztree.all.min.js"></script>
<script type='text/javascript'>
    $(document).ready(function () {

        var zNodes =[
            { id:1, pId:0, name:"北京市", isParent:true, open:true},
            { id:2, pId:1, name:"朝阳区"},
            { id:3, pId:1, name:"丰台区"},
            { id:4, pId:1, name:"海淀区"},
            { id:5, pId:0, name:"广东省", isParent:true},
            { id:6, pId:5, name:"广州市", isParent:true},
            { id:7, pId:6, name:"花都区"},
            { id:8, pId:6, name:"番禺区"},
            { id:9, pId:6, name:"越秀区"},
            { id:10, pId:5, name:"深圳市", isParent:true},
            { id:11, pId:10, name:"福田区"},
            { id:12, pId:10, name:"罗湖区"},
            { id:13, pId:10, name:"龙岗区"},
            { id:14, pId:5, name:"河源市"},
            { id:15, pId:0, name:"湖南省", isParent:true},
            { id:16, pId:15, name:"长沙市"},
            { id:17, pId:15, name:"永州市"},
            { id:18, pId:15, name:"株洲省"},
            { id:19, pId:0, name:"湖北省", isParent:true},
            { id:20, pId:19, name:"武汉市"},
            { id:21, pId:19, name:"襄阳市"},
            { id:22, pId:19, name:"荆州市"},
            { id:23, pId:19, name:"九江市"},
            { id:24, pId:0, name:"上海市"},
        ];
        var setting05 = {
            view: {
                showIcon: false,
                addDiyDom: addAfter
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
        };
        function addAfter(treeId, treeNode) {
            if (treeNode.parentNode && treeNode.parentNode.id!=2) return;
            var aObj = $("#" + treeNode.tId + '_a');
            if (treeNode.id == 2) {
                aObj.append("");
            } else if (treeNode.id == 3) {
                aObj.after("2");
            } else if (treeNode.id == 4) {
                aObj.after("");
            } else if (treeNode.id == 24) {
                aObj.after("查看");
            }
        }
        $.fn.zTree.init($("#tree05"), setting05, zNodes);

    });
</script>

                             <ul class="ax-tree" id="tree05"></ul>

右键操作

使用onRightClick回调方法显示右键操作菜单，同时定义操作函数，本例来自ztree官网。

<script src="src/js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://src.axui.cn/v1.0/src/plugins/ztree/js/jquery.ztree.all.min.js"></script>
<script type='text/javascript'>
        var zNodes =[
            { id:1, pId:0, name:"北京市", isParent:true, open:true},
            { id:2, pId:1, name:"朝阳区"},
            { id:3, pId:1, name:"丰台区"},
            { id:4, pId:1, name:"海淀区"},
            { id:5, pId:0, name:"广东省", isParent:true},
            { id:6, pId:5, name:"广州市", isParent:true},
            { id:7, pId:6, name:"花都区"},
            { id:8, pId:6, name:"番禺区"},
            { id:9, pId:6, name:"越秀区"},
            { id:10, pId:5, name:"深圳市", isParent:true},
            { id:11, pId:10, name:"福田区"},
            { id:12, pId:10, name:"罗湖区"},
            { id:13, pId:10, name:"龙岗区"},
            { id:14, pId:5, name:"河源市"},
            { id:15, pId:0, name:"湖南省", isParent:true},
            { id:16, pId:15, name:"长沙市"},
            { id:17, pId:15, name:"永州市"},
            { id:18, pId:15, name:"株洲省"},
            { id:19, pId:0, name:"湖北省", isParent:true},
            { id:20, pId:19, name:"武汉市"},
            { id:21, pId:19, name:"襄阳市"},
            { id:22, pId:19, name:"荆州市"},
            { id:23, pId:19, name:"九江市"},
            { id:24, pId:0, name:"上海市"},
        ];
    var setting06 = {
        view: {
            dblClickExpand: false
        },
        check: {
            enable: true
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            onRightClick: OnRightClick
        }
    };
    function OnRightClick(event, treeId, treeNode) {
        if (!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) {
            zTree.cancelSelectedNode();
            showRMenu("root", event.clientX, event.clientY);
        } else if (treeNode && !treeNode.noR) {
            zTree.selectNode(treeNode);
            showRMenu("node", event.clientX, event.clientY);
        }
    }

    function showRMenu(type, x, y) {
        $("#rMenu ul").show();
        if (type=="root") {
            $("#m_del").hide();
            $("#m_check").hide();
            $("#m_unCheck").hide();
        } else {
            $("#m_del").show();
            $("#m_check").show();
            $("#m_unCheck").show();
        }

        y += document.body.scrollTop;
        x += document.body.scrollLeft;
        rMenu.css({"top":y+"px", "left":x+"px", "display":"block"});

        $("body").bind("mousedown", onBodyMouseDown);
    }
    function hideRMenu() {
        if (rMenu) rMenu.css({"display": "none"});
        $("body").unbind("mousedown", onBodyMouseDown);
    }
    function onBodyMouseDown(event){
        if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length>0)) {
            rMenu.css({"display" : "none"});
        }
    }
    var addCount = 1;
    function addTreeNode() {
        hideRMenu();
        var newNode = { name:"增加" + (addCount++)};
        if (zTree.getSelectedNodes()[0]) {
            newNode.checked = zTree.getSelectedNodes()[0].checked;
            zTree.addNodes(zTree.getSelectedNodes()[0], newNode);
        } else {
            zTree.addNodes(null, newNode);
        }
    }
    function removeTreeNode() {
        hideRMenu();
        var nodes = zTree.getSelectedNodes();
        if (nodes && nodes.length>0) {
            if (nodes[0].children && nodes[0].children.length > 0) {
                var msg = "要删除的节点是父节点，如果删除将连同子节点一起删掉。";
                if (confirm(msg)==true){
                    zTree.removeNode(nodes[0]);
                }
            } else {
                zTree.removeNode(nodes[0]);
            }
        }
    }
    function checkTreeNode(checked) {
        var nodes = zTree.getSelectedNodes();
        if (nodes && nodes.length>0) {
            zTree.checkNode(nodes[0], checked, true);
        }
        hideRMenu();
    }
    function resetTree() {
        hideRMenu();
        $.fn.zTree.init($("#tree06"), setting06, zNodes);
    }
    var zTree, rMenu;

    $(document).ready(function () {

        $.fn.zTree.init($("#tree06"), setting06, zNodes);
        zTree = $.fn.zTree.getZTreeObj("tree06");
        rMenu = $("#rMenu");

    });
</script>

                                <ul class="ax-tree" id="tree06"></ul>
                                <div id="rMenu" class="ax-tree-menu">
                                    <a href="###" id="m_add" onclick="addTreeNode();">增加节点</a>
                                    <a href="###" id="m_del" onclick="removeTreeNode();">删除节点</a>
                                    <a href="###" id="m_check" onclick="checkTreeNode(true);">选择节点</a>
                                    <a href="###" id="m_unCheck" onclick="checkTreeNode(false);">不选择节点</a>
                                    <a href="###" id="m_reset" onclick="resetTree();">初始化</a>
                                </div>

折叠菜单

追加ax-tree-collapse类模拟折叠菜单，同时创建addDiyDom函数重新安排元素。本例来自ztree官网。

<script src="src/js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://src.axui.cn/v1.0/src/plugins/ztree/js/jquery.ztree.all.min.js"></script>
<script type='text/javascript'>
        var zNodes =[
            { id:1, pId:0, name:"北京市", isParent:true, open:true},
            { id:2, pId:1, name:"朝阳区"},
            { id:3, pId:1, name:"丰台区"},
            { id:4, pId:1, name:"海淀区"},
            { id:5, pId:0, name:"广东省", isParent:true},
            { id:6, pId:5, name:"广州市", isParent:true},
            { id:7, pId:6, name:"花都区"},
            { id:8, pId:6, name:"番禺区"},
            { id:9, pId:6, name:"越秀区"},
            { id:10, pId:5, name:"深圳市", isParent:true},
            { id:11, pId:10, name:"福田区"},
            { id:12, pId:10, name:"罗湖区"},
            { id:13, pId:10, name:"龙岗区"},
            { id:14, pId:5, name:"河源市"},
            { id:15, pId:0, name:"湖南省", isParent:true},
            { id:16, pId:15, name:"长沙市"},
            { id:17, pId:15, name:"永州市"},
            { id:18, pId:15, name:"株洲省"},
            { id:19, pId:0, name:"湖北省", isParent:true},
            { id:20, pId:19, name:"武汉市"},
            { id:21, pId:19, name:"襄阳市"},
            { id:22, pId:19, name:"荆州市"},
            { id:23, pId:19, name:"九江市"},
            { id:24, pId:0, name:"上海市"},
        ];

    var setting07 = {
        view: {
            showLine: false,
            showIcon: false,
            addDiyDom: addIcon
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            beforeClick: beforeClick
        }
    };
    function addIcon(treeId, treeNode) {
        var spaceWidth = 18;
        var switchObj = $("#" + treeNode.tId + "_switch"),
            icoObj = $("#" + treeNode.tId + "_ico");
        switchObj.remove();
        icoObj.before(switchObj);
        if (treeNode.level > 0) {
            var spaceStr = "";
            switchObj.before(spaceStr);
        }
    }
    function beforeClick(treeId, treeNode) {
        if (treeNode.level == 0 ) {
            var zTree = $.fn.zTree.getZTreeObj("tree07");
            zTree.expandNode(treeNode);
            return false;
        }
        return true;
    }

    $(document).ready(function () {

        $.fn.zTree.init($("#tree07"), setting07, zNodes);

    });
</script>

                               <ul class="ax-tree ax-tree-menu" id="tree07"></ul>

下拉菜单

借助Popup用法显示窗口式的树菜单，点击树菜单选项向input传值，可以单选也可以多选，详细请参考官方演示实例。通过Popup参数设置弹出位置、动画、风格等，更多Popup用法请点击这里。

城市：

选择

<script src="src/js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://src.axui.cn/v1.0/src/plugins/ztree/js/jquery.ztree.all.min.js"></script>
<script type='text/javascript'>
        var zNodes =[
            { id:1, pId:0, name:"北京市", isParent:true, open:true},
            { id:2, pId:1, name:"朝阳区"},
            { id:3, pId:1, name:"丰台区"},
            { id:4, pId:1, name:"海淀区"},
            { id:5, pId:0, name:"广东省", isParent:true},
            { id:6, pId:5, name:"广州市", isParent:true},
            { id:7, pId:6, name:"花都区"},
            { id:8, pId:6, name:"番禺区"},
            { id:9, pId:6, name:"越秀区"},
            { id:10, pId:5, name:"深圳市", isParent:true},
            { id:11, pId:10, name:"福田区"},
            { id:12, pId:10, name:"罗湖区"},
            { id:13, pId:10, name:"龙岗区"},
            { id:14, pId:5, name:"河源市"},
            { id:15, pId:0, name:"湖南省", isParent:true},
            { id:16, pId:15, name:"长沙市"},
            { id:17, pId:15, name:"永州市"},
            { id:18, pId:15, name:"株洲省"},
            { id:19, pId:0, name:"湖北省", isParent:true},
            { id:20, pId:19, name:"武汉市"},
            { id:21, pId:19, name:"襄阳市"},
            { id:22, pId:19, name:"荆州市"},
            { id:23, pId:19, name:"九江市"},
            { id:24, pId:0, name:"上海市"},
        ];
    var setting09 = {
        view: {
            dblClickExpand: false
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            onClick: getValue
        }
    };
    function getValue(e, treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("tree09"),
            nodes = zTree.getSelectedNodes(),
            v = "";
        nodes.sort(function compare(a,b){return a.id-b.id;});
        for (var i=0, l=nodes.length; i 0 ) v = v.substring(0, v.length-1);
        var cityObj = $("#city-input");
        cityObj.attr("value", v);
    }

    $(document).ready(function () {

        var treeObj = $("#tree07");
        $.fn.zTree.init(treeObj, setting07, zNodes);
        zTree_Menu = $.fn.zTree.getZTreeObj("tree07");
        curMenu = zTree_Menu.getNodes()[0].children[0].children[0];
        zTree_Menu.selectNode(curMenu);
        treeObj.hover(function () {
            if (!treeObj.hasClass("showIcon")) {
                treeObj.addClass("showIcon");
            }
        }, function() {
            treeObj.removeClass("showIcon");
        });
        $.fn.zTree.init($("#tree09"), setting09, zNodes);

        $('#city-input').axPopup({
            url:'#poptree',
            placement:'bottom',
            maxWidth:400,
        });
        $('#city-btn').on('click',function(e){
            e.stopPropagation();
            axPopups.show('#city-input');
        });
    });
</script>

                              <div class="ax-popup-hide" id="poptree"><ul id="tree09" class="ax-tree"></ul></div>
                                <div class="ax-form-group">
                                    <div class="ax-flex-row">
                                        <div class="ax-form-label">城市：</div>
                                        <div class="ax-form-con">
                                            <div class="ax-form-input"><input type="text" id="city-input"></div>
                                        </div>
                                        <a href="###" class="ax-form-btn ax-btn ax-primary" id="city-btn">选择</a>
                                    </div>
                              </div>

反转

给ul最佳尺寸类即可实现不同尺寸效果，可使用：ax-sm，ax-md和ax-lg，其中ax-md是默认尺寸。

<script type="text/javascript" src="https://src.axui.cn/v1.0/src/plugins/ztree/js/jquery.ztree.all.min.js"></script>
<script type='text/javascript'>
        var zNodes =[
            { id:1, pId:0, name:"北京市", isParent:true, open:true},
            { id:2, pId:1, name:"朝阳区"},
            { id:3, pId:1, name:"丰台区"},
            { id:4, pId:1, name:"海淀区"},
            { id:5, pId:0, name:"广东省", isParent:true},
            { id:6, pId:5, name:"广州市", isParent:true},
            { id:7, pId:6, name:"花都区"},
            { id:8, pId:6, name:"番禺区"},
            { id:9, pId:6, name:"越秀区"},
            { id:10, pId:5, name:"深圳市", isParent:true},
            { id:11, pId:10, name:"福田区"},
            { id:12, pId:10, name:"罗湖区"},
            { id:13, pId:10, name:"龙岗区"},
            { id:14, pId:5, name:"河源市"},
            { id:15, pId:0, name:"湖南省", isParent:true},
            { id:16, pId:15, name:"长沙市"},
            { id:17, pId:15, name:"永州市"},
            { id:18, pId:15, name:"株洲省"},
            { id:19, pId:0, name:"湖北省", isParent:true},
            { id:20, pId:19, name:"武汉市"},
            { id:21, pId:19, name:"襄阳市"},
            { id:22, pId:19, name:"荆州市"},
            { id:23, pId:19, name:"九江市"},
            { id:24, pId:0, name:"上海市"},
        ];
        var setting02 = {
            view: {
                dblClickExpand: false,
                selectedMulti: false
            },
            check: {
                enable: true
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            edit: {
                enable: true
            }
        };

    $(document).ready(function () {

       $.fn.zTree.init($("#tree08"), setting02, zNodes);

    });
</script>

                             <ul class="ax-tree ax-reverse" id="tree08"></ul>

表格

追加ax-tree-table类模拟表格，表格效果默认是没有网格的，如果需要实现带网格的表格可追加ax-tree-grid。本框架对表格树菜单定义了三类div：tree-switch、tree-td、tree-opt。

tree-switch：用来装入箭头、单选、复选和标题，该div是自动伸缩的；
tree-td：用来装入普通文本内容，该div宽度为160px；
tree-opt：用来装入操作按钮，该宽度为120px。

<script type="text/javascript" src="https://src.axui.cn/v1.0/src/plugins/ztree/js/jquery.ztree.all.min.js"></script>
<script type='text/javascript'>
  var zTreeNodes;
    var setting10 = {
        view: {
            showLine: false,
            showIcon: false,
            addDiyDom: addTable
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        edit: {
            enable: true,
            showRemoveBtn: false,
            showRenameBtn: false
        },
    };

    function addTable(treeId, treeNode) {
        var spaceWidth = 22;
        var liObj = $("#" + treeNode.tId);
        var aObj = $("#" + treeNode.tId + "_a");
        var switchObj = $("#" + treeNode.tId + "_switch");
        var icoObj = $("#" + treeNode.tId + "_ico");
        var spanObj = $("#" + treeNode.tId + "_span");

        aObj.attr('title', '');
        aObj.append('');
        var divSwitch = $(liObj).find('div').eq(0);
        switchObj.remove();
        spanObj.remove();
        icoObj.remove();
        divSwitch.append(switchObj);
        divSwitch.append(spanObj);

        var spaceStr = "";
        switchObj.before(spaceStr);
        var editStr = '';
        editStr += '' + (treeNode.zip == null ? '-' : treeNode.zip) + '';
        editStr += '' + (treeNode.agency == null ? '-' : treeNode.people) + '';
        editStr += '' + (treeNode.people == null ? '-' : treeNode.people ) + '';
        editStr += '';
        aObj.append(editStr);

        function addTree(id){
            alert('新增：'+id)
        }
        function editTree(id){
            alert('修改：'+id);
        }
        function removeTree(id){
            alert('删除：'+id);
        }

    }


    function query() {
        var data=[{"id":"1","pId":"0","name":"北京市","open":true,"zip":"100000","agency":"直辖市","people":2153,},{"id":"2","pId":"1","name":"朝阳区","zip":"100020","agency":"市辖区","people":360,},{"id":"3","pId":"1","name":"丰台区","zip":"100071","agency":"市辖区","people":202,},{"id":"4","pId":"1","name":"海淀区","zip":"100089","agency":"市辖区","people":335,},{"id":"5","pId":"0","name":"广东省","open":true,"zip":"51-52","agency":"省","people":11521,},{"id":"6","pId":"5","name":"广州市","open":false,"zip":"510000","agency":"地级市","people":1530,},{"id":"7","pId":"6","name":"花都区","zip":"510800","agency":"市辖区","people":78,},{"id":"8","pId":"6","name":"番禺区","zip":"511400","agency":"市辖区","people":171,},{"id":"9","pId":"6","name":"越秀区","zip":"510030","agency":"市辖区","people":117,},{"id":"10","pId":"5","name":"深圳市","open":false,"zip":"518000","agency":"地级市","people":1343,},{"id":"11","pId":"10","name":"福田区","zip":"518000","agency":"市辖区","people":163,},{"id":"12","pId":"10","name":"罗湖区","zip":"518001","agency":"市辖区","people":103,},{"id":"13","pId":"10","name":"龙岗区","zip":"518116","agency":"市辖区","people":250,},{"id":"14","pId":"5","name":"河源市","zip":"517000","agency":"设区的市","people":372,},{"id":"15","pId":"0","name":"湖南省","open":false,"zip":"410011-427000","agency":"省","people":6918,},{"id":"16","pId":"15","name":"长沙市","zip":"410000","agency":"地级市","people":839,},{"id":"17","pId":"15","name":"永州市","zip":"425000","agency":"地级市","people":545,},{"id":"18","pId":"15","name":"株洲省","zip":"412000","agency":"地级市","people":402,},{"id":"19","pId":"0","name":"湖北省","open":false,"zip":"430000-443000","agency":"省","people":5927,},{"id":"20","pId":"19","name":"武汉市","zip":"430000","agency":"地级市","people":1121,},{"id":"21","pId":"19","name":"襄阳市","zip":"441000","agency":"地级市","people":605,},{"id":"22","pId":"19","name":"荆州市","zip":"434000","agency":"地级市","people":641,},{"id":"23","pId":"19","name":"九江市","zip":"332000","agency":"地级市","people":489,},{"id":"24","pId":"0","name":"上海市","zip":"200000","agency":"直辖市","people":2428,},];
        zTreeNodes = data;
        $.fn.zTree.init($("#tree10"), setting10, zTreeNodes);
        var li_head = ' 城市
邮编
行政级别' +
                                        '人口(万)
操作';
                                $("#tree10").find('li').eq(0).before(li_head)
                                }

                                $(function () {
                                query();
                                });

</script>

                             <ul class="ax-tree ax-tree-table" id="tree10"></ul>

使用cookie

借助jquery.cookie.js插件实现刷新后保持状态不变。本框架ax.js集成了该插件，无需另外引用。

<script type="text/javascript" src="https://src.axui.cn/v1.0/src/plugins/ztree/js/jquery.ztree.all.min.js"></script>
<script type='text/javascript'>
  var zTreeNodes;
    var setting10 = {
        view: {
            showLine: false,
            showIcon: false,
            addDiyDom: addTable
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        edit: {
            enable: true,
            showRemoveBtn: false,
            showRenameBtn: false
        },
    };

    function addTable(treeId, treeNode) {
        var spaceWidth = 22;
        var liObj = $("#" + treeNode.tId);
        var aObj = $("#" + treeNode.tId + "_a");
        var switchObj = $("#" + treeNode.tId + "_switch");
        var icoObj = $("#" + treeNode.tId + "_ico");
        var spanObj = $("#" + treeNode.tId + "_span");

        aObj.attr('title', '');
        aObj.append('');
        var divSwitch = $(liObj).find('div').eq(0);
        switchObj.remove();
        spanObj.remove();
        icoObj.remove();
        divSwitch.append(switchObj);
        divSwitch.append(spanObj);

        var spaceStr = "";
        switchObj.before(spaceStr);
        var editStr = '';
        editStr += '' + (treeNode.zip == null ? '-' : treeNode.zip) + '';
        editStr += '' + (treeNode.agency == null ? '-' : treeNode.people) + '';
        editStr += '' + (treeNode.people == null ? '-' : treeNode.people ) + '';
        editStr += '';
        aObj.append(editStr);

        function addTree(id){
            alert('新增：'+id)
        }
        function editTree(id){
            alert('修改：'+id);
        }
        function removeTree(id){
            alert('删除：'+id);
        }

    }


    function query() {
        var data=[{"id":"1","pId":"0","name":"北京市","open":true,"zip":"100000","agency":"直辖市","people":2153,},{"id":"2","pId":"1","name":"朝阳区","zip":"100020","agency":"市辖区","people":360,},{"id":"3","pId":"1","name":"丰台区","zip":"100071","agency":"市辖区","people":202,},{"id":"4","pId":"1","name":"海淀区","zip":"100089","agency":"市辖区","people":335,},{"id":"5","pId":"0","name":"广东省","open":true,"zip":"51-52","agency":"省","people":11521,},{"id":"6","pId":"5","name":"广州市","open":false,"zip":"510000","agency":"地级市","people":1530,},{"id":"7","pId":"6","name":"花都区","zip":"510800","agency":"市辖区","people":78,},{"id":"8","pId":"6","name":"番禺区","zip":"511400","agency":"市辖区","people":171,},{"id":"9","pId":"6","name":"越秀区","zip":"510030","agency":"市辖区","people":117,},{"id":"10","pId":"5","name":"深圳市","open":false,"zip":"518000","agency":"地级市","people":1343,},{"id":"11","pId":"10","name":"福田区","zip":"518000","agency":"市辖区","people":163,},{"id":"12","pId":"10","name":"罗湖区","zip":"518001","agency":"市辖区","people":103,},{"id":"13","pId":"10","name":"龙岗区","zip":"518116","agency":"市辖区","people":250,},{"id":"14","pId":"5","name":"河源市","zip":"517000","agency":"设区的市","people":372,},{"id":"15","pId":"0","name":"湖南省","open":false,"zip":"410011-427000","agency":"省","people":6918,},{"id":"16","pId":"15","name":"长沙市","zip":"410000","agency":"地级市","people":839,},{"id":"17","pId":"15","name":"永州市","zip":"425000","agency":"地级市","people":545,},{"id":"18","pId":"15","name":"株洲省","zip":"412000","agency":"地级市","people":402,},{"id":"19","pId":"0","name":"湖北省","open":false,"zip":"430000-443000","agency":"省","people":5927,},{"id":"20","pId":"19","name":"武汉市","zip":"430000","agency":"地级市","people":1121,},{"id":"21","pId":"19","name":"襄阳市","zip":"441000","agency":"地级市","people":605,},{"id":"22","pId":"19","name":"荆州市","zip":"434000","agency":"地级市","people":641,},{"id":"23","pId":"19","name":"九江市","zip":"332000","agency":"地级市","people":489,},{"id":"24","pId":"0","name":"上海市","zip":"200000","agency":"直辖市","people":2428,},];
        zTreeNodes = data;
        $.fn.zTree.init($("#tree10"), setting10, zTreeNodes);
        var li_head = ' 城市
邮编
行政级别' +
                                        '人口(万)
操作';
                                $("#tree10").find('li').eq(0).before(li_head)
                                }

                                $(function () {
                                query();
                                });

                                </script>

                             <ul class="ax-tree ax-tree-table" id="tree10"></ul>