0

0

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

尚

发布时间:2019-11-23 15:00:54

|

4665人浏览过

|

来源于fly社区

转载

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

表格反转,或者叫行列转换,估计都不陌生,先看效果图:

1.gif

测试页面: https://sun_zoro.gitee.io/layuitableplug/testTableCheckboxDisabled

相对标题说的简单实现方式,之前也考虑过关于行列转换的表格的实现方式,主要思路大概就是原始table定义还是不变,然后通过数据重新生成一个新的cols配置,因为要以数据记录作为列的配置。

然后结合原始的列配置生成出新的最终的数据和新的列配置,最后再用表格内部的渲染给渲染出来。基本上实际就是js将配置和数据结合做了一次反转然后渲染出来,理论上是可行的,但是实际上实现是比较困难的。

转念一想,其实也没必要那么复杂,可以利用一些样式控制来反转表格,只不过layui的table视图整个的结构比较复杂,由几部分组成,所以只要处理好细节实际可以简单的达到效果,当然简单说的是相对的,而且这种方式也会有一些不足的地方,最后面会讲。

先看看实现的思路方式:

首先最主要的就是样式:最为关键的就是利用了writing-mode,这个是这次修改的基石,目前大概的样式如下:

1.jpg主要就是如果.layui-table-view加了一个vertical的class的话就改变书写顺序,然后下面加了一些针对layui的表格的不同部位的对应的样式处理。

加了样式之后,基本样子就有了,但是还得润一下色

主要是比如total统计的部分,也要拿到右边但是他不属于box内部的,所以top的设置比较费劲,尝试用样式处理无果,最后换成用js去根据表头工具栏的高度设置一个top。

另外一个就是将原始的表头还有统计行竖起来分列左右了,势必会影响到内容的显示范围,所以样式也没处理妥当,也就同样用了js动态的去调整main部分的margin的值,大致如下:

2.jpg上面代码实际就是简单的切换视图容器的vertical样式,然后对应的调整一些容器的样式,基本上这两块就可以达到基础的原始的效果了,但是实际细节问题还是挺多的,而且备注也说了只是一个初步实现,后面会有一个封装的过程。

之所以最终选择用了两个按钮,写了两个监听处理,主要就是为了方便理解,还有如果有小伙伴不想用整个插件,想用单独的功能,可以参考这些比较原始的实现然后自己封装出适合自己项目的方法。

目前基于整个插件最后生成的封装后的方法调用如下:

3.jpg具体都做了什么内容:

华友协同办公自动化OA系统
华友协同办公自动化OA系统

华友协同办公管理系统(华友OA),基于微软最新的.net 2.0平台和SQL Server数据库,集成强大的Ajax技术,采用多层分布式架构,实现统一办公平台,功能强大、价格便宜,是适用于企事业单位的通用型网络协同办公系统。 系统秉承协同办公的思想,集成即时通讯、日记管理、通知管理、邮件管理、新闻、考勤管理、短信管理、个人文件柜、日程安排、工作计划、工作日清、通讯录、公文流转、论坛、在线调查、

下载

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

5.jpg接下来是一些细节处理,也炸出来一些以前没有遇到的问题

首先一个就是resize的时候,如果是反转效果的,需要更新一下,原因是部分样式用了js设置的,加上表头工具栏实际高度不限定,也就是说有可能会变化,那么他变了之前设定的top就不合适了。

所以目前处理是在resize的时候对应的给重新调整一下,如果后面有优化方案,调整成纯的css处理,那就可以省去这一步了。

6.JPG

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

7.jpgdone处理

8.jpg智能重载配置处理:

9.jpg出来的效果:

2.gif另外一个炸出来的问题是:目前如果checkbox刚好是固定列,实际表格内部有两个列是checkbox一个在固定列上,一个是main的但是点击呢,他不会去同步另外一个孪生兄弟,或者说影子。

因为行列转换之后,实际固定列被隐藏了,这时候操作的是main的,那么操作之后回到另外一种状态,就会出现一些“异象”,全选的还好,它自身有lay-filter,可以利用form.on去监听处理如下:

10.jpg他不会和table.on冲突方式用

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

11.jpg配合上事件处理:

12.jpg更多layui框架知识请关注layui框架快速入门

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
java中boolean的用法
java中boolean的用法

在Java中,boolean是一种基本数据类型,它只有两个可能的值:true和false。boolean类型经常用于条件测试,比如进行比较或者检查某个条件是否满足。想了解更多java中boolean的相关内容,可以阅读本专题下面的文章。

350

2023.11.13

java boolean类型
java boolean类型

本专题整合了java中boolean类型相关教程,阅读专题下面的文章了解更多详细内容。

29

2025.11.30

class在c语言中的意思
class在c语言中的意思

在C语言中,"class" 是一个关键字,用于定义一个类。想了解更多class的相关内容,可以阅读本专题下面的文章。

469

2024.01.03

python中class的含义
python中class的含义

本专题整合了python中class的相关内容,阅读专题下面的文章了解更多详细内容。

13

2025.12.06

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

513

2023.06.20

js获取当前时间
js获取当前时间

JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

244

2023.07.28

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

298

2023.08.03

js是什么意思
js是什么意思

JS是JavaScript的缩写,它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言,通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果,如表单验证、页面元素操作、动画效果、数据交互等。

5306

2023.08.17

俄罗斯Yandex引擎入口
俄罗斯Yandex引擎入口

2026年俄罗斯Yandex搜索引擎最新入口汇总,涵盖免登录、多语言支持、无广告视频播放及本地化服务等核心功能。阅读专题下面的文章了解更多详细内容。

31

2026.01.28

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
ThinkPHP配置开发与CMS后台实战
ThinkPHP配置开发与CMS后台实战

共87课时 | 8.6万人学习

第二十三期_综合实战
第二十三期_综合实战

共89课时 | 6.7万人学习

Layui 快速入门精讲
Layui 快速入门精讲

共5课时 | 1.4万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号