zTtree 技术笔记

demo1

入门：

  <!-- zTree导入的文件 -->
  <script type="text/javascript" src="zTreev2.5/jquery-1.4.2.js"></script>
  <script type="text/javascript" src="zTreev2.5/jquery-ztree-2.5.js"></script>
  <link rel="stylesheet" href="zTreev2.5/zTreeStyle/zTreeStyle.css" type="text/css"></link>

 <script type="text/javascript">
  var zTree;
 
  // ztree初始化参数配置
    var setting = {
            isSimpleData: true,
            treeNodeKey: "id",
            treeNodeParentKey: "pid",
            showLine: true,
            root:{
                isRoot:true,
                nodes:[]
            }
        };
 
  var zNodes = [
      {id:1,pid:0,name:'系统管理'},
      {id:2,pid:1,name:'用户管理',url:'login.jsp',icon:''},
      {id:3,pid:1,name:'角色管理'},
      {id:4,pid:1,name:'权限管理'},
      {id:5,pid:0,name:'论坛管理',isParent : true }   
  ];
 
  $(function(){
      // 初始化树
      // $("#tree").zTree(setting, zNodes);    
      $("#tree").zTree(setting,zNodes);
  });
 
  </script>

<div>

         <ul id="tree" class="tree" style="width:230px; overflow:auto;"></ul> 

</div>
 

Demo2

zTree 与后台交互

1，一次性加载一颗完整的树。

    <!-- zTree导入的文件 -->
  <script type="text/javascript" src="zTreev2.5/jquery-1.4.2.js"></script>
  <script type="text/javascript" src="zTreev2.5/jquery-ztree-2.5.js"></script>
  <link rel="stylesheet" href="zTreev2.5/zTreeStyle/zTreeStyle.css" type="text/css"></link>
 
  <script type="text/javascript">
  var zTree;
 
  // ztree初始化参数配置
    var setting = {
            isSimpleData: true,
            treeNodeKey: "id",
            treeNodeParentKey: "pid",
            showLine: true,
            root:{
                isRoot:true,
                nodes:[]
            }
        };
 
  $(function(){
      // 初始化树
          // 发送ajax请求，到服务器
          $.ajax({
              type:'post',
              url : '${pageContext.request.contextPath}/ztree?method=loadTree' ,
              cache:false,
            dataType:'json',
            success:function(r){
                    //alert(r[0].name);   
                    // alert(r[0].isParent);    
                 zTree= $("#tree").zTree(setting,r);    
              },
              error:function(r){
              }
          });
  });

<div>
          <ul id="tree" class="tree" style="width:230px; overflow:auto;"></ul>  
</div>

2，点击事件加载树。

 <!-- zTree导入的文件 -->
  <script type="text/javascript" src="zTreev2.5/jquery-1.4.2.js"></script>
  <script type="text/javascript" src="zTreev2.5/jquery-ztree-2.5.js"></script>
  <link rel="stylesheet" href="zTreev2.5/zTreeStyle/zTreeStyle.css" type="text/css"></link>
 
  <script type="text/javascript">
  var zTree;
 
  // ztree初始化参数配置
    var setting = {
            isSimpleData: true,
            treeNodeKey: "id",
            treeNodeParentKey: "pid",
            showLine: true,
            root:{
                isRoot:true,
                nodes:[]
            },
            // 展开的时候，执行一个事件函数
             callback : {
                 expand:function(event, treeId, treeNode){
                     loadRootTree(treeNode);
                 }
                }
        };
        
        /*
         * 该方法是在点击父节点的+号的时候执行的，这就意味着在执行该方法的时候，树早已经生成了,所以才能用tree.zTree;
         */
        function loadRootTree(treeNode){
            //alert (treeNode.id);
            $.ajax({
                  type:'post',
                  data : {pid:treeNode.id},  
                  url : '${pageContext.request.contextPath}/ztree?method=loadTreeByPid' ,
                  cache:false,
                dataType:'json',
                success:function(r){
                    // 判断该节点的子节点是否存在，如果存在就不继续添加了。
                    if(!zTree.getNodeByParam("pid",treeNode.id)){
                        /*
                              把查询出来的子节点追加到父节点上
                           */
                         zTree.addNodes(treeNode, r, true);
                    }    
                  },
                  error:function(r){
                      alert("数据加载失败了！");
                  }
              });
        }
 
  //
  $(function(){
          // 发送ajax请求，到服务器,首先加载全部父亲节点
              $.ajax({
                  type:'post',
                  data : {pid:0},  
                  url : '${pageContext.request.contextPath}/ztree?method=loadTreeByPid' ,
                  cache:false,
                dataType:'json',
                success:function(r){
                     zTree= $("#tree").zTree(setting,r);    
                  },
                  error:function(r){
                  }
              });
  });
 
 </script>

      <div>
          <ul id="tree" class="tree" style="width:230px;overflow:auto;"></ul>  
      </div>