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

Posted 2020-11-01 蕃薯耀

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

Jquery EasyUI Combotree单选框，Jquery EasyUI Combotree只能选择叶子节点

EasyUI Combotree叶子节点增加单选框

 

 

================================

©Copyright 蕃薯耀 2018年4月28日

http://www.cnblogs.com/fanshuyao/

 

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

 

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

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<nodes.length; i++){  
17.                     $(this).tree("uncheck", nodes[i].target);//清除之前选中的项  
18.                 }  
19.             }  
20.         }  
21.     }  
22. });  

 

 

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

 

 

 

================================

©Copyright 蕃薯耀 2018年4月28日

http://www.cnblogs.com/fanshuyao/