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
但是如果要对不同树形节点进行特殊处理,一部分节点(不一定是叶子节点)可多选,一部分节点不可多选时,使用父类treecheckbox = 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 是继承自 combotree 两个父类的,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属性就是treecheckbox 属性!坑啊!官方文档所描述的 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