让前端飞

easyui中combotree只能选子选项,父级不被选中,并且

2018-11-26  本文已影响0人  saintkl

项目中要求选个树形解构的下拉框,经过查找,目标锁定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")//选中后关闭下拉框
                },

下面分享下代码,包括需求1,2,还有清除选项功能。
效果展示
项目地址

上一篇下一篇

猜你喜欢

热点阅读