Layui --- [Mar]給渲染后的表格加CSS樣式

為什么要控制樣式

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

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/250454.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/250454.shtml
英文地址,請注明出處:http://en.pswp.cn/news/250454.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Python 楊輝三角形的簡單實現

Python 楊輝三角形的簡單實現 介紹&#xff1a; 楊輝三角 實現&#xff1a; # -*- coding: utf-8 -*-def triangles():L[1]while True:yield LL [1] [ L[i-1] L[i] for i in range(1,len(L)) ] [1]n 0 for t in triangles():print(t)n n1if n 10 :break 效果&#x…

Jackson序列化和反序列化

1&#xff0c;下載Jackson工具包(jackson-core-2.2.3.jar jackson-annotations-2.2.3.jar jackson-databind-2.2.3.jar ) jackson-core-2.2.3.jar 核心包 http://repo1.maven.org/maven2/com/fasterxml/jackson/core/jackson-core/2.2.3/jackson-core-2.2.3.jarjackson-annot…

Python 框架之Flask初步了解

Python 框架之Flask初步了解 前言 ? 在了解python web 框架之前&#xff0c;我們需要先了解框架實現的基本原理。首先&#xff0c;需要了解WSGI&#xff08;Web Server Gateway Interface&#xff09;&#xff0c;借助WSGI我們就能實現用Python專注于生成HTML文檔&#xff0…

AJAX異步交互

什么是AJAX AJAX&#xff08;Asynchronous Javascript And XML&#xff09;翻譯成中文就是“異步Javascript和XML”。即使用Javascript語言與服務器進行異步交互&#xff0c;傳輸的數據為XML&#xff08;當然&#xff0c;傳輸的數據不只是XML&#xff09;。 AJAX還有一個最大的…

koa --- [MVC實現之三]換個角度重新開始-初始化

