处理下拉在表格中看不到的选项的一种解决方案

讨论 已结 精帖
176 7930
岁月小偷
悬赏:80飞吻
正文的最下面有新的更新,主要处理select在layer中的效果的,如果已经读过本帖子对这个有兴趣的可以仔细看看更新的部分[微笑]
目前因为table设定,包括高度的限制,超出隐藏加上当前select的美化的形式,在table的td中显示一个下拉一般会出现看不到选项的情况,然后以前是把有下拉的td里面的div给添加一个overflow:auto的样式这样子就能看到了,但是大家如果使用过这个方法的话,有个问题就是下拉的选项的节点是属于表格内部的,会出现下拉选项的节点增加了table内部td的内容的大小,导致多出来滚动条,而且有小伙伴的表格刚好需要在固定列上显示,这个就更坑了,干脆出不来,这个是因为固定列比非固定列更多的限制;另外后面有人提供过一个方式是修改table的一些容器的overflow为visiable,这个实际如果遇到表格的记录比较多表格的高度有限制的时候就会出问题,下面的记录也都能看见;
这里提供多一种其他的方式大家看看好用不好用,思路就是既然在表格内部会出现这么多问题,那么如果我让他在一个layer中显示呢?也就是说在之前的方法都不加的情况下,点击下拉之后,把看不到的内容给他“借”到layer去显示,那么layer是不属于table内部的节点的,只要能确保事件还能连通之前的就可以了:
先看效果图:

关键代码:
1,给表格中的下拉的title部分添加点击事件处理,将下拉出来的内容拿到layer中去显示

里面大概的就是关掉之前的下拉选项弹窗(如果有的话),然后弹出一个容器,将选项添加到这个容器中,添加进去的dom对象实际就是从原始的select美化的节点中租借过来的,里面的事件啥的还是之前的,所以这个就完成了之前说的要连通点击的那个下拉的一半了,另外一半就是在end回调的时候记得要把对应的选项的dom节点还原回去select里面,不然关了layer销毁了后面select里面就没有选项的节点了,然后里面就是一些细节的处理了,比如弹出框的大小位置等等;
2,既然是一个弹窗,那么点击其他地方要跟select一样的效果,目前select它就是折叠起来这个选项的内容,那么弹窗正常的话就是要给关了,所以下面加了一些事件的处理:

实现的到这里就done了。
测试页面: https://sun_zoro.gitee.io/layuitableplug/testTableCheckboxDisabled
gitee项目:
附加一个简易实用的小功能,就是筛选列的时候添加一个全选和反选的快捷操作的支持

主要的实现代码:
更新于2019年1月10日11:41:30
有小伙伴在帖子里面回复了layer中的select如何处理?实际之前也有考虑这个问题,其实方式跟在table中的处理是差不多的,就是利用再弹一个layer来显示select的选项,只不过有一个难点,下面大概的介绍一下。
上面说的难点其实就是layer可以是弹出一个页面层,也可以是一个iframe。
单页面的其实很简单可以完全跟表格中的下拉一样的,只要在委托的事件中多加一类弹出的select的title点击,其他的不需要变就可以。
先看看原始的layer中如果有select的话高度不够会是什么效果:

处理的方法:

之前不变的情况下,加多个这个,就可以用了,但是!细节还是需要处理好的一个就是样式,因为原始的select的下拉的dl,显示出来的时候会导致内容高度变了,有可能会出现滚动条,那么就会压缩content的内容宽度,会有一个跳变的过程,所以反正要用layer去弹出了,索性加多一个样式把layer中的这些dl的样式给改成不可见的如下:

加上这些样式之后就不会有一个跳变的过程,用户体验更好。
效果:

下面关键的来了,iframe怎么办~如果弹出的是一个iframe,而且大小有限,即使它也引入了tablePlug也做了跟top一样的优化处理,但是!就目前的逻辑再让它去弹出一个layer显然范围会更小,那么是不是用parent去弹出呢?这个是个思路,毕竟父窗口大,但是也不保险其实,如果一个小的又弹出一个更小的呢?所以稳妥起见应该是让top去弹出,但是如果要说top也贼小,摊摊手,只能说那不是给普通人做的系统,估计是给蚁人看的。所以正常来说用top去弹出就可以了,那么之前的逻辑实际要做一个不小的改造,包括得到位移的算法,弹出的各种细节控制,这里就不一一都说明了,理解理解代码应该就知道思路了。修改如下
获得位移的算法:

点击弹出选项的主要代码:

最后是一些细节的事件处理:

效果:

最后留下一个思考:是否可以不管是什么状态下的下拉都改成这种layer弹出的?如果可以,好处当然就是不管什么场景下都不会出现说因为select的下拉导致了页面的内容高度的变化,也不会有因为被容器的overflow给影响看不到之类的问题,坏处嘛,改成layer要说一点也不影响性能效率那应该是不可能的,里面需要计算,也需要用layer去弹出。

