美文网首页让前端飞
easyui中combotree只能选子选项,父级不被选中,并且

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

作者: saintkl | 来源:发表于2018-11-26 16:57 被阅读0次

    项目中要求选个树形解构的下拉框,经过查找,目标锁定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,还有清除选项功能。
    效果展示
    项目地址

    相关文章

      网友评论

        本文标题:easyui中combotree只能选子选项,父级不被选中,并且

        本文链接:https://www.haomeiwen.com/subject/qtmbqqtx.html