為什么要控制樣式
使用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類,這樣可以將代碼都放在該類下.便于以后的管理、維護、擴展