EasyUI Combotree展开所有父节点和显示完整路径

Jquery EasyUI Combotree只能选择叶子节点且叶子节点有多选框

Jquery EasyUI Combotree单选框，

Jquery EasyUI Combotree只能选择叶子节点

EasyUI Combotree叶子节点增加单选框

建议使用方式三（完美版）

 

一、方式一，最简单（只能单选叶子节点，叶子节点前面无多选框）

Js代码 

 

1. $("xxxId").combotree({  
2.     data : [{……},{……},{……}],//数据省略  
3.     required: false,  
4.     onBeforeSelect : function(node){  
5.         if(!$(this).tree("isLeaf", node.target)){//如果不是叶子节点，不让选择  
6.             return false;  
7.         }  
8.     }  
9. });  

 

 二、方式二：控制只能选一项，选中某一项后后面不能再勾选（体验比较生硬）

Js代码 

 

1. $("xxxId").combotree({  
2.     multiple : true,//设置可以多选，显示多选框，不设置不会出现多选框  
3.     data : [{……},{……},{……}],//数据省略  
4.     required: false,  
5.     checkbox : true,//显示多选框  
6.     onlyLeafCheck : true,//只在叶子节点显示多选框  
7.     onBeforeSelect : function(node){  
8.         if(!$(this).tree("isLeaf", node.target)){//如果不是叶子节点，不让选择  
9.             return false;  
10.         }  
11.     },  
12.     onBeforeCheck : function(node, checked){//控制只能选一项  
13.         if(checked){//当前为选中操作  
14.             var nodes = $(this).tree("getChecked");  
15.             //控制只能选一项，选中某一项后后面不能再勾选  
16.             if(nodes.length == 0){  
17.                 return true;  
18.             }else{  
19.                 return false;  
20.             }  
21.         }else{//当前为取消选中操作  
22.             return true;  
23.         }  
24.     }  
25. });  

 

 三、方式三：随意选择任意一项，但只能选一项（完美版）

Js代码 

 

1. $("xxxId").combotree({  
2.     multiple : true,//设置可以多选，显示多选框，不设置不会出现多选框  
3.     data : [{……},{……},{……}],//数据省略  
4.     required: false,  
5.     checkbox : true,//显示多选框  
6.     onlyLeafCheck : true,//只在叶子节点显示多选框  
7.     onBeforeSelect : function(node){  
8.         $(this).tree("check", node.target);//控制点击文字时也能勾选  
9.         return false;//避免不是选择勾选框而是点击文字出现黄色的选中条纹  
10.     },  
11.     onBeforeCheck : function(node, checked){//控制只能选一项  
12.         if(checked){//当前为选中操作  
13.             var nodes = $(this).tree("getChecked");  
14.             //控制只能选一项，选中某一项后后面不能再勾选  
15.             if(nodes.length > 0){  
16.                 for(var i=0; i
17.                     $(this).tree("uncheck", nodes[i].target);//清除之前选中的项  
18.                 }  
19.             }  
20.         }  
21.     }  
22. });  

 

 

 方法三中：onBeforeSelect方法返回false，避免第一次点击文字选中后，再重新打开选择，不点击文字，直接勾选多选框，第一次点击的文字有黄色背景的情况，如下：

 

 

方式四：复杂类型，EasyUI Combotree展开所有父节点和显示完整路径（2018-05-11追加）

1、根据叶子节点的值展开所有父节点

2、combotree文本显示为树的完整路径（如：衣服 > 上衣 > 皮衣），从父到子

Js代码 

 

