【WEB前端开辟】layui表格反转的一个简朴完成体式格局

表格反转,或许叫行列转换,预计都不生疏,先看结果图:

测试页面: 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表格反转的一个简朴完成体式格局的细致内容,更多请关注ki4网别的相干文章!

点赞

发表评论

电子邮件地址不会被公开。必填项已用 * 标注