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

讨论 已结 精帖 194 10361
岁月小偷
悬赏: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模式,在向上弹出的选项的时候,输入搜索关键字选项的位置异常的问题
回帖