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>