jquery+ztree插件同步加载

      对于树的节点加载有两种方法，一是同步全部加载，二是异步分批加载。

那么我们什么时候该用同步全部加载，什么时候该用异步分批加载呢？。当我们要显示的树节点不是很多的时候，应首选同步全部加载。如果我们有很多的节点要加载，并且加载时间非常的慢，这时候我们要选择异步分批加载。如果这时还用同步全部加载的话，页面加载的速度会很慢，如果数据足够多会造成页面假死现象。凡事不能说的太死，也要根据自己的实际情况来判定到底用那种方法合适。

//普通方式

var setting = {
      data: {
      simpleData: {
      enable: true
    }
 },
   callback: {
   onClick: onClick
   }

 };

//从action中传来的treeData，json串

var zNodes = <s:property value="treeData"/>;

//加载树

$(document).ready(function(){  
   $.fn.zTree.init($("#treeDemo"), setting, zNodes); 

 });

//当点击树节点时的事件

function onClick(event, treeId, treeNode, clickFlag) {
  var ttmc = treeNode.ttmc;
  var id = treeNode.id;
  var pid = treeNode.pid;
  if(treeNode.level==2){
    //alert(treeNode.level+'=='+'a');
    //document.getElementById("contentFra1").src = “";
    //document.getElementById("contentFra2").src = ”“;

  }else if(treeNode.level==0 || treeNode.level==1){
   //alert(treeNode.level+'=='+'b');
   //document.getElementById("contentFra1").src = ”";
   //window.opener.document.getElementById("xxxxxx").value=treeNode.name;//把选择的树节点名称回写到父页面指定的位置
   self.close();
  }else{
   //alert("1111");
  }
 }

 

//以下是ajax方式
 1 var zTreeObj;   
 2 var zNodes;
 3 var setting = {
 4             check: {
 5                 enable: true,
 6                 chkStyle:"checkbox"
 7             },
 8             data: {
 9                 simpleData: {
10                     enable: true
11                 }
12             }
13         };

 

      这是设置树的属性值，在上一篇文章已经结束，在这不多废话了，代码中zTreeObj是定义的一个树的全局变量。zNodes是保存树节点的json对象。

 1 $(document).ready(function(){
 2               $.ajax({
 3              type: "Get",   
 4              url: 'GetTree',         
 5              dataType: "text",    
 6              global: false,            
 7              async: false,                     
 8              success: function (strReult) {  
 9                  zNodes=eval(strReult);
10              },   
11             error: function () {  
12                alert("Ajax请求数据失败!");
13             }
14             });
15             zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
16 $("#submit").bind('click',getNodeValue);   
17     });

 

     上面不难看出我是用ajax同步的方法去后台获取数据的，其中 9行是把获取的数据转换成json对象在赋值给zNodes， 此时zNodes已经有数据了，第15 行是初始化树，传进三个参数，分别是 html对象，setting树属性，zNodes json数据。这行执行完树就在id为treeDemo的地方显示出来了。

其实树就是拿来用的吗，那么当被选中的节点如何才能传到后台给java程序用呢，我的办法是这样的看代码。

     第16行按钮绑定一个click

 1     function getNodeValue (){
 2 var nodes = zTreeObj.getCheckedNodes();
 3                     var s = '';//选中节点ids 
 4                      //遍历选中的节点，为s赋值 
 5                     for(var i=0; i<nodes.length; i++){ 
 6                      var isParent = nodes[i].isParent;
 7                     if(isParent!=true){
 8                         if (s != '')s += ','; 
 9                           s += nodes[i].id; 
10                           }
11                      } 
12                      $("#content").val(s);
13         }

      但你选中复选框是按下按钮，通过这个方法就可以获取到叶子节点的信息，id pid name 等信息 把想获取的信息放到id为content的容器里，在用from传到后台，这样就后台就可以用到前台传来的信息了。