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

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

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

EasyUI Combotree叶子节点增加单选框

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

©Copyright 蕃薯耀 2018年4月28日

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

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

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

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. });

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

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. });

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

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/