Ext带复选框的树，属性可配置

1.  var textField_khz=new Ext.form.TextField({ 
2.                     fieldLabel: '窗口测试',
3.                     emptyText:'点击弹出',                    
4.                     readOnly :true,
5.                     //allowBlank:false,
6.                     name: 'o_khzdh', 
7.                     id: 'o_khzdh_text', 
8.                     allowBlank:false,
9.                     anchor:'90%'
10.                 });        
11.         textField_khz.on("focus",function(){                
12.         parent.creatCarWithOrgTreePanel({   
13.             //rootOrg:1,        
14.             treedepth:3,
15.             callbackFunction:callbackNodeFunction,
16.             selectType:'111',
17.             viewUserGroup:true,
18.             viewCarGroup:true,
19.             oneCheckModel:false             
20.          });            
21.         }); 
22.         function callbackNodeFunction(nodeArr){
23.             //alert(nodeArr.length);
24.             Ext.getCmp("o_khzdh_text").setValue(nodeArr[0].text)
25.         }   

1. /**
2.  * config:参数配置
3.  * rootOrg:int 
4.  * 根节点开始机构代号 比如 1，根节点从1开始，如果为空的化从session中得到。
5.  * treedepth:int
6.  * 机构树的深度 为1的化就显示当前机构，不显示下一级机构，为0的化显示所有的机构
7.  * oneCheckModel:Boolean  
8.  * 单选模式：true的时候只选一个，默认多选模式。
9.  * viewUserGroup:Boolean  
10.  * 显示用户客户组，默认不显示。
11.  * viewCarGroup:Boolean  
12.  * 显示车队用户组，默认不显示。
13.  * selectType：模式：‘机构客户车队’，‘000’
14.  * 选择的时候只选择客户组或者之选择车队或者机构。
15.  * 如：只选机构‘100’，只选客户‘010’ ，只选车队‘001’，全选‘111’ 客户和车队‘011’,默认‘111’,
16.  * 但是这里和机构树不同的是，部队机构类型做出判断，点击机构的时候选中机构和机构下面的客户组或者车队，不选择机构下面的机构
17.  * callbackFunction 回调函数 用于向外传递值 
18.  */
19.  var carWithOrgTreePanel;
20. function creatCarWithOrgTreePanel(config){
21.     if(!config.rootOrg)config.rootOrg=0;
22.     if(!config.treedepth)config.treedepth=0;
23.     if(!config.oneCheckModel)config.oneCheckModel=false;
24.     if(!config.viewUserGroup)config.viewUserGroup=false;
25.     if(!config.viewCarGroup)config.viewCarGroup=false;  
26.     if(!config.selectType)config.selectType='111';
27.         
28.     var Tree = Ext.tree;
29.     var orghasloadNodeHashTable=new Hashtable();
30.     var userhasloadNodeHashTable=new Hashtable();
31.     var carhasloadNodeHashTable=new Hashtable();
32.     var tree = new Tree.TreePanel({ 
33.          autoScroll:true,   
34.          region: 'center', 
35.          height:'100%',
36.          animate:false,
37.          border :false
38.           });
39.     var root;       
40.     //如果输入了机构代号，那么直接指定根节点
41.     if(config.rootOrg!=0){
42.         publicInterfaceManage.getOrgMsgNOde(config.rootOrg,function(value){         
43.             if(value!=null){                
44.                     root = new Tree.TreeNode({ 
45.                     id:value.n_jgdh,     
46.                     expanded:true,  
47.                     checked:false, 
48.                     attributes:[isDept=true,isKHZ=false,isCD=false],    
49.                     text: value.c_jgmc,  
50.                     icon:"../../../theme/default/images/tree/icondept.gif" 
51.                         }); 
52.                         //当选择了显示机构的时候或者树的深度选了1的时候，这里显示本机构和本机构下一级机构
53.                         if(config.treedepth!=1){
54.                             publicInterfaceManage.getJgxxList(value.n_jgdh,function(va){                                                
55.                             for(var i=0;i<va.length;i=i+1){ 
56.                                     apendOrgNodeWithCheckBox(root,va[i]);                                               
57.                                 }
58.                             });
59.                             }                           
60.                 
61.                 //hashtable中添加root节点
62.                 if(!orghasloadNodeHashTable.contains(root.id)){                     
63.                     orghasloadNodeHashTable.add(root.id,root); 
64.                 }    
65.                 initAllKhz(root.id);                    
66.                 tree.setRootNode(root);             
67.                 _init();            
68.                 }
69.         });
70.     }
71.     else{       
72.         //将当前的机构设置为树的根节点
73.         publicInterfaceManage.getTreeRootNode(function(value){
74.             if(value!=null){                
75.                     root = new Tree.TreeNode({ 
76.                     id:value.n_jgdh,     
77.                     expanded:true,  
78.                     checked:false, 
79.                     attributes:[isDept=true,isKHZ=false,isCD=false],    
80.                     text: value.c_jgmc,  
81.                     icon:"../../../theme/default/images/tree/icondept.gif" 
82.                         }); 
83.                         //当选择了显示机构的时候或者树的深度选了1的时候，这里显示本机构和本机构下一级机构                      
84.                         if(config.treedepth!=1){
85.                             publicInterfaceManage.getJgxxList(value.n_jgdh,function(va2){                               
86.                             for(var i=0;i<va2.length;i=i+1){ 
87.                                 apendOrgNodeWithCheckBox(root,va2[i]);                                              
88.                                 }
89.                             });
90.                         }
91.                     //hashtable中添加root节点
92.                     if(!orghasloadNodeHashTable.contains(root.id)){                     
93.                         orghasloadNodeHashTable.add(root.id,root); 
94.                      }     
95.                 initAllKhz(root.id);                            
96.                 tree.setRootNode(root);
97.                 _init();
98.                 }
99.         });
100.     }
101.     function _init(){                    
102.         tree.on("dblclick",apendNodeAfterClick);
103.         tree.on('checkchange', function(node, checked) {            
104.             checkChangeAction(node, checked);
105.         });
106.         carWithOrgTreePanel=new Ext.Window({
107.                     title: '单位选择',
108.                     layout: 'border',
109.                     closable:true,
110.                     width:300,
111.                     height:400,
112.                     border:false,
113.                     plain:true,
114.                     closeAction:'close',
115.                     items: [ tree ]
116.                 });
117.         carWithOrgTreePanel.show();
118.     }
119.         
120. //___________________________________一些函数
122. //添加一个带复选框的机构节点
123.     function apendOrgNodeWithCheckBox(node,Val_Org){    
124.         if(!orghasloadNodeHashTable.contains(Val_Org.n_jgdh)){              
125.             var newnode = new Tree.TreeNode({ 
126.                 id:Val_Org.n_jgdh,   
127.                 expanded:true,
128.                 checked:false, 
129.                 attributes:[isDept=true,isKHZ=false,isCD=false], 
130.                 text:Val_Org.c_jgmc,  
131.                 icon:"../../../theme/default/images/tree/icondept.gif" 
132.                 });
133.             node.appendChild(newnode);  
134.             orghasloadNodeHashTable.add(newnode.id,newnode); 
135.             }
136.     }
137.     //添加一个带复选框的客户节点
138.     function apendUserNodeWithCheckBox(node,Val_khz){   
139.         if(!userhasloadNodeHashTable.contains(Val_khz.n_khzdh)){
140.             var newnode=new Tree.TreeNode({
141.                 id:Val_khz.n_khzdh,
142.                 expanded:true,
143.                 checked:false, 
144.                 attributes:[isDept=false,isKHZ=true,isCD=false], 
145.                 text:Val_khz.c_khzxm,
146.                 icon:"../../../theme/default/images/tree/kehu.gif"
147.                 });
148.             node.appendChild(newnode);
149.             userhasloadNodeHashTable.add(newnode.id,newnode);
150.         }
151.     }
152.     //添加一个带复选框的车队节点
153.     function apendCarNodeWithCheckBox(node,Val_khz){        
154.         if(!carhasloadNodeHashTable.contains(Val_khz.n_khzdh)){
155.             var newnode=new Tree.TreeNode({
156.                 id:Val_khz.n_khzdh,
157.                 expanded:true,
158.                 checked:false, 
159.                 attributes:[isDept=false,isKHZ=false,isCD=true], 
160.                 text:Val_khz.c_khzxm,
161.                 icon:"../../../theme/default/images/tree/chedui.gif"
162.                 });
163.             node.appendChild(newnode);
164.             carhasloadNodeHashTable.add(newnode.id,newnode);
165.             }
166.     }   
167.     
168.     //树节点点击拓展事件
169.     function apendNodeAfterClick(node){ 
170.         node.getUI().checkbox.checked=false;
171.         if(node.attributes.attributes[0]) initAllKhz(node.id);      
172.     }   
173.     function checkChangeAction(node, checked){
174.         //当节点处于被选中状态的时候
175.         if(node.getUI().checkbox.checked==true){
176.             //单选模式的时候
177.             if(config.oneCheckModel){
178.                 clearChildNodeChecked(root);
179.                 root.getUI().checkbox.checked=false;
180.                 //当只选择机构且节点类型为机构的时候
181.                 if(config.selectType.substring(0,1)==1&&node.attributes.attributes[0]){
182.                     node.getUI().checkbox.checked=true;
183.                     return;
184.                 }
185.                 //当只选择机构且节点类型为客户的时候
186.                 if(config.selectType.substring(1,2)==1&&node.attributes.attributes[1]){
187.                     node.getUI().checkbox.checked=true;
188.                     return;
189.                 }
190.                 //当只选择机构且节点类型为车队的时候
191.                 if(config.selectType.substring(2,3)==1&&node.attributes.attributes[2]){
192.                     node.getUI().checkbox.checked=true;
193.                     return;
194.                 }
195.             }
196.             //当为多选模式的时候
197.             else{
198.                 //当节点类型为机构的时候
199.                 if(node.attributes.attributes[0]){
200.                     node.getUI().checkbox.checked=true;         
201.                     //选中子节点
202.                     makeChildNodesChecked(node);
203.                     makeChildNodesOrgUnchecked(node);   
204.                 }
205.                 //当节点类型为客户的时候
206.                 if(node.attributes.attributes[1]){
207.                     //当客户为可选类型的时候，选中此节点，否则不予选中
208.                     if(config.selectType.substring(1,2)==1) node.getUI().checkbox.checked=true;
209.                     else    node.getUI().checkbox.checked=false;
210.                 }
211.                 //当节点类型为车队的时候
212.                 if(node.attributes.attributes[2]){
213.                     //当车队为可选类型的时候，选中此节点，否则不予选中
214.                     if(config.selectType.substring(2,3)==1) node.getUI().checkbox.checked=true;
215.                     else    node.getUI().checkbox.checked=false;
216.                 }
217.                 //选中子节点
218.                 makeChildNodesChecked(node);
219.                 makeChildNodesOrgUnchecked(node);   
220.                 //当一个节点下面所有的字节点（不包含机构节点）都被选中的时候，自动选中根节点
221.                 getChildNumWithoutOrg(getParentOrgNode(node));
222.             }
223.         }
224.         //当节点被取消选中的时候
225.         else{
226.             node.getUI().checkbox.checked=false;
227.             clearChildNodeChecked(node);
228.             //当这个节点不是机构的时候，也取消机构节点的勾选状态
229.             if(!node.attributes.attributes[0]){
230.                 var parentOrgNode=getParentOrgNode(node);               
231.                 parentOrgNode.getUI().checkbox.checked=false;
232.             }
233.             getChildNumWithoutOrg(getParentOrgNode(node));
234.         }
235.     }
236.     //得到一个节点下面所有字节点（不包含子节点为机构的节点的字节点）的个数,传入参数为该节点的上级机构节点
237.     function getChildNumWithoutOrg(orgNode){
238.         var nowNum=0;   
239.         var allNum=0;
240.         for(var x in userhasloadNodeHashTable._hash){
241.             //得到子节点的上级机构节点
242.             var _parentorgnode=getParentOrgNode(userhasloadNodeHashTable._hash[x]);
243.             //当当前遍历的子节点的机构节点为传入的机构节点的话
244.             if(_parentorgnode==orgNode){
245.                 allNum++;
246.                 if(userhasloadNodeHashTable._hash[x].getUI().checkbox.checked==true)nowNum++; 
247.             }           
248.         }
249.         for(var x in carhasloadNodeHashTable._hash){
250.             //得到子节点的上级机构节点
251.             var _parentorgnode=getParentOrgNode(carhasloadNodeHashTable._hash[x]);
252.             //当当前遍历的子节点的机构节点为传入的机构节点的话
253.             if(_parentorgnode==orgNode){
254.                 allNum++;
255.                 if(carhasloadNodeHashTable._hash[x].getUI().checkbox.checked==true)nowNum++; 
256.             }           
257.         }       
258.         if(nowNum==allNum) orgNode.getUI().checkbox.checked=true;       
259.     }
260.     //清空一个节点下面的所有复选框
261.     function clearChildNodeChecked(node){
262.         if(node.childNodes.length!=0){
263.             for(var i=0;i<node.childNodes.length;i++){
264.                 node.childNodes[i].getUI().checkbox.checked=false;
265.                 clearChildNodeChecked(node.childNodes[i]);
266.             }
267.         }       
268.     }
269.     //取消节点下面的字节点为机构的节点的字节点的选中状态
270.     function makeChildNodesOrgUnchecked(node){
271.         for(var i=0;i<node.childNodes.length;i++){
272.             if(node.childNodes[i].attributes.attributes[0]){
273.                 clearChildNodeChecked(node.childNodes[i]);
274.             }
275.         }
276.     }
277.     //根据条件选中所有子节点
278.     function makeChildNodesChecked(node){
279.         for(var i=0;i<node.childNodes.length;i++){
280.             //当子节点为机构的时候直接不选中
281.             if(node.childNodes[i].attributes.attributes[0]){
282.                 node.childNodes[i].getUI().checkbox.checked=false;
283.             }
284.             //当子节点为客户并且可以选择客户的时候，客户也被选中
285.             if(config.selectType.substring(1,2)==1&&node.childNodes[i].attributes.attributes[1]){
286.                 node.childNodes[i].getUI().checkbox.checked=true;
287.             }
288.             //当子节点为车队并且可以选择车队的时候，车队也被选中
289.             if(config.selectType.substring(2,3)==1&&node.childNodes[i].attributes.attributes[2]){
290.                 node.childNodes[i].getUI().checkbox.checked=true;
291.             }
292.             makeChildNodesChecked(node.childNodes[i]);
293.         }           
294.     }
295.     //得到所有被选中的节点
296.     function ObjForReturnInButton(){
297.         var returnArr=new Array();      
298.             for(var x in orghasloadNodeHashTable._hash)
299.              {          
300.                 if(orghasloadNodeHashTable._hash[x].getUI().checkbox.checked==true)                 
301.                     returnArr.push(orghasloadNodeHashTable._hash[x]);
302.              }
303.              for(var x in userhasloadNodeHashTable._hash)
304.              {
305.                 if(userhasloadNodeHashTable._hash[x].getUI().checkbox.checked==true) 
306.                     returnArr.push(userhasloadNodeHashTable._hash[x]);
307.              }
308.              for(var x in carhasloadNodeHashTable._hash)
309.              {
310.                 if(carhasloadNodeHashTable._hash[x].getUI().checkbox.checked==true) 
311.                     returnArr.push(carhasloadNodeHashTable._hash[x]);
312.              }      
313.         return returnArr;
314.     }
315.     //得到上级节点为机构的节点id
316.     var _parentOrgNode;
317.     function getParentOrgNode(node){
318.         if(node==root) return root;
319.         //当上级节点就为机构的时候      
320.         if(!node.parentNode.attributes.attributes[0]) {
321.             getParentOrgNode(node.parentNode);
322.         }
323.         else {
324.             _parentOrgNode=node.parentNode;
325.         }
326.         return _parentOrgNode;
327.     }   
328.     //在初始化根节点下面的所有的车队和客户，但是部队根节点下面的机构进行拓展
329.     function getOrgAllNode(jgdh){       
330.         publicInterfaceManage.getAllGroupByOrgCode(jgdh,function(value){
331.             //上级客户组的遍历，首先得到上级客户组代号最小的，这里0为机构下面直属客户组，然后逐渐增大。
332.             var groupCodeArray=new Array();
333.             for(var i=0;i<value.length;i++){
334.                 var boo=true;
335.                 for(j=0;j<groupCodeArray.length;j++){
336.                     if(groupCodeArray[i]==value[i])boo=false;
337.                 }
338.                 if(boo)groupCodeArray.push(value[i]);
339.             }
340.             groupCodeArray.sort();//默认升序排列
341.             var maxSuperiorsCustomerGroupCode=0;
342.             for(var i=0;i<value.length;i++){
343.                 for(var j=0;j<groupCodeArray;j++){
344.                     if(value[i].n_sjkhzdh==groupCodeArray[j]){
345.                         if(groupCodeArray[j]==0){
346.                             var orgNode=orghasloadNodeHashTable.items(jgdh);
347.                             //当需要显示客户，并且客户组类型为客户的时候                             
348.                             if(config.viewUserGroup==true&&value[i].n_khzlx==1){
349.                                  apendUserNodeWithCheckBox(orgNode,value[i]);                                       
350.                             }
351.                             //当需要显示车队，并且客户组类型为车队的时候
352.                             if(config.viewCarGroup==true&&value[i].n_khzlx==2){
353.                                 apendCarNodeWithCheckBox(orgNode,value[i]);
354.                             }
355.                         }
356.                         else{
357.                             if(config.viewUserGroup==true&&value[i].n_khzlx==1){
358.                                 var khzNode=userhasloadNodeHashTable.items(value[i].n_sjkhzdh);
359.                                  apendUserNodeWithCheckBox(khzNode,value[i]);                                       
360.                             }
361.                             //当需要显示车队，并且客户组类型为车队的时候
362.                             if(config.viewCarGroup==true&&value[i].n_khzlx==2){
363.                                 var khzNode=userhasloadNodeHashTable.items(value[i].n_sjkhzdh);
364.                                 apendCarNodeWithCheckBox(khzNode,value[i]);
365.                             }
366.                         }
367.                     }
368.                     
369.                 }
370.             }
371.         });
372.     }
373.     //根据机构代号初始化机构下面的所有客户组
374.     function initAllKhz(n_jgdh){    
375.         publicInterfaceManage.getAllGroupByOrgCode(n_jgdh,function(calBackValue){
376.             /**
377.              * key为上级节点代号,
378.              * value=obejct 
379.              * value.isDept=boolean,value.isKHZ=boolean
380.              * value.valArr=array();
381.              */         
382.             var superiorsHashtable=new Hashtable();
383.                 for(i=0;i<calBackValue.length;i++){
384.                     if(superiorsHashtable.contains(calBackValue[i].n_sjkhzdh)){
385.                             superiorsHashtable.items(calBackValue[i].n_sjkhzdh).valArr.push(calBackValue[i]);
386.                         }
387.                         var key=calBackValue[i].n_sjkhzdh;
388.                         var value=new Object();
389.                     if(calBackValue[i].n_sjkhzdh==0){
390.                         
391.                         value.isDept=true;
392.                         value.isKHZ=false;                                          
393.                     }   
394.                     else{                   
395.                         value.isDept=false;
396.                         value.isKHZ=true;                   
397.                     }   
398.                     var arr=new Array();
399.                         arr.push(calBackValue[i]);
400.                         value.valArr=arr;
401.                         superiorsHashtable.add(key,value);          
402.                 }
403.             //将得到的Hashtable添加到树中。                   
404.                 var sortedHashtable=sortHashTable(superiorsHashtable);              
405.                 for(var i=0;i<sortedHashtable.length;i++){
406.                     var superiorsIsOrg=superiorsHashtable.items(sortedHashtable[i]);
407.                         if(sortedHashtable[i]==0){
408.                                 for(var j=0;j<superiorsIsOrg.valArr.length;j++){
409.                                     var orgNode=orghasloadNodeHashTable.items(n_jgdh);
410.                                     //当需要显示客户，并且客户组类型为客户的时候                             
411.                                     if(config.viewUserGroup==true&&superiorsIsOrg.valArr[j].n_khzlx==1){
412.                                         apendUserNodeWithCheckBox(orgNode,superiorsIsOrg.valArr[j]);                                        
413.                                     }
414.                                     //当需要显示车队，并且客户组类型为车队的时候
415.                                     if(config.viewCarGroup==true&&superiorsIsOrg.valArr[j].n_khzlx==2){
416.                                         apendCarNodeWithCheckBox(orgNode,superiorsIsOrg.valArr[j]);
417.                                     }
418.                                 }
419.                         }               
420.                         else{                           
421.                             for(var j=0;j<superiorsIsOrg.valArr.length;j++){
422.                                 //当上级节点不为空的时候
423.                                 var cuParentNode=new Array();
424.                                 cuParentNode=getParentNode(sortedHashtable[i]);                             
425.                                 if(cuParentNode){
426.                                     //当需要显示客户，并且客户组类型为客户的时候                             
427.                                     if(config.viewUserGroup==true&&superiorsIsOrg.valArr[j].n_khzlx==1){
428.                                         apendUserNodeWithCheckBox(cuParentNode,superiorsIsOrg.valArr[j]);                                       
429.                                     }
430.                                     //当需要显示车队，并且客户组类型为车队的时候
431.                                     if(config.viewCarGroup==true&&superiorsIsOrg.valArr[j].n_khzlx==2){
432.                                         apendCarNodeWithCheckBox(cuParentNode,superiorsIsOrg.valArr[j]);
433.                                     }
434.                                 }
435.                             }
436.                         }                   
437.                 }
438.         })
439.     }
440.     //对hashtable中的key值进行排序
441.     function sortHashTable(hashtable){
442.         var sortedArr=new Array();
443.           for(var key in hashtable._hash){
444.             sortedArr.push(key);
445.           }
446.           return sortedArr.sort();
447.     }
448.     //根据节点Id得到上一级的节点
449.     function getParentNode(key){    
450.         var returnObj;  
451.         if(userhasloadNodeHashTable.items(key)) {       
452.             returnObj=userhasloadNodeHashTable.items(key);
453.         } 
454.         if(carhasloadNodeHashTable.items(key)){     
455.             returnObj=carhasloadNodeHashTable.items(key);
456.         }  
457.         return returnObj;
458.     }
459. }

使用方法：