zTree

加载树：

   *  一次性全部加载

       *  和数据库只交互一次

       *  会把大量的数据加载到内存中

   *  点击事件加载

       *  和数据库交互很多次

       *  按照需求加载数据

 一次性加载树：

   *  页面上导入三个文件

       *  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);

                        });

                  }

    }