关于layui表格表格列宽自适应的一些经验还有建议

讨论 已结 精帖 39 3644
岁月小偷
悬赏:50飞吻
最近露脸率挺高的一个问题,就是比如左侧导航是可横向伸缩的,那么右边的内容自然要跟着变动,看着内容大部分是调整ok了但是表格,比如一开始显示正常的表格右边空出了一块区域,比如下图的效果,或者也可以去layuiAdmin的演示里面看看带有表格的时候点击收缩左侧导航之后会表格的效果。

然后有不少回答的人就说设置100%,字段设置百分比,字段留有一些不要设置让table自适应之类的,实际上都没用,上面的代码的截图如下:

测试为主就用了两个让它自适应的,一个百分比,一个没填。
那么问题出在哪?
实际上这个首先要考虑的是table的自适应是什么时候会自适应,你点击按钮调整了宽度之后是否能让table自适应。
table目前自适应有关的就是在初始化渲染的时候会根据这些我们配置的信息去计算出每个列应该显示多少,剩下的几乎就剩下一个监听document的resize然后调整。那么点击按钮你做了啥这个是关键,比如我的

可以看到里面其实就只是改变了某个容器的left样式从而改变了它的大小,单页面上实际上是不会对window的大小做任何影响,所以不会触发table设置的resize监听,那么是不是这个的问题,加上$(window).resize()再试。
然而实际上是没用的,因为关键问题不在这里,所以即使加上了也没用,但是还是要加上,对调整里面显示的内容是有用的,然后也可以通过手动调整窗口的大小来触发table绑定的resize事件,但是你会发现实际上不管你怎么改变窗口,列的宽度始终都是没有变化的,如下面效果。

那么,有办法处理吗?
先看最终效果吧,按钮改变宽度的,调用resize的

然后是手动改变窗口的

看动图不够,那么直接访问这个线上试试看额 https://sun_zoro.gitee.io/layui_test/
可以看到不管什么方式,只要前面设置了是需要动态适应的列,包括百分比,还有没有定义宽度让table给设置宽度的这两种情况,都要根据最新的table的大小来改变为新的宽度。而其他的限定死的这些字段不管怎么变它设置了多少就是多少,除非后面用鼠标拖拽的方式改变了,那也是保留改变之后的宽度,而不能是不管以前是什么设置后面resize都全部变化了,这个是最基础的要求感觉。
未完待续,后面会仔细分析问题的关键所在还有如何处理的整个过程。
下半部分开始,也是主要的部分。主要包括这个问题的定位还有解决的思路还有最终的解决方案。注:这些只是本人根据自己的经验和认知做的尝试,思路和方法都不一定都是合理的,更不可能是唯一的方式,所以有帮助的最好,要是有不足的地方请不吝指正。
形成的原因
这样得说说layui的table的一些逻辑处理了,比如字段的宽度设置这个,比如我们设置了10%实际上,到了样式样并不是给table的对应的th还有td给设置成10%的宽度的样式,而是经过组件计算得出来的几个确定的值,不填写让table自适应也是基本同理,最后得到的都是一个确切的值,这个可能有同学会有疑问,为啥不做成百分比的呢?这样整体表格的宽度变化自然就变了,这个如果你有自己尝试过去处理表头固定你就会发现实际上没有想象的那么简单就能够做出来,经过组件计算出来的每个列的宽度的样式,可以说是layui的table组件的表头固定的魂,它必须有一种机制来维护表头和实体的列是一一对应的,但是欠缺的是在resize的时候进行重新计算这些不是固定宽度的列,重新根据表格的大小确定出新的宽度,我认为这个才是这个问题的关键所在,可以说是table所缺失的一个细节处理,所以也正如标题说的建议后面的版本出对应的处理方式。不知道这次改版的2.4.0较大改动会有什么惊喜,我们拭目以待。
修改的思路
既然render的时候能自动的计算出来,那么自然的table组件里面就有关于列宽度计算的逻辑,这个是在setArea这个方法里面处理的,然后就是怎么改的问题了,首先如果不修改源码,要自己写一套逻辑来处理我认为是没必要的,而且前面也说了,这个是table组件缺失的一块东西,所以如果对table里面的各个模块能有一定的理解,还有思路的话那么改源码还是省心而且效果好,就跟初始化的是一样的出来的自适应结果。
最后是修改的源码还有解析了
首先table.render的时候在渲染表格的时候会遍历我们设置的配置信息,把没有设置宽度或者设置百分比的,都通过算法计算出来实际的宽度重置到这个配置信息中,后面即使你调用了setArea因为里面都是确定的值所以得有一个逻辑在setArea的时候知道哪些列一开始设置的就是自适应的列。
修改一:setArea中添加autoCol变量,用来保存需要动态自适应的列信息

