Jquery EasyUI Combotree只能選擇葉子節點且葉子節點有多選框

Jquery EasyUI Combotree只能選擇葉子節點且葉子節點有多選框

Jquery EasyUI Combotree單選框，Jquery EasyUI Combotree只能選擇葉子節點

EasyUI Combotree葉子節點增加單選框

 

 

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

©Copyright 蕃薯耀 2018年4月28日

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

 

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

 

一、方式一，最簡單（只能單選葉子節點，葉子節點前面無多選框）

$("xxxId").combotree({
    data : [{……},{……},{……}],//數據省略
    required: false,
    onBeforeSelect : function(node){
        if(!$(this).tree("isLeaf", node.target)){//如果不是葉子節點，不讓選擇
            return false;
        }
    }
});

 

 二、方式二：控制只能選一項，選中某一項后后面不能再勾選（體驗比較生硬）

$("xxxId").combotree({
    multiple : true,//設置可以多選，顯示多選框，不設置不會出現多選框
    data : [{……},{……},{……}],//數據省略
    required: false,
    checkbox : true,//顯示多選框
    onlyLeafCheck : true,//只在葉子節點顯示多選框
    onBeforeSelect : function(node){
        if(!$(this).tree("isLeaf", node.target)){//如果不是葉子節點，不讓選擇
            return false;
        }
    },
    onBeforeCheck : function(node, checked){//控制只能選一項
        if(checked){//當前為選中操作
            var nodes = $(this).tree("getChecked");
            //控制只能選一項，選中某一項后后面不能再勾選
            if(nodes.length == 0){
                return true;
            }else{
                return false;
            }
        }else{//當前為取消選中操作
            return true;
        }
    }
});

 

 三、方式三：隨意選擇任意一項，但只能選一項（完美版）

$("xxxId").combotree({
    multiple : true,//設置可以多選，顯示多選框，不設置不會出現多選框
    data : [{……},{……},{……}],//數據省略
    required: false,
    checkbox : true,//顯示多選框
    onlyLeafCheck : true,//只在葉子節點顯示多選框
    onBeforeSelect : function(node){
        $(this).tree("check", node.target);//控制點擊文字時也能勾選
        return false;//避免不是選擇勾選框而是點擊文字出現黃色的選中條紋
    },
    onBeforeCheck : function(node, checked){//控制只能選一項
        if(checked){//當前為選中操作
            var nodes = $(this).tree("getChecked");
            //控制只能選一項，選中某一項后后面不能再勾選
            if(nodes.length > 0){
                for(var i=0; i<nodes.length; i++){
                    $(this).tree("uncheck", nodes[i].target);//清除之前選中的項
                }
            }
        }
    }
});

 

 

 方法三中：onBeforeSelect方法返回false，避免第一次點擊文字選中后，再重新打開選擇，不點擊文字，直接勾選多選框，第一次點擊的文字有黃色背景的情況，如下：

 

 

 

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

©Copyright 蕃薯耀 2018年4月28日

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