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

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

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

EasyUI Combotree叶子节点增加单选框

 

 

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

©Copyright 蕃薯耀 2018年4月28日

http://fanshuyao.iteye.com/

 

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

 

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

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

 

 方式四：复杂类型，EasyUI Combotree展开所有父节点和显示完整路径（2018-05-11追加）

1、根据叶子节点的值展开所有父节点

2、combotree文本显示为树的完整路径（如：衣服 > 上衣 > 皮衣），从父到子

$("#cmm_code_id").combotree({
	multiple: true,
	required : true,
	checkbox : true,
	onlyLeafCheck : true,//只能叶子节点才能勾选
	url : xxx/xxx.action",
	onBeforeSelect : function(node){
		$(this).tree("check", node.target);//控制点击文字时也能勾选
		return false;
	},
	onClick : function(node){//控制点击文字时，显示全路径
		$("#cmm_code_id").combotree("setText", getCombotreePathNames("cmm_code_id", node.id));
	},
	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);
				}
			}
		}
	},
	onCheck : function(node, checked){
		if(checked){
			$("#cmm_code_id").combotree("setText", getCombotreePathNames("cmm_code_id", node.id));
		}
	},
	onLoadSuccess : function(node, data){
		var cmm_code_id_value = "${buildingNaming.cmm_code_id}";
		if(cmm_code_id_value != null && $.trim(cmm_code_id_value) != ""){
			var combotreeId = "cmm_code_id";
			combotreeInitValueAndExpand(combotreeId, cmm_code_id_value);
			$("#"+combotreeId).combotree("setText", getCombotreePathNames(combotreeId, cmm_code_id_value));
		}
	}
});

 

/**
 * 根据叶子节点展开所有父节点
 * @param treeObj 树对象，（combotree的树对象获取：var treeObj = comboObj.combotree("tree");）
 * @param node 叶子节点
 */
function expandParent(treeObj, node){
	var parentNode = treeObj.tree("getParent", node.target);
	if(parentNode != null && parentNode != "undefined"){
		treeObj.tree("expand", parentNode.target);
		expandParent(treeObj, parentNode);
	}
};

/**
 * tree初始化赋值并展开所有父节点
 * @param treeObj 树对象
 * @param leafValue 叶子节点的值
 */
function treeInitValueAndExpand(treeObj, leafValue){
	var nodesChecked = treeObj.tree("getChecked");//获取选中的值
	if(nodesChecked.length > 0){
		for(var i=0; i<nodesChecked.length; i++){
			expandParent(treeObj, nodesChecked[i]);
		}
	}
};

/**
 * 根据叶子节点选中的值，获取树整个路径的名称
 * @param treeObj 树对象，（combotree的树对象获取：var treeObj = comboObj.combotree("tree");）
 * @param node 叶子节点
 */
function getTreePathNames(treeObj, node){
	var pathName = node.text;
	var parentNode = treeObj.tree("getParent", node.target);
	if(parentNode != null && parentNode != "undefined"){
		pathName = getTreePathNames(treeObj, parentNode) + " > " + pathName;
	}
	return pathName;
};

/**
 * 根据叶子节点选中的值，获取树整个路径的名称
 * @param combotreeId 唯一ID
 * @param leafValue 叶子节点的值
 */
function getCombotreePathNames(combotreeId, leafValue){
	var combotreeObj = $("#"+combotreeId);
	var treeObj = combotreeObj.combotree("tree");
	var nodesChecked = treeObj.tree("getChecked");//获取选中的值
	var pathName = "";
	if(nodesChecked.length > 0){
		for(var i=0; i<nodesChecked.length; i++){
			pathName += getTreePathNames(treeObj, nodesChecked[i]);
		}
	}
	return pathName;
};



/**
 * combotree初始化赋值并展开所有父节点
 * @param combotreeId 唯一ID
 * @param leafValue 叶子节点的值
 */
function combotreeInitValueAndExpand(combotreeId, leafValue){
	var combotreeObj = $("#"+combotreeId);
	var treeObj = combotreeObj.combotree("tree");
	combotreeObj.combotree("setValue", leafValue);//赋值
	treeInitValueAndExpand(treeObj, leafValue);
};

 

效果如下：

1、默认显示完整路径

 

2、默认根据叶子节点的值赋值，并从该子结点逐层向上展开所有父结点

 

（如果你觉得文章对你有帮助，欢迎捐赠，^_^，谢谢！） 

    

 

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

©Copyright 蕃薯耀 2018年4月28日

http://fanshuyao.iteye.com/

 

 

 

 

 

评论

1 楼 蕃薯耀 2018-04-28  

Jquery EasyUI Combotree只能选择叶子节点且叶子节点有多选框
Jquery EasyUI Combotree单选框，Jquery EasyUI Combotree只能选择叶子节点
EasyUI Combotree叶子节点增加单选框


=============
蕃薯耀