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

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

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

©Copyright 蕃薯耀 2018年4月28日

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

上一篇:【原】无脑操作:IDEA + maven + Shiro + SpringBoot + JPA + Thymeleaf实现基础授权权限


下一篇:【原】无脑操作:ElasticSearch学习笔记(01)