為什么要控制樣式

使用layui生成后的表格的樣式有時候,并不能滿足我們的需求.因此在渲染完成后,需要自定義類對其操作

Layui表格渲染后一般會出現(xiàn)以下結(jié)構(gòu)

分結(jié)構(gòu)如下

• 我把使用layui的table渲染后的表格分為如下的幾個dom
  1.$rawTable: 初始table,即
  2.$renderTable: 渲染之后的table,這個dom元素是Layui異步獲取數(shù)據(jù)后生成的.
  
• $renderTable:
  分為如下:
  
• 里面根據(jù)需求還可以細分

正題

• 目標: 我們希望引用一個模塊,當調(diào)用layui的table渲染結(jié)束后,調(diào)用這個模塊,給上面定義的4個元素加自己的樣式.
• 效果: 這樣做,可以在渲染成功后,隨心所欲的更改樣式

啟動函數(shù):

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

設(shè)計類-Mar

首先設(shè)計一個名為Mar的模塊,它的作用是
1.管理協(xié)調(diào)其他各個模塊的工作
2.便于擴展其它的庫

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

設(shè)計類-Layui

這里是實現(xiàn)高度定制化的地方,因此需要及其細膩的思想,暴露的接口也應(yīng)當更加簡潔。

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標簽內(nèi)加上該類,即可自己操作渲染之后的DOM元素了
  

總結(jié)

Layui在Github上也有差不多2W星,說明還是有部分公司在使用其進行開發(fā)的.但是Layui是基于Jquery開發(fā)的,其無法完成很多高度定制化需求,有些需要自己去寫。于是加一個Mar類,這樣可以將代碼都放在該類下.便于以后的管理、維護、擴展

總結(jié)

以上是生活随笔為你收集整理的Layui --- [Mar]给渲染后的表格加CSS样式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。