layui表格反转的一个简单实现方式
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了layui表格反转的一个简单实现方式，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3247字，纯文字阅读大概需要5分钟。
内容图文
表格反转，或者叫行列转换，估计都不陌生，先看效果图：
测试页面： https://sun_zoro.gitee.io/layuitableplug/testTableCheckboxDisabled
相对标题说的简单实现方式，之前也考虑过关于行列转换的表格的实现方式，主要思路大概就是原始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,这回倒好，监听都监听不到，但是方法是人想的，没有就给动态加上呗，所以有了下面的这块处理
配合上事件处理：
更多layui框架知识请关注layui框架快速入门。
以上就是layui表格反转的一个简单实现方式的详细内容。
内容总结
以上是互联网集市为您收集整理的layui表格反转的一个简单实现方式全部内容，希望文章能够帮你解决layui表格反转的一个简单实现方式所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。