1. $("#cmm_code_id").combotree({  
2.     multiple: true,  
3.     required : true,  
4.     checkbox : true,  
5.     onlyLeafCheck : true,//只能叶子节点才能勾选  
6.     url : xxx/xxx.action",  
7.     onBeforeSelect : function(node){  
8.         $(this).tree("check", node.target);//控制点击文字时也能勾选  
9.         return false;  
10.     },  
11.     onClick : function(node){//控制点击文字时，显示全路径  
12.         $("#cmm_code_id").combotree("setText", getCombotreePathNames("cmm_code_id", node.id));  
13.     },  
14.     onBeforeCheck : function(node, checked){  
15.         if(checked){//如果是勾选操作，则把之前选中的节点清除（不勾选）  
16.             var nodes = $(this).tree("getChecked");  
17.             if(nodes.length > 0){  
18.                 for(var i=0; i
19.                     $(this).tree("uncheck", nodes[i].target);  
20.                 }  
21.             }  
22.         }  
23.     },  
24.     onCheck : function(node, checked){  
25.         if(checked){  
26.             $("#cmm_code_id").combotree("setText", getCombotreePathNames("cmm_code_id", node.id));  
27.         }  
28.     },  
29.     onLoadSuccess : function(node, data){  
30.         var cmm_code_id_value = "${buildingNaming.cmm_code_id}";  
31.         if(cmm_code_id_value != null && $.trim(cmm_code_id_value) != ""){  
32.             var combotreeId = "cmm_code_id";  
33.             combotreeInitValueAndExpand(combotreeId, cmm_code_id_value);  
34.             $("#"+combotreeId).combotree("setText", getCombotreePathNames(combotreeId, cmm_code_id_value));  
35.         }  
36.     }  
37. });  

 

Js代码 

 

1. /** 
2.  * 根据叶子节点展开所有父节点 
3.  * @param treeObj 树对象，（combotree的树对象获取：var treeObj = comboObj.combotree("tree");） 
4.  * @param node 叶子节点 
5.  */  
6. function expandParent(treeObj, node){  
7.     var parentNode = treeObj.tree("getParent", node.target);  
8.     if(parentNode != null && parentNode != "undefined"){  
9.         treeObj.tree("expand", parentNode.target);  
10.         expandParent(treeObj, parentNode);  
11.     }  
12. };  
13.   
14. /** 
15.  * tree初始化赋值并展开所有父节点 
16.  * @param treeObj 树对象 
17.  * @param leafValue 叶子节点的值 
18.  */  
19. function treeInitValueAndExpand(treeObj, leafValue){  
20.     var nodesChecked = treeObj.tree("getChecked");//获取选中的值  
21.     if(nodesChecked.length > 0){  
22.         for(var i=0; i
23.             expandParent(treeObj, nodesChecked[i]);  
24.         }  
25.     }  
26. };  
27.   
28. /** 
29.  * 根据叶子节点选中的值，获取树整个路径的名称 
30.  * @param treeObj 树对象，（combotree的树对象获取：var treeObj = comboObj.combotree("tree");） 
31.  * @param node 叶子节点 
32.  */  
33. function getTreePathNames(treeObj, node){  
34.     var pathName = node.text;  
35.     var parentNode = treeObj.tree("getParent", node.target);  
36.     if(parentNode != null && parentNode != "undefined"){  
37.         pathName = getTreePathNames(treeObj, parentNode) + " > " + pathName;  
38.     }  
39.     return pathName;  
40. };  
41.   
42. /** 
43.  * 根据叶子节点选中的值，获取树整个路径的名称 
44.  * @param combotreeId 唯一ID 
45.  * @param leafValue 叶子节点的值 
46.  */  
47. function getCombotreePathNames(combotreeId, leafValue){  
48.     var combotreeObj = $("#"+combotreeId);  
49.     var treeObj = combotreeObj.combotree("tree");  
50.     var nodesChecked = treeObj.tree("getChecked");//获取选中的值  
51.     var pathName = "";  
52.     if(nodesChecked.length > 0){  
53.         for(var i=0; i
54.             pathName += getTreePathNames(treeObj, nodesChecked[i]);  
55.         }  
56.     }  
57.     return pathName;  
58. };  
59.   
60.   
61.   
62. /** 
63.  * combotree初始化赋值并展开所有父节点 
64.  * @param combotreeId 唯一ID 
65.  * @param leafValue 叶子节点的值 
66.  */  
67. function combotreeInitValueAndExpand(combotreeId, leafValue){  
68.     var combotreeObj = $("#"+combotreeId);  
69.     var treeObj = combotreeObj.combotree("tree");  
70.     combotreeObj.combotree("setValue", leafValue);//赋值  
71.     treeInitValueAndExpand(treeObj, leafValue);  
72. };  

 

效果如下：

1、默认显示完整路径