生成效率最高的树--dojo Tree学习

树是系统中经常用到的控件，在数据量大的情况下，加载的速度通常就会比较慢！要想提高加载速度，最好就是分层的从服务端读取数据，分层加载页面的树结点。下面的树利用ajax技术，通过soap协议调用webService，读取数据库的数据；由dojo提供的树控件方法生成树。加载页面时，只读取、生成第一、二层的树结点；当用户第一次展开某结点时，再次从服务端读取该结点的子结点，由于使用了AJAX技术，每次访问服务端时，不再需要刷新网页，使得页面仍然会保持很好的稳定性。

Javascript代码

1. <script>   
2.            dojo.require("dojo.data.ItemFileWriteStore");   
3.            dojo.require("dijit.Tree");   
4.            dojo.require("dojo.parser");   
5. </script>   
6.            
7. <script type="text/javascript" src="../js/soapclient.js"></script>//包括soap访问webService的方法，网上就可以下得到   
8. <script type="text/javascript" >   
9. var pagenumber=0;   
10. var pagesize=0;   
11. var orderBy='0';   
12. var treesDate ={ label:'name',identifier:'eId',items:data};   
13. var popStore = new dojo.data.ItemFileWriteStore({data: treesDate});   
14. var myModel = new dijit.tree.ForestStoreModel({   
15.       store: popStore,   
16.       rootId: "0",   
17.       rootLabel: "分类",   
18.       childrenAttrs: ["children"]   
19.      });           
20. var _tree=dijit.byId("tree");    
21. /*  
22. 读取webService数据方法  
23. codeID:父结点id,  
24. chitem：父结点item,  
25. layerInt: 标记展开的层数  
26. layerSum: 总共要读取的层数  
27. */          
28. function getTreeNodes(codeID,chitem,layerInt,layerSum){   
29.             var pl = new SOAPClientParameters();   
30.              pl.add('codeID',codeID) ;   
31.              pl.add('pageNumber',0) ;   
32.              pl.add('pageSize',0) ;   
33.              pl.add('orderBy',0) ;   
34.              SOAPClient.invoke(url, "getCodeByParCodeID", pl, false,  function GetEnu_callBack(ul, soapResponse){   
35.                var pInfo = {   
36.                         parent: chitem,     
37.                         attribute: "children"    
38.                      };   
39.                if(ul!=null && ul.length>0 ){   
40.                      for(var i = 0; i < ul.length; i++){     
41.                                   var ulo=ul[i];   
42.                                   var newitem=popStore.newItem({name: ulo["ns:name"],type:ulo["ns:parCode"] ,eId:ulo["ns:id"],haveChild:"0"}, pInfo);//haveChild=0:初始，1:有子结点，2:无子结点   
43.                                   if(layerInt<layerSum)getTreeNodes(ulo["ns:id"],newitem,layerInt+1,layerSum);   
44.                                      
45.                              }   
46.                       if(chitem!=null){   
47.                             popStore.setValue(chitem,"haveChild","1");    
48.                             var node = dijit.byId("tree")._itemNodeMap[chitem.eId];   
49.                             node._updateItemClasses(node.item);   
50.                       }   
51.                 }else{   
52.                     popStore.setValue(chitem,"haveChild","2");     
53.                 }          
54.           });   
55.            
56.         }   
57.            
58. /*  
59. 展开指定结点、指定层的树节点方法  
60. tree：展开的树  
61. treeNode：展开的树结点node  
62. layerInt: 标记展开的层数  
63. layerSum: 展开指定结点下几层  
64. */  
65. function expandAllChildrenNode(tree,treeNode,layerInt,layerSum){   
66.           tree._expandNode(treeNode);   
67.           var childrenArray=treeNode.getChildren();   
68.           for (var i=0; i<childrenArray.length; i++){   
69.              if(layerInt<layerSum) expandAllChildrenNode(tree,childrenArray[i],layerInt+1,layerSum);   
70.              //if(layerInt==layerSum&&tree.model.mayHaveChildren(childrenArray[i].item))childrenArray[i].   
71.              if(layerInt==layerSum)childrenArray[i]._updateItemClasses(childrenArray[i].item);   
72.           }   
73.         }                 
74.            
75.       
76.       
77. function init(){   
78.         getTreeNodes(0,null,0,2);//打开页面时读取、加载两层树结点   
79.       expandAllChildrenNode(_tree,_tree.rootNode,0,1);//默认展开只一层，加载第二层结点的目的主要是为了获得第一层结点是否可展开的信息   
80. /*  
81. 当用户展开结点时加载该结点的子结点的子结点  
82. */         
83.    dojo.connect(dijit.byId("tree"), "_onExpandoClick", function(message){   
84.                        var node = message.node;   
85.                        var ch2node=node.getChildren();   
86.                        for (var i=0; i<ch2node.length; i++){    
87.                          if(ch2node[i].getChildren().length==0&&ch2node[i].item.haveChild=="0"){   
88.                           var ch2item =ch2node[i].item;   
89.                           getTreeNodes(ch2item.eId,ch2item,0,1);   
90.                         }   
91.                       }   
92.              });      
93. }//END INIT   
94.                
95.  dojo.addOnLoad(init);   
96. </head>   
97. <body class="tundra">   
98. <div id="tree" showRoot="true" persist="false" dojoType="dijit.Tree"  store="popStore" labelAttr="name"  childrenAttr="children"  model="myModel" ></div>    
99. </body></html>  

转载于:https://www.cnblogs.com/mylem/archive/2009/11/15/1603248.html