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

迈不过友情╰ 2021-12-17 08:53 320阅读 0赞

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

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

**EasyUI Combotree叶子节点增加单选框**

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

©Copyright 蕃薯耀 2018年4月28日

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

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

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

Js代码 ![收藏代码][icon_star.png]

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代码 ![收藏代码][icon_star.png]

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代码 ![收藏代码][icon_star.png]

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，避免第一次点击文字选中后，再重新打开选择，不点击文字，直接勾选多选框，第一次点击的文字有黄色背景的情况，如下：**

![1081330-20180428172129238-197698407.png][]

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

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

转载于:https://www.cnblogs.com/fanshuyao/p/8968908.html

[icon_star.png]: /images/20211217/84008787f1064d96beda944500582d92.png
[1081330-20180428172129238-197698407.png]: /images/20211217/76aeac873cc7412fb988a73a0b0bb276.png