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/
相关推荐
对于jquery-easyui的combotree 异步树,使用上其实并不会太复杂,但是要搞明白还是比较麻烦的,本代码基本上把异步树的生成和使用都做了示例,JSP部分基本上直接拿来用即可。同时增加了实例代码和修正了上一个上传的...
jQuery EasyUI 1 4版本更新内容: Bug(修复) menu:修复在删除一个菜单项的时候该菜单无法正确自适应高度的问题; datagrid:修复在datagrid宽度太小的时候“fitColumns”方法无法正常工作的问题 Improvement...
完整的jquery easyui tree 树形列表节点异步加载demo,比官方demo详细得多。是前后台交互的web应用。
对于jquery-easyui的combotree 异步树,使用上其实并不会太复杂,但是要搞明白还是比较麻烦的,本代码基本上把异步树的生成和使用都做了示例,基本上直接拿来用即可。同时大幅增加和修正了上一个上传的同类文件中的...
treegrid:新增复选框的选择; treegrid:新增“getCheckedNodes”、“checkNode”和“uncheckNode”方法; form:新增“iframe”属性;(官方未提及) form:新增“onProgress”事件;(官方未提及) form:新增...
(题外话:从本次开始 我新增了jQuery EasyUI的专题...filebox:filebox 该组件表单元素中用于上传文件的文件框工具组件 ">(题外话:从本次开始 我新增了jQuery EasyUI的专题页面 大家可以关注我的专题页来及时获取
扩展jQuery EasyUI tree搜索树节点的方法,使其支持节点名称的模糊匹配,将不匹配的节点隐藏。 /** * 1)扩展jquery easyui tree的节点检索方法。使用方法如下: * $("#treeId").tree("search", searchText); * ...
下拉选择框 - Custom Combo 下拉组合框 - ComboBox 数据表格下拉框 - ComboGrid 树形下拉框 - ComboTree 日期输入框 - DateBox 日期时间输入框 - DateTimeBox 数字输入框 - NumberBox 格式化数字...
本篇文章主要介绍解析jquery easyui tree异步加载子节点问题,easyui中的树可以从标记中建立,也可以通过指定一个URL属性读取数据建立,有兴趣的可以了解一下。
easyUI 创建Tree和复选框Tree Node easyUI 拖动(Drag)和放置(Drop)Tree easyUI 加载parent/child节点到tree 转换tree标准格式数据 easyUI 创建一个基础的TreeGrid easyUI 创建复杂TreeGrid Form easyUI ...
下面小编就为大家带来一篇扩展jquery easyui tree的搜索树节点方法(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
Jquery-easyui-tree常见操作,加载树,获取所有选中节点,展开和折叠所有节点,展开和展开指定的节点等操作
EasyUI 1.4.4 tree控件中,如果是叶子节点,切忌把state设置为closed,否则该节点会加载整个tree,形成死循环 例如: json入下: [ { "checked": false, "iconCls": "", "id": "dec", "pid": "", "state": ...
o 6.9 在DataGrid上的复选框 36 o 6.10 自定义DataGrid分页 37 o 6.11使DataGrid能编辑 38 o 6.12 DataGrid中合并单元格 41 • 7 窗口 44 o 7.1 我第一个窗口 44 o 7.2 自定义窗口工具 45 o 7.3 Window和...
本文记录的是带领成员开发一个小模块功能的时候,需要用到弹出窗口加载树状级联单位选择,最后决定用采用jQuery+EasyUI插件进行开发。但是在使用EasyUI中tree的插件时,碰到了不少麻烦。为了提供弹出树的显示速度,...
这是我改造后可以进行对象类型数据排序的easyui.js。配置{sortable:true,align:"center",field:'node',title:'节点',width:100, formatter:(v,row)=>{return row.to_node.id}, mysorter:function(a,b){ ...
一.Jquery EasyUI是什么? Jquery EasyUI是一个非常优秀的基于Jquery的界面框架插件,它提供了丰富的界面功能,方便快速开发Web界面程序。Jquery EasyUI的作者据说是中国人,对比赞一下。 看看官方是怎么描述...
o 6.9 在DataGrid上的复选框 36 o 6.10 自定义DataGrid分页 37 o 6.11使DataGrid能编辑 38 o 6.12 DataGrid中合并单元格 41 • 7 窗口 44 o 7.1 我第一个窗口 44 o 7.2 自定义窗口工具 45 o 7.3 Window和Layout 46 o...