layui 表格反转的一个简单实现方式

分享 已结 精帖 110 13011
岁月小偷
悬赏:80飞吻
表格反转,或者叫行列转换,估计都不陌生,先看效果图额

相对标题说的简单实现方式,之前也考虑过关于行列转换的表格的实现方式,主要思路大概就是原始table定义还是不变,然后通过数据重新生成一个新的cols配置,因为要以数据记录作为列的配置,然后结合原始的列配置生成出新的最终的数据和新的列配置,最后再用表格内部的渲染给渲染出来。基本上实际就是js将配置和数据结合做了一次反转然后渲染出来,理论上是可行的,但是实际上实现是比较困难的。
转念一想,其实也没必要那么复杂,可以利用一些样式控制来反转表格,只不过layui的table视图整个的结构比较复杂,由几部分组成,所以只要处理好细节实际可以简单的达到效果,当然简单说的是相对的,而且这种方式也会有一些不足的地方,最后面会讲。先看看实现的思路方式:
首先最主要的就是样式:最为关键的就是利用了writing-mode,这个是这次修改的基石,目前大概的样式如下:

主要就是如果.layui-table-view加了一个vertical的class的话就改变书写顺序,然后下面加了一些针对layui的表格的不同部位的对应的样式处理;
加了样式之后,基本样子就有了,但是还得润一下色
主要是比如total统计的部分,也要拿到右边但是他不属于box内部的,所以top的设置比较费劲,尝试用样式处理无果,最后换成用js去根据表头工具栏的高度设置一个top,
另外一个就是将原始的表头还有统计行竖起来分列左右了,势必会影响到内容的显示范围,所以样式也没处理妥当,也就同样用了js动态的去调整main部分的margin的值,大致如下:

上面代码实际就是简单的切换视图容器的vertical样式,然后对应的调整一些容器的样式,基本上这两块就可以达到基础的原始的效果了,但是实际细节问题还是挺多的,而且备注也说了只是一个初步实现,后面会有一个封装的过程,之所以最终选择用了两个按钮,写了两个监听处理,主要就是为了方便理解,还有如果有小伙伴不想用整个插件,想用单独的功能,可以参考这些比较原始的实现然后自己封装出适合自己项目的方法。
目前基于整个插件最后生成的封装后的方法调用如下:

具体都做了什么内容:

代码的大概意思就是可以全部表格或者单个表格转换,然后根据第二个参数reversal,如果没有传就是取相反效果,如果传入boolean,以实际的值为准,true:反转,false:不反转,最后调用的是对table.Class的扩展方法reverse

接下来是一些细节处理,也炸出来一些以前没有遇到的问题
首先一个就是resize的时候,如果是反转效果的,需要更新一下,原因是部分样式用了js设置的,加上表头工具栏实际高度不限定,也就是说有可能会变化,那么他变了之前设定的top就不合适了,所以目前处理是在resize的时候对应的给重新调整一下,如果后面有优化方案,调整成纯的css处理,那就可以省去这一步了

另外一个细节,就是初始化的时候能否就让它反转?这个一般是没问题的就是一个参数决定状态,然后在render完毕的是调用实例的reverse处理一下就好,当然有更加细节的就是这个新加的属性,应该是属于智能重载的可重新请求属性的范畴,所以也要注意加上处理:

done处理

智能重载配置处理:

出来的效果:

另外一个炸出来的问题是:目前如果checkbox刚好是固定列,实际表格内部有两个列是checkbox一个在固定列上,一个是main的但是点击呢,他不会去同步另外一个孪生兄弟,或者说影子,因为行列转换之后,实际固定列被隐藏了,这时候操作的是main的,那么操作之后回到另外一种状态,就会出现一些“异象”,全选的还好,它自身有lay-filter,可以利用form.on去监听处理如下:

他不会和table.on冲突方式用
更加麻烦的是下面的单个复选的生成的时候没有给他们加lay-filter,这回倒好,监听都监听不到,但是方法是人想的,没有就给动态加上呗,所以有了下面的这块处理

配合上事件处理:

基本到这里,本帖子说的简单处理方式就算完结了,说说不足的,一个就是它是在原始效果的基础上去加入特殊的样式处理,特比是在一开始没有整个效果的时候,初始渲染会有一个跳变的过程,当然了只要不是老爷机基本感觉影响不大;另外一个就是比如还想要固定“表头”,比如上面的复选还有序号id等,然后还要设定固定的高度让底下的分页能看到,那么这个简单的处理方式估计是比较难实现的,因为实际就是又得跟layui的表格一样生成出来对应的表头模块,左右固定模块等才比较有戏,所以不是说绝对没办法看花多少代价,所以这个要达到跟原始layui的table一样的体验,基本上就只能跟文章开头说到的那个方案一样,动态的生成出来新的cols和data然后去渲染出来,有兴趣和精力可以尝试尝试。当然有更好的方式那是最好不过的[微笑]
回帖
  • 贤心
    贤心 (管理员)
    2019-4-2
    深深感觉到 table 已经被小偷同学改造得如火纯清,layuiTablePlug 更应该叫:tablePlus.js [good]
    14 回复
  • @贤心 感谢作者大大的认可哈,项目上table还是占大头[嘻嘻] ,之前也有小伙伴说能不能给弄成一个组件,但是个人考虑是,底子还是基于layui啦,原本的表格就已经很好用了,只不过是为了让它针对一些业务更加方便一些,所以没必要重复造轮子,站在巨人的肩膀上就好[偷笑] ,当然也有小伙伴看烦了哈[哈哈]
    4 回复
  • @wachpi @ashan @IDyun @jinghong [微笑] [微笑] [微笑] [微笑] @Pojin 这是不可能事件[偷笑]
    4 回复
  • 小偷,table再改下去,贤心要封你号了,太牛了
    3 回复
  • @岁月小偷 看烦的早不看了,看到现在的还有点期待了呢
    2 回复
  • Jasmine_w
    2019-4-3
    [good] 好厉害,膜拜大佬
    2 回复
  • 时光·
    2019-4-3
    [右哼哼]
    1 回复
  • @贤心 大神 啥时候更新新功能呢
    1 回复
  • woshiwo
    2019-4-17
    <br><br><br><br><br><br><br><br><br>
    1 回复
  • @倚楼听风雨vs 你现在用的layui是什么版本呢?这个插件的使用方式开源项目上有说明额,可以看gitee仓库上面的readme;主要就是找到适合自己的版本,然后修改源码或者直接用我提供厚的table.js和layui.all.js替换对应的文件,基本准备工作就做好了,然后在table.render之前先use插件,引进去再渲染表格就可以了;如果觉得复杂麻烦,建议可以试试另外一个mylayui,其中表格的处理包含了这个插件的大部分内容,用起来也更加方便,就当是layui适用就好,就是会有更丰富的功能,以及对原始layui的一些“bug”的修复
    1 回复