为什么要控制样式

使用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.next();// 渲染后表格的工具栏const $tableTool = $renderTable.children('.layui-table-tool');// 渲染后的Boxconst $tableBox = $renderTable.children('.layui-table-box');// 渲染后的表头const $tableHeader = $tableBox.children('.layui-table-header');// 表头的第一个子元素const $header1StChild = $tableHeader.find('table thead tr:first');// 渲染后的表身const $tableBody = $tableBox.children('.layui-table-body');// 分页器const $tablePage = $renderTable.children('.layui-table-page');// thconst $th = $renderTable.find('th');// tdconst $td = $renderTable.find('td');$renderTable.addClass('mar-renderTable');$tableTool.addClass('mar-tableTool');$tableBox.addClass('mar-tableBox');$tableHeader.addClass('mar-tableHeader');$header1StChild.addClass('mar-header1StChild');$tableBody.addClass('mar-tableBody');$tablePage.addClass('mar-tablePage');$th.addClass('mar-th');$td.addClass('mar-td');}
}

将Mar类暴露给Layui

Layui提供了一个自定义模块的功能

// By marron
// version: 1.0
class Mar {constructor(conf) {this.layui = new Layui(conf);}}class Layui {constructor(conf) {const { jquery } = conf;this.$ = this.jquery = jquery;}// 表格渲染后,自动添加样式renderTableInit(dom) {const $ = this.$;// 未渲染之前的表格const $rawTable = $('#tech-index-mqi');// 渲染之后的表格const $renderTable = $rawTable.next();// 渲染后表格的工具栏const $tableTool = $renderTable.children('.layui-table-tool');// 渲染后的Boxconst $tableBox = $renderTable.children('.layui-table-box');// 渲染后的表头const $tableHeader = $tableBox.children('.layui-table-header');// 表头的第一个子元素const $header1StChild = $tableHeader.find('table thead tr:first');// 渲染后的表身const $tableBody = $tableBox.children('.layui-table-body');// 分页器const $tablePage = $renderTable.children('.layui-table-page');// thconst $th = $renderTable.find('th');// tdconst $td = $renderTable.find('td');$renderTable.addClass('mar-renderTable');$tableTool.addClass('mar-tableTool');$tableBox.addClass('mar-tableBox');$tableHeader.addClass('mar-tableHeader');$header1StChild.addClass('mar-header1StChild');$tableBody.addClass('mar-tableBody');$tablePage.addClass('mar-tablePage');$th.addClass('mar-th');$td.addClass('mar-td');}
}layui.define((exports) => {exports('Mar', Mar);
})

使用

在Layui中,一般通过Layui.use来使用

layui.use[{'Mar', 'jquery'},()=>{const Mar = layui.Mar;const jquery = layui.jquery;const config = { jquery };const mar = new Mar(config);mar.layui.renderTableInit(''#tech-index-mqi'');
}]

然后再style标签内加上该类,即可自己操作渲染之后的DOM元素了

总结

Layui在Github上也有差不多2W星,说明还是有部分公司在使用其进行开发的.但是Layui是基于Jquery开发的,其无法完成很多高度定制化需求,有些需要自己去写。于是加一个Mar类,这样可以将代码都放在该类下.便于以后的管理、维护、扩展

Layui --- [Mar]给渲染后的表格加CSS样式相关推荐

在HTML中表示内嵌CSS样式的标记,html怎么加css样式
html怎么加css样式?下面本篇文章就来给大家介绍一下在HTML中添加CSS样式的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 1.行内式(使用style属性,在HTML标 ...
基于HTTP浏览器缓存机制全面解析看Table表格的css样式代码详解
文章来源: 学习通http://www.bdgxy.com/ 普学网http://www.boxinghulanban.cn/ 智学网http://www.jaxp.net/ 漂亮的table表格样式 ...
如何在php中加样式,vue如何给组件加css样式,php中加入css样式
vue如何给组件加css样式哇如何给组件加钢性铸铁样式,某视频剪辑软件给组件加钢性铸铁样式的方法:首先在[.vue]文件中设置相关代码:然后新建[index.js]文件,并建立对应的[record.s ...
在PHP中给表格加上css样式,表格CSS样式设置给table表格设置CSS样式表
表格table tr td CSS花色设置给table表格设置CSS花式表在一个网页中多处运用了表格table标签,这个时候给指定的表格对象设置装备摆设款式仿照照旧概略经由CSS发展管束配置. 着 ...
表格应用css样式,对表格与表单应用CSS样式.ppt
<对表格与表单应用CSS样式.ppt>由会员分享,可在线阅读,更多相关<对表格与表单应用CSS样式.ppt(12页珍藏版)>请在人人文库网上搜索. 1.第十章,HTML与CSS ...
SharePoint2010沙盒解决方案基础开发——开发webpart读取绑定列表数据，并以一定的格式显示（加css样式）...
注:此实例无需添加数据控件,避免了一些繁琐的代码实现效果如下: 读取数据和图片,并以每行两列的形式显示所需列表如下: 1. VS2010创建沙盒解决方案 2. 创建webpart 3.在TestW ...
HTML+CSS实例：简单朴素的个人简历模板（HTML表格使用+css样式渲染）
个人简历模板丑是丑了点,没有那么花里胡哨... 先看展示代码实现 <!DOCTYPE html> <html lang="en"> <head&g ...
pr里面怎么加css样式,放入pr剪辑中画面不全怎么办？
放入pr剪辑中画面不全的解决办法:首先新建项目并更改名称,并导入需要剪辑的视频素材:然后按住快捷键[CTRL+M],并[输出]命令,修改源缩放为[缩放以适合]:最后调整分辨率,点击导出即可. 放入pr ...
html做静夜思加css样式,HTML+CSS网页设计_图文.ppt
应用模板演示示例6:应用模板素材应用模板答案用模板页制作"装备"商品的详细介绍页用模板页重新制作"装备"的详细介绍页的步骤 1.新建空白文档 2.应用模 ...

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