修改二:setArea中如果字段的宽度为空或者百分比的时候记录到前面定义的autoCol中

修改三:保存到that.autoCol中以供resize的时候使用

修改四:resize监听里面处理,这个是关键的地方里面就是遍历需要重新计算的列然后将目前config中的对应设置的width给重置回render时候的状态,然后再调用setArea这样就可以跟初始化渲染一样得到新的宽度了,最后得到新的宽度之后再调整这些列的样式就可以了。


回来的太晚整理的不是很详细,不过大部分都是说了应该没漏什么,目前的修改方式就是上面的那些对源码的修改,充分利用已经存在的方法去处理。如果有什么遗漏的明天再补充2018年8月12日00:03:36
最后是测试的代码,目前是放在gitee上 https://gitee.com/sun_zoro/layui_test ,没有放在云盘,大家感兴趣可以直接访问这个 https://sun_zoro.gitee.io/layui_test 看看效果,然后对里面的代码感兴趣的话可以clone或者fork一下,后面可能还会有更多的内容分享说不定。本来是前段时间整理了一些社区常见的一些表格的业务需求,但是目前快出2.4而且表格估计会有较大的改动,所以感觉发出来那些可能没太大的必要,就搁置了,目前这个gitee上面的只是针对当前这个帖子的内容的,没有收集其他的,后面有需要再扩充。
回帖
  • @岁月小偷 测试结果却不起作用
    0 回复
  • @雷锋2班红领巾 get it。在本来的admin上试出来了,

    不过不是我的锅,实际上和这个是有一个问题就是,window resize的时候不仅仅table有处理逻辑,左侧的菜单其实也有,这个出现的情况就是因为resize的时候table计算的时候width是左侧的菜单还没有出来的宽度,但是算好了之后其他的逻辑会把左侧的菜单给显示出来如果足够宽的话,导致的这个问题。然后另外一个就是折叠的,比如一开始是合上的,你resize的时候,它也是会有这个问题,它会强制打开,如果以前是折叠的话,同样导致实际上计算的时候表格宽度和最终显示出来的宽度有差别的问题。
    2 回复
  • IT_bai
    2018-8-11
    [good]
    0 回复
  • Jasmine_w
    2018-8-11
    [围观] [兔子] 占个位置,静听大佬下回分解[鼓掌]
    0 回复
  • 膜拜大佬[鼓掌]
    0 回复
  • 膜拜大佬[哈哈]
    0 回复
  • →火 钳 刘 明
    0 回复
  • @Minhat @菜鸟程序猿 @雷锋2班红领巾 @茉莉 @IT_bai 周末愉快,出去吃个饭逛个街回来匆匆整理了一下就这么晚啦,可能也没有表达好哈,欢迎看看有没有什么没整对的哈或者更好的思路哈。
    0 回复
  • 这个只是针对浏览器窗口放大缩小有效对吗?比如开启f12和关闭无效
    0 回复
  • @雷锋2班红领巾 这个要看你开启f12调试的时候这个调试会不会改变窗口大小额,本质上来说,只要是改变窗口大小会resize都会起作用的,所以比如下面的

    第一个实际不会修改窗口大小,所以坑定是不会触发的,后面三个都是在原来的窗口中的一个区域打开调试,都会改变窗口的大小,所以会触发resize,所以根本的问题不是说按f12会不会触发哈,是按了f12会不会影响窗口大小的问题我觉得。
    0 回复