更新于2019年2月18日15:38:39
bug修复:
修复select lay-search模式,在向上弹出的选项的时候,输入搜索关键字选项的位置异常的问题
回帖
  • sasala
    2019-1-8
    老哥,给点分我
    0 回复
  • @王三 @BUG开发工程师 @雨伞 @abc1 @Jasmine_w @Pojin @快乐浪子哥 @sasala @沉浮一世 @小小爬虫丁 @名烟黄鹤楼 @老虎哥哥 @御灬灵 @爱死寂寞人 @雷锋2班红领巾 @莫辞 帖子更新了哦,新增了对layer中显示select的优化,有兴趣可以看看后面更新的内容[嘻嘻]


    8 回复
  • 雨伞
    2019-1-8
    早上好啊,我之前还遇到这个问题了,没想到今天就看到解决办法乐
    2 回复
  • @雷恩里昂 希望能合并进去layui的算是对这些修改的最大的认可哈,不过个人看法是可能性估计不大,如果有改动,应该也不是处理部分的环境下,更可能的是直接改了select的美化的逻辑,从根源上就解决了也就没有后面的这些问题了,我觉得这个可能性会更加大一些
    1 回复
  • @旺仔qq糖 不是很清楚你说的意思,templet写模板的时候就是可以获得当前的数据了,动态的改变可以用表格事件监听中的参数的obj.update这个方法,update这个字段,如果他设置了templet的话在更新数据之后会重新根据模板去解析的,不知道你说的动态更新是不是这个
    1 回复
  • @自由疯 thanks[微笑]
    1 回复
  • @赤龙虾 嗯嗯,使用原始的select是不会有看不到的问题的,而且看起来其实也挺好的,如果没有要求一定要美化的select那就用原始的就可以了,如果非要就可以试试上面的方案[微笑]
    1 回复
  • 王三
    2019-1-7
    老铁厉害啊,赞一个
    0 回复
  • 不错不错····学习了
    0 回复
  • 雨伞
    2019-1-8
    6666666[抱抱]
    0 回复
  • 0 回复
  • abc1
    2019-1-8
    厉害了,点赞[good] [good]
    0 回复
  • Jasmine_w
    2019-1-8
    [good] [good] [good]
    0 回复
  • @雨伞 趟一趟有没有坑哈[微笑] @Jasmine_w @abc1 谢谢认可[微笑]
    0 回复
  • 小偷出品,必属精品啊![赞]
    0 回复
  • @Pojin 这句话怎么看着有点眼熟呀[偷笑] 谢谢认可[嘻嘻]
    0 回复
  • 等等作者老大整合。。。每次更新,直接覆盖。不整合没法升级。[嘻嘻]
    0 回复
  • @sasala 嗯嗯,已经在另外一个帖子采纳了额,这个帖子可能后面还会编辑新加内容所以暂时和这个还不结贴额
    0 回复
  • @岁月小偷 真的博主的好多精贴帮我解决了好多问题,真的谢谢你。
    0 回复
  • @快乐浪子哥 应该会有一部分的功能会被吸收进去以后的版本,当然实现的方式不一定是一样的,毕竟作者对layui的整体的框架会更加的了解,次元不一样哈,可以用更加合理高效的方法实现,有一些功能是比较面向业务的,所以不一定都需要,作为开源的首要考虑的还是大众化的功能,所以新版本+跟着成长进化的插件我觉得才是一个更加理想的组合哈
    0 回复
  • @沉浮一世 不客气哈[微笑]
    0 回复
  • 我用的火狐浏览器 但是依然不显示defaultToolbar按钮
    0 回复
  • @小小爬虫丁 你好,有没有截图看看,你这个问题感觉跟我帖子的内容好像没有什么关系额,是么?是遇到什么问题了吗?截图还有看看layui的版本是多少额
    0 回复
  • @岁月小偷 看你分享的那个反选的自己也想试一试 ,第一步显示那个按钮就出现了问题
    0 回复
  • 版本是2.4.3,不好意思 图片贴错了一张
    0 回复
  • @小小爬虫丁 版本是多少呢?还有你的表格的配置信息,主要是defaultToolbar的这个配置,看看配置对不对额
    0 回复
  • @岁月小偷 版本是2.4.3 配置是根据文档上,
    0 回复
  • @小小爬虫丁 嗯嗯,后面的这个图看到了,因为你的toolbar设置成default了,但是你显示出来的确实一个按钮“添加分类”我觉得你要看一下是不是自己有改了什么源码了,它默认的toolbar不是这样子的额左边也是三个图标来着,所以检查一下是不是动了什么源码了或者是在什么回调里面把dom节点给整个替换了
    0 回复
  • @岁月小偷 嗯,那我在看看 谢谢大神的热心指点
    0 回复
  • 可是我这边table是用html写的,不是用js写的,那么td里面的select怎么显示,求教
    0 回复