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/