加载树

加载树：
   *  一次性全部加载
       *  和数据库只交互一次
       *  会把大量的数据加载到内存中
   *  点击事件加载
       *  和数据库交互很多次
       *  按照需求加载数据
一次性加载树：
   *  页面上导入三个文件
       *  zTreeStyle.css
       *  jQuery-1.4.2.js
       *  jquery-ztree.2.5.js
   *  在页面上准备树的容器
       <ul id="tree" class="tree" style="width:230px; overflow:auto;"></ul>
   *  写js代码
        $("#tree").zTree(setting,nodes);创建树
点击事件加载树：
   *  导入三个文件
   *  在页面上准备树的容器
   *  加载树的根节点
       loadRootNode: function(){
           var parameter = {
               pid: 0
           };
           $.post("menuitemAction_showMenuitemsByPid.action", parameter, function(data){
            tree.zTree = $("#tree").zTree(tree.setting, data.menuitemList);
           });
       }
      说明
          *  因为后面要加载其节点的子节点，要用到tree.zTree属性，所以只要在tree对象中设置一个属性
             那么只要在该json对象中，tree.zTree都能访问
          *  在其他地方使用tree.zTree时，一定要确保tree.zTree有值了才能使用，因为上面执行的是异步加载
    *  点击该节点，加载该节点的子节点
          *  触发该节点的+号事件
              setting: {
                   callback: {
                        expand: function(event, treeId, treeNode){
                            tree.pNode = treeNode;
                            tree.loadNodeByPNODE();//加载子节点
                        }
                   }
              }

              loadNodeByPNODE: function(){
                 var parameter = {
                      pid: tree.pNode.mid
                 };
                if (!tree.zTree.getNodeByParam("pid", tree.pNode.mid)) {//判断点击的节点是否有子节点
                      $.post("menuitemAction_showMenuitemsByPid.action", parameter, function(data){
                         /**
                          * 把查询出来的子节点追加到父节点上
                           */
                          tree.zTree.addNodes(tree.pNode, data.menuitemList, true);
                        });
                  }
    }
      

转载于:https://www.cnblogs.com/dxldqt/p/5991742.html