项目中要求选个树形解构的下拉框,经过查找,目标锁定easyui 的combotree,但是随着项目的开发增加了两个功能:1.要能搜索,2.点击父节点不选中,只是展开/关闭节点 。搜索好解决(具体可参考:为jQuery EasyUI tree增加搜索功能(一)),主要来看看需求2。
我们打开官网的例子可以看到,当我们点击父节点的时候,父节点被选中到结果里面了。然而难免会遇到不选父节点,只是展开的情况。
于是开始搜索是否有和我情况相同的做法。幸好,果然有easyui中combotree只能选子选项,父级不被选中。于是动手尝试吧,据这篇文章所说,先增加了 onBeforeSelect的回调,如果我的数据结构中,type==0
(父节点的数据),就return false
;
onBeforeSelect:function(node){
if(node.type==0){
return false;
}
},
然而结果只是不赋值到结果集合,我需要不仅仅是不选中,还要展开。
经过各种尝试,我只能另辟蹊径,我发现当多选,并且onlyLeafCheck:true
的情况下,点击父节点是没有任何反应的,这样就不会选中父节点的值,下面我希望点击父节点他能够展开关闭,经过观察发现可以通过触发旁边的小箭头来实现。
onBeforeSelect: function (node) {//父节点上触发节点展开收起
if (node.type == 0) {
$(node.target).find('.tree-hit').trigger('click');
}
},
至此我的需求实现了,但是由于用了复选的,多了个问题,就是可以选中多个值,最后我们来整理下结果就好了,永远取最后一个值。
onCheck: function (node, checked) {
_this.combotree("setValue",node.id);//_this指的是调用combotree的元素
_this.combo("hidePanel")//选中后关闭下拉框
},
网友评论