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

讨论 已结 精帖
176 7937
岁月小偷
悬赏: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模式,在向上弹出的选项的时候,输入搜索关键字选项的位置异常的问题
回帖
  • @旺仔qq糖 这个可以通过templet实现额,templet中根据条件去决定显示什么
    0 回复
  • @岁月小偷 如果需要根据表格的数据动态的改变这些显示呢,比如重新渲染之后
    0 回复
  • @岁月小偷 没有错,我试试,谢谢了大佬
    0 回复
  • 瀚瀚
    2019-1-13
    @岁月小偷 你好,请教一下,为什么在做下拉框时,进行多选,显示的总是最后下拉框中的最后一个?希望指点一下,第一次使用layui,是个菜鸟,谢谢
    0 回复
  • @瀚瀚 目前layui的下拉框只能单选,你说的多选是什么意思呢?有没有截图看看,还有你写的相关的代码
    0 回复
  • 瀚瀚
    2019-1-13
    @岁月小偷
    代码在公司,就是select的option是动态添加的,然后我想选择里面的两三个数据,选择完毕后,只是将下拉框中的最后一个显示两三遍,可以加我qq吗,我是真的急需583036741,谢谢
    0 回复
  • @瀚瀚 这个目前layui自带的下拉是不支持多选的,只能选中单个选项,如果要实现多选的话可以看看扩展组件中的formselect https://fly.layui.com/extend/formSelects/
    0 回复
  • 瀚瀚
    2019-1-13
    @岁月小偷 我用的就是formselect ,已经实现多选了,但是选择完成后,显示的总是下拉框中的最后一个,选几个显示几次的意思,要不明天我再问你吧,这样感觉也说不清,谢谢你 了

    0 回复
  • 瀚瀚
    2019-1-13
    @岁月小偷 就相当于我选择了上海和深圳,但是显示的就是两个天津,这个意思
    0 回复
  • @瀚瀚 嗯嗯,只是用了formSelect是吧,出这种bug一般需要排除下是否有其他组件的干扰,然后调试,demo测试没问题,就是调试自己的代码,一点点排查,包括它源码里面的逻辑,执行一下看看到哪出的问题
    0 回复
  • 大佬,你这个table当中显示select无法滚动跟随,要怎么优化下呢?具体请看git图
    0 回复
  • @惜缘随缘莫攀缘 你这个多少层的iframe嵌套呢?
    0 回复
  • 我这个没有iframe嵌套,,对啦,我那个git回复可以帮我删掉吗?
    0 回复
  • @惜缘随缘莫攀缘 单页面系统是么?还是右边打开的是一个单独的iframe呢?用的是最新的代码什么?我是做了处理的额,





    git回复是指哪个额?
    0 回复
  • 就是上一条回复带有GIF的那个,帮我删掉一下,拜托
    我用的是layuiAdmin单页应用,代码应该是最新的额
    0 回复
  • @惜缘随缘莫攀缘 哦,是要删除gif图哈,写成git还以为是什么呢哈,我没有删除帖子回复啥的权利哦,这个估计你可以@ 一下作者看看,单页面的应用这个效果有点怪额,应该不会呀,我试试看去。
    0 回复
  • 0 回复
  • @岁月小偷 这个是在码云上下载的你提供的例子,也是有问题的哈
    0 回复
  • @惜缘随缘莫攀缘 额,根绝你这个代码还不是最新的额,位置上有点问题~,这两天提交过,建议你先下一下看看,一会还会提交一个,这个滚动是横向滚动的,因为这个固定实际是依赖了layer的fixed的配置,它设置成固定也只能是监听body的滚动,table内部的滚动影响不到它[思考] ,我想办法处理一下额
    0 回复
  • @岁月小偷 嗯嗯,感谢感谢
    0 回复
  • @岁月小偷 想到一个方法,监听容器的滚动,有滚动则关闭弹窗,我这边暂时这么解决,大佬肯定还有更好的解决方案[嘻嘻]
    0 回复
  • 想问下富文本编辑器怎么能先把图片上传到七牛,然后拿到链接显示在编辑器里面,最后再一起提交?
    0 回复
  • @惜缘随缘莫攀缘 嗯嗯,我觉得这个处理方式应该还可以接受,要做到让它跟着走方法也是有,但是表格中的还好,主要是如果layer弹出的,每一层的容器都有可能出现滚动,这个要处理就难受了,目前是没想到什么好方法,也可以定义一个定时器,3毫秒给调整一下位置跟着它的titleElem走,且不说影响性能的事,还会遇到的问题就是滚动到这个下拉的title那里如果被盖住了,一般也要让它消失这个又是一个不好处理的地方,所以干脆还是简单处理,在它的容器里面滚动给关掉好了
    0 回复
  • @孤雁无风 你好,这个富文本编辑器没怎么使,文档说的是设置这个url接口有没有试过直接设置成对应的七牛的接口了呢?
    layedit.set({
    uploadImage: {
    url: '' //接口url
    ,type: '' //默认post
    }
    });
    0 回复
  • @岁月小偷 谢谢回答,不过七牛不能这么用,我还是换了个编辑器
    0 回复
  • 自由疯
    2019-1-18
    而台湾
    0 回复
  • 阿滔
    2019-1-21

    请问,这种下拉框的数据能不能联动呢,比如,我选了其它城市,隔壁的单元格能根据下拉框的值而改变成不同的值。希望能回答一下
    0 回复
  • @阿滔 可以做到。比较费劲的一个方法是:封装一个可以update table某条数据的方法,那么后面你选择一个选项之后就调用这个方法去更新当前的这条数据,包括cache中的还有页面的显示内容;第二个就是不需要依赖外部的,可以利用table的相关回调的参数obj.update去更新,不过这个有点投机取巧,也能实现,主要的思路就是监听select,然后给当前的select的td添加一个lay-event随即点击一下,这时候就会进去回调,进入回调就可以利用obj.update去更新当前这一行的某些字段了,记得更新完之后要把当前的这个td的lay-event去掉,不然后面点击select的时候就有可能一下子就触发了而不是等到你选择了一个选项再触发。
    0 回复
  • 阿滔
    2019-1-21
    @岁月小偷 谢谢,我看一下
    0 回复
  • @阿滔 嗯嗯,可以试试看,理论上都是可以达到的,方法一之前写过一个封装,方法二实际比较取巧,主要是不需要自己封装处理,纯粹是利用table提供的方法去实现,需要的话我都可以提供一个小例子给参考参考额
    0 回复