EasyUI中的Combotree checkbox坑
来源:互联网 发布:dnf决战人工智能数字 编辑:程序博客网 时间:2024/05/19 05:05
EasyUI中的Combotree checkbox坑
在EasyUI中使用Combotree控件时,如果要实现多选功能,官方文档是直接设置Options配置中的multiple属性为true,即可在弹出的树形菜单中显示多选框。
如下所示:
<div><input id="sel_city" name="city[]" size="64" /></div>//...<script>$(function(){ $('#sel_city').combotree({ url: 'http://to.yours.com/method', editable:false, lines:true, method:'get', parentField:'_parentId', valueField:'id', textField:'text', multiple:true, //这个选项设置多选功能 cascadeCheck:false, prompt: '请选择...' });});</script>
如果要设置只有叶节点可选,还有一个选项是 onlyLeafCheck = true | false
。
但是如果要对不同树形节点进行特殊处理,一部分节点(不一定是叶子节点)可多选,一部分节点不可多选时,使用父类tree
的 checkbox = boolean | function
却总是不起作用:
<script>$(function(){ $('#sel_city').combotree({ url: 'http://to.yours.com/method', editable:false, lines:true, method:'get', parentField:'_parentId', valueField:'id', textField:'text', multiple:true, //这个选项设置多选功能 cascadeCheck:false, checkbox: function(node){ //控制每个节点的选择框是否显示,无效! if(node.id == 1 || node.id == 23){ return false; //ID为1和23的节点不显示多选框(无效!) } }, prompt: '请选择...' });});</script>
根据官方文档,combotree
是继承自 combo
和 tree
两个父类的,checkbox
属性是 tree
的属性也应该自动继承才对,但就是无法直接使用。网上查了官网没有说明,也没有相关的文档和问题,只好到EasyUI的源代码里找原因了。经过研究,终于在 jquery.easyui.min.js
中发现了下面一段代码:
function _abc(_abd){var _abe=$.data(_abd,"combotree");var opts=_abe.options;var tree=_abe.tree;$(_abd).addClass("combotree-f");$(_abd).combo($.extend({},opts,{onShowPanel:function(){if(opts.editable){tree.tree("doFilter","");}opts.onShowPanel.call(this);}}));var _abf=$(_abd).combo("panel");if(!tree){tree=$("<ul></ul>").appendTo(_abf);_abe.tree=tree;}//注意下面一行,options中的 multiple 属性被赋给了 checkbox !tree.tree($.extend({},opts,{checkbox:opts.multiple,onLoadSuccess:function(node,data){ var _ac0=$(_abd).combotree("getValues");if(opts.multiple){$.map(tree.tree("getChecked"),function(node){$.easyui.addArrayItem(_ac0,node.id);});}
很明显,在combotree
控件中,multiple
属性就是tree
的checkbox
属性!坑啊!官方文档所描述的 multiple = boolean
其实不仅能接受 bool值,也可以设置为返回bool值的函数。
因此,代码最终改为:
<script>$(function(){ $('#sel_city').combotree({ url: 'http://to.yours.com/method', editable:false, lines:true, method:'get', parentField:'_parentId', valueField:'id', textField:'text', multiple: function(node){ //控制每个节点的选择框是否显示,有效! if(node.id == 1 || node.id == 23){ return false; //ID为1和23的节点不显示多选框(有效!) }, cascadeCheck:false, prompt: '请选择...' });});</script>
Done!
延伸:combogrid 控件也有同样的问题,各位看官可以自己尝试一下。
EasyUI官方文档: http://www.jeasyui.com/documentation/index.php
Combotree官方示例:http://www.jeasyui.com/demo/main/index.php?plugin=ComboTree
阅读全文
0 0
- EasyUI中的Combotree checkbox坑
- easyUI ComboTree
- EasyUI combotree
- Easyui combotree
- jquery-easyui的combotree在.net开发中的问题
- JQuery EasyUI combotree
- easyui combotree --异步加载
- jquery easyUI ComboTree使用方法
- easyui combotree树
- easyui combotree 和 treegrid
- jQuery easyui combotree
- EasyUI combotree 赋值
- easyUI comboTree的实现
- EasyUi combotree 使用总结
- easyui combotree选项重复
- jquery easyui combotree
- easyui-combotree出现undefined
- easyui combotree基本使用
- u盘写保护终极修复方法
- 深度学习与AI+思维简单课程思考4
- java.lang.OutOfMemoryError: PermGen space的
- Thinkphp 配置不用输入index.php
- 1008红玫瑰数
- EasyUI中的Combotree checkbox坑
- 2015NOIP普及组第四题求和满分解法
- 设计模式学习---第十一节:建造模式
- 周中记录--2017.11.9
- linux 信号
- 计算两个数的不同比特位
- 【安全牛学习笔记】基本工具-WireShark
- [Unity优化]图片纹理压缩方案
- 从JavaScript的继承角度解析什么是原型链