說明 下面文章是對該系列前面2篇及項目中經驗的總結,重新開始寫的實現了Mar類,貫穿Router層、Controller層、Service層基本骨架的搭建 初始 使用Koa創建一個簡單的服務器,一般會使用如下 const koa require(koa); const app new koa(); const Router require(koa-router…

MySQL索引設計原則

一、MySQL常用的索引類型 1.1主鍵索引 primary key 1.2唯一索引 unique 1.3普通索引 index 1.4全文索引 1.5組合索引 二、MySQL常用的數據結構 2.1B-tree 2.2哈希索引 三、索引的設計原則 3.1選擇唯一性索引 被設為唯一性的值可以設置為索引&#xff0c;這樣能快速定位到某條記…

Flask-admin 學習及一些筆記

Flask-admin 學習及一些筆記 基本認識&#xff1a;flask-admin是flask的擴張&#xff0c;主要用于對flask應用程序增加管理界面。 some notes&#xff1a; 在 BaseView 的子類中可以定義若干個視圖函數, 使用 Flask-Admin 的 expose 裝飾器來注冊函數為視圖, 這與一般的視圖…

java web 服務器環境搭建之jdk安裝

Java 部署環境搭建 一 安裝centos系統,安裝完成后用root用戶登錄 二 Java 環境安裝 下載jdk安裝包,使用以下命令下載安裝包,也可以在windows環境現在,在上傳到linux機器上curl -O -L http://download.oracle.com/otn-pub/java/jdk/8u191-b12/2787e4a523244c269598db4e85c51e0c/…

koa --- [MVC實現之四]Router、Controller、Service的實現

說明 上一篇: [MVC實現之三]上一篇實現了,Router層、Controller層、Service層的基本原則,并且成功的通過Mar類來傳遞這些層級之間需要的參數.這一篇主要是通過業務層面來具體實現: Router層:監聽頁面的路由,并調用Controller層的路由處理函數Controller層:給Router層提供服務,…

2017-2018-2 20179317 《網絡攻防技術》第七周學習心得體會

教材學習內容總結 課本第七章主要圍繞windows操作系統安全攻防技術進行講述&#xff0c;教材中主要涉及的攻擊內容如下&#xff1a; Windows操作系統的基本結構 運行于處理器特權模式的操作系統內核運行在處理器非特權模式的用戶空間代碼采用宏內核模式來進行構架 Windows操作系…

Jinja的基礎知識

Jinja的基礎知識 介紹&#xff1a;Jinja2 是一個現代的&#xff0c;設計者友好的&#xff0c;仿照 Django 模板的 Python 模板語言。 它速度快&#xff0c;被廣泛使用&#xff0c;并且提供了可選的沙箱模板執行環境保證安全 基本操作 變量&#xff1a;使用{{}}包圍 <a>…

PE文件格式詳解(二)

0x00 前言 上一篇講到了PE文件頭的中IMAGE_FILE_HEADER結構的第二個結構&#xff0c;今天從IMAGE_FILE_HEADER中第三個結構sizeOfOptionalHeader講起。這個字段的結構名也叫做IMAGE_OPTIONAL_HEDAER講起。 0x01 IMAGE_OPTIONAL_HEADER概述 其實這個結構是IMAGE_FILE_HEADER結構…

javascript --- [代碼優化]將復雜的函數分解寫異步請求數據的同步寫法

說明 今天優化項目結構,發現有如下一個函數 const drawMqiPie async (index) > {// 請求的參數let params {lineNo: lineNo,direct: 1,driveway: 1,pageNum: 0,pageSize: 0,computeRange: 3,detectDate: $(#detectYear).val() -01-01}// 請求的urllet url conf.URL s…

20165223《Java程序設計》第八周Java學習總結

教材學習內容總結 第12章-JAVA多線程機制 要點 Java中的線程Thread類與線程的創建線程的常用方法線程同步協調同步的線程線程聯合GUI線程計時器線程教材學習中的問題和解決過程 1. 進程與線程 程序&#xff1a;靜態的代碼&#xff0c;應用執行的藍本進程&#xff1a;程序的一次…

各種平臺的表達芯片跟mRNA-seq數據比較

各種平臺的表達芯片跟mRNA-seq數據比較 RNA-Seq 表達譜 芯片數據分析文章見&#xff1a;http://journals.plos.org/plosone ... ournal.pone.0078644指定的細胞系是&#xff1a;Human CCR6 CD4 memory T cell &#xff0c;測了6個時間點&#xff0c;共12個樣本表達芯片用的…

SQLAlchemy 一些基本操作

SQLAlchemy 一些基本操作 建表&#xff1a;db.create_all() 一次性創建全部的表 插入數據&#xff1a; ? 1、創建變量user User(username “hjj2”,password “1234”) ? 2、使用db.session.add(user)&#xff0c;添加到會話對象中 ? 3、使用db.session.commit()&am…

koa --- [MVC實現之五]Model層的實現

說明 上一篇: MVC實現之四這一篇主要介紹: 項目中用到的Sequelize庫中的一些方法,參考使用Sequelize連接mysql將Model層加入Mar類中 Service層 還是從業務出發,Service層是調用方,調用方式和Controller層調用Service層一樣 class Service {constructor(app) {const { model…

關于字符串 --java

這是在杭電上做一道水題時發現的&#xff0c;挺不錯&#xff0c;寫下了分享一下 http://acm.hdu.edu.cn/showproblem.php?pid2072 這里我用了兩種方法&#xff0c;參考大佬的&#xff0c;一個是list實現類&#xff0c;一個是用set框架 import java.util.*;public class Main {…

三元表達式 列表遞推 生成器表達式

#!/use/bin/python# -*- conding:utf-8 -*-# def my_max(x,y):# if x > y : #>必須緊湊# return x# else:# return y# x 10# y 20# res x if x>y else y# print(res)# name input(>>>:).strip()# res 漂亮小姐姐 if name 汪妍…

node --- 模擬事件的異步

事件 在前端瀏覽器最常見的就是頁面交互事件本質是發布/訂閱設計模式 目標 對象使用add方法訂閱事件。使用emit發布消息 訂閱事件 添加觸發事件的一個唯一字符串,以及對應的處理函數先初始化事件對象 class Event {constructor(){this.events {};} }訂閱在訂閱事件的時候,…