jquery 插件ztree的應用------動態加載樹節點數據

 

      對於樹的節點加載有兩種方法，一是同步全部加載，二是異步分批加載。

那么我們什么時候該用同步全部加載，什么時候該用異步分批加載呢？。當我們要顯示的樹節點不是很多的時候，應首選同步全部加載。如果我們有很多的節點要加載，並且加載時間非常的慢，這時候我們要選擇異步分批加載。如果這時還用同步全部加載的話，頁面加載的速度會很慢，如果數據足夠多會造成頁面假死現象。凡事不能說的太死，也要根據自己的實際情況來判定到底用那種方法合適。

下面介紹具體的應用，我先簡述一下項目的架構，此test，用的是javaee開發的,主要是jsp和Servlet，這里沒有數據庫，都是一些假數據。

首先同步全部加載，因為要在js里面去后台獲取節點數據，所有我用了ajax，但是是同步的不是異步的，json數據的格式[{id:’1’,pid:’0’,name:’1’},…………]。主頁面index.jsp. 我只說js代碼，剩下的我相信大家能領會的看代碼

     

var zTreeObj;    
var zNodes;
var setting = {
            check: {
                enable: true,
                chkStyle:"checkbox"
            },
            data: {
                simpleData: {
                    enable: true
                }
            }
        };

 

      這是設置樹的屬性值，在上一篇文章已經結束，在這不多廢話了，代碼中zTreeObj是定義的一個樹的全局變量。zNodes是保存樹節點的json對象。繼續看

$(document).ready(function(){
              $.ajax({
             type: "Get",    
             url: 'GetTree',          
             dataType: "text",     
             global: false,             
             async: false,                      
             success: function (strReult) {   
                 zNodes=eval(strReult); 
             },    
            error: function () {   
               alert("Ajax請求數據失敗!");
            }
            });
            zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
$("#submit").bind('click',getNodeValue);    
    });

 

     上面不難看出我是用ajax同步的方法去后台獲取數據的，其中 9行是把獲取的數據轉換成json對象在賦值給zNodes， 此時zNodes已經有數據了，第15 行是初始化樹，傳進三個參數，分別是 html對象，setting樹屬性，zNodes json數據。這行執行完樹就在id為treeDemo的地方顯示出來了。

其實樹就是拿來用的嗎，那么當被選中的節點如何才能傳到后台給java程序用呢，我的辦法是這樣的看代碼。

     第16行按鈕綁定一個click

    function getNodeValue (){
var nodes = zTreeObj.getCheckedNodes();
                    var s = '';//選中節點ids  
                     //遍歷選中的節點，為s賦值  
                    for(var i=0; i<nodes.length; i++){  
                     var isParent = nodes[i].isParent;
                    if(isParent!=true){
                        if (s != '')s += ',';  
                          s += nodes[i].id;  
                          }
                     }  
                     $("#content").val(s);
        }

      但你選中復選框是按下按鈕，通過這個方法就可以獲取到葉子節點的信息，id pid name 等信息。把想獲取的信息放到id為content的容器里，在用from傳到后台，這樣就后台就可以用到前台傳來的信息了。

樹全部加載節點就介紹到這，下面我們來介紹怎樣異步加載節點，看代碼

  

var zTreeObj;
        var setting = {
        check: {
                enable: true,
                chkStyle:"checkbox"
            },
            async: {
                enable: true,
                url:"ShowTree",
                autoParam:["id", "name=n"],
                otherParam:{"otherParam":"zTreeAsyncTest"},
                dataFilter: filter
            }
        };
     
        function filter(treeId, parentNode, childNodes) {
            if (!childNodes) return null;
            for (var i=0, l=childNodes.length; i<l; i++) {
                childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
            }
            return childNodes;
        }
           function setContentValue(){
           var nodes = zTreeObj.getCheckedNodes();
                    var s = '';//選中節點ids  
                     //遍歷選中的節點，為s賦值  
                    for(var i=0; i<nodes.length; i++){  
                     var isParent = nodes[i].isParent;
                    
                        if (s != '')s += ',';  
                          s += nodes[i].id;  
                         
                     }  
                     $("#content").val(s);
        }
        
        $(document).ready(function(){
            zTreeObj = $.fn.zTree.init($("#treeDemo"), setting);
        });

      上面的代碼作用就是當你點擊某一父節點是他會從后台獲取其子節點並加載到樹里，這就是異步加載樹節點的代碼，同步加載數據看懂了，這個異步加載樹節點自然就通了，我就不再多廢話了。

下面是異步分批獲取節點用到的java Servlet的dopost方法看代碼

public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        String pId = "0";
        String pName = "";
        if(null!=request.getParameter("id"))
            pId = request.getParameter("id");
        if(null!=request.getParameter("n"))
            pName =request.getParameter("n");
        if (pId==null || pId=="") pId = "0";
        if (pName==null) pName = "";
        StringBuffer ss = new StringBuffer("[");
        for (int i=1; i<5; i++) {
            String nId = pId+i;
            String nName = pName+"n"+i;
            ss.append("{ id:'"+nId+"',    name:'"+nName+"',    isParent:true}");
            if (i<4) {
                ss.append(",");
            }
        }
        ss.append("]");
        response.getWriter().write(ss.toString());
    }

從這個類里面可以看出我需要json的數據結構，其實我這個test寫的漏洞很多，我只是想展示一下怎么用這個ztree。至於其他的大家在用的自己可以完善。