Layui --- > [Mar]给渲染后的表格加CSS样式

最新推荐文章于 2024-04-03 14:45:33 发布

栗子好好吃

最新推荐文章于 2024-04-03 14:45:33 发布

阅读量970

点赞数

分类专栏： layui Mar 文章标签：自定义类 Layui表格渲染 Mar

本文链接：https://blog.csdn.net/piano9425/article/details/103401139

版权

本文探讨了在Layui表格渲染后如何通过自定义类Mar来控制样式。Layui表格通常由多个DOM元素组成，Mar类旨在在表格渲染完成后，方便地添加和管理自定义样式，实现高度定制。通过引入Mar，可以在Layui的table模块中轻松扩展和管理代码，以满足更复杂的样式需求。

摘要由CSDN通过智能技术生成

为什么要控制样式

使用layui生成后的表格的样式有时候,并不能满足我们的需求.因此在渲染完成后,需要自定义类对其操作

Layui表格渲染后一般会出现以下结构

在这里插入图片描述

分结构如下

我把使用layui的table渲染后的表格分为如下的几个dom
1.$rawTable: 初始table,即

2.$renderTable: 渲染之后的table,这个dom元素是Layui异步获取数据后生成的.
$renderTable:
分为如下:
里面根据需求还可以细分

正题

目标: 我们希望引用一个模块,当调用layui的table渲染结束后,调用这个模块,给上面定义的4个元素加自己的样式.
效果: 这样做,可以在渲染成功后,随心所欲的更改样式

启动函数:

// 只需要传入Layui渲染的<table>id即可
mar.layui.renderTableInit('#tech-index-mqi');

设计类-Mar

首先设计一个名为Mar的模块,它的作用是
1.管理协调其他各个模块的工作
2.便于扩展其它的库

class Mar {
   
	constructor(conf) {
   
		this.layui = new Layui(conf);
	}
}

设计类-Layui

这里是实现高度定制化的地方,因此需要及其细腻的思想,暴露的接口也应当更加简洁。

class Layui {
   
    constructor(conf) {
   
        const {
    echarts, jquery } = conf;
        this.$ = this.jquery = jquery;
        this.echarts = echarts;
    }
    // 表格渲染后,自动添加样式
    renderTableInit(dom) {
   
        const $ = this.$;
        // 未渲染之前的表格
        const $rawTable = $('#tech-index-mqi');
        // 渲染之后的表格
        const $renderTable = $rawTable.