JavaWeb-LayUI框架的介紹與使用方式（前端框架篇）

LayUI

主要內(nèi)容

LayUI 的安裝及使用

LayUI 的介紹

? layui（諧音：類UI) 是一款采用自身模塊規(guī)范編寫的前端 UI 框架，遵循原生 HTML/CSS/JS 的書寫與組織形式，門檻極低，拿來即用。

? 由國人開發(fā)，16年出廠的框架，其主要提供了很多好看、方便的樣式，并且基本拿來即用，和Bootstrap有些相似，但該框架有個(gè)極大的好處就是定義了很多前后端交互的樣式接口，如分頁表格，只需在前端配置好接口，后端則按照定義好的接口規(guī)則返回?cái)?shù)據(jù)，即可完成頁面的展示，極大減少了后端人員的開發(fā)成本。

?

LayUI 的特點(diǎn)

（1）layui屬于輕量級框架，簡單美觀。適用于開發(fā)后端模式，它在服務(wù)端頁面上有非常好的效果。

（2）layui是提供給后端開發(fā)人員的ui框架，基于DOM驅(qū)動(dòng)。

下載與使用

  1. 在 官網(wǎng)首頁 下載到 layui 的最新版。目錄結(jié)構(gòu)如下：

     ├─css // css目錄
  │  │─modules // 模塊css目錄（一般如果模塊相對較大，我們會(huì)單獨(dú)提取，比如下面三個(gè)：）
  │  │  ├─laydate
  │  │  ├─layer
  │  │  └─layim
  │  └─layui.css // 核心樣式文件
  ├─font  // 字體圖標(biāo)目錄
  ├─images // 圖片資源目錄（目前只有l(wèi)ayim和編輯器用到的GIF表情）
  │─lay // 模塊核心目錄
  │  └─modules // 各模塊組件
  │─layui.js // 基礎(chǔ)核心庫
  └─layui.all.js // 包含layui.js和所有模塊的合并文件

  2. 獲得 layui 后，將其完整地部署（拷貝到項(xiàng)目中）到你的項(xiàng)目目錄，你只需要引入下述兩個(gè)文件：

./layui/css/layui.css
./layui/layui.js // 提示：如果是采用非模塊化方式，此處可換成：./layui/layui.all.js
  1. 基本的入門頁面
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>開始使用layui</title>
  <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>

<!-- 你的HTML代碼 -->

<script src="layui/layui.js"></script>
<script>
    // 模塊和回調(diào)函數(shù)
    // 一般直接寫在一個(gè)js文件中
    layui.use(['layer', 'form'], function(){
      var layer = layui.layer
      ,form = layui.form;

      layer.msg('Hello World');
    });
</script> 
</body>
</html>

  1. 還需要聲明需要使用的 模塊 和 回調(diào)函數(shù)。參照官方文檔，選擇自己想要的效果就行。

    比如：

    <script>
    // 注意：導(dǎo)航 依賴 element 模塊，否則無法進(jìn)行功能性操作
    layui.use('element', function(){
        var element = layui.element;

        //…
    });
</script>

頁面元素

布局

布局容器

固定寬度

將柵格放入一個(gè)帶有 class=“l(fā)ayui-container” 的特定的容器中，以便在小屏幕以上的設(shè)備中固定寬度，讓列可控。

<div class="layui-container">
  <div class="layui-row">
    ……
  </div>
</div>
完整寬度

可以不固定容器寬度。將柵格或其它元素放入一個(gè)帶有 class=“l(fā)ayui-fluid” 的容器中，那么寬度將不會(huì)固定，而是 100% 適應(yīng)

<div class="layui-fluid">
  ……
</div>

柵格系統(tǒng)

? 為了豐富網(wǎng)頁布局，簡化 HTML/CSS 代碼的耦合，并提升多終端的適配能力，layui 引進(jìn)了一套具備響應(yīng)式能力的柵格系統(tǒng)。將容器進(jìn)行了 12 等分，預(yù)設(shè)了 4*12 種 CSS 排列類，它們在移動(dòng)設(shè)備、平板、桌面中/大尺寸四種不同的屏幕下發(fā)揮著各自的作用。

柵格布局規(guī)則

  1. 采用 layui-row 來定義行，如：

    <div class="layui-row"></div>

  2. 采用類似 layui-col-md* 這樣的預(yù)設(shè)類來定義一組列（column），且放在行（row）內(nèi)。其中：

    • 變量 md 代表的是不同屏幕下的標(biāo)記
    • 變量 ***** 代表的是該列所占用的12等分?jǐn)?shù)（如6/12），可選值為 1 - 12
    • 如果多個(gè)列的“等分?jǐn)?shù)值”總和等于12，則剛好滿行排列。如果大于12，多余的列將自動(dòng)另起一行。

  3. 列可以同時(shí)出現(xiàn)最多四種不同的組合，分別是：xs（超小屏幕，如手機(jī)）、sm（小屏幕，如平板）、md（桌面中等屏幕）、lg（桌面大型屏幕）。

  4. 可對列追加類似 layui-col-space5、 layui-col-md-offset3 這樣的預(yù)設(shè)類來定義列的間距和偏移。

  5. 可以在列（column）元素中放入你自己的任意元素填充內(nèi)容

示例：

<h3>常規(guī)布局（以中型屏幕桌面為例）：</h3>
<div class="layui-row">
    <div class="layui-col-md9" style="background-color: #00F7DE;">
      你的內(nèi)容 9/12
    </div>
    <div class="layui-col-md3" style="background-color: rosybrown;">
      你的內(nèi)容 3/12
    </div>
</div>
響應(yīng)式規(guī)則

? 柵格的響應(yīng)式能力，得益于CSS3媒體查詢（Media Queries）的強(qiáng)力支持，從而針對四類不同尺寸的屏幕，進(jìn)行相應(yīng)的適配處理。

超小屏幕 (手機(jī)<768px) 小屏幕 (平板≥768px) 中等屏幕 (桌面≥992px) 大型屏幕(桌面≥1200px)
.layui-container的值 auto 750px 970px 1170px
標(biāo)記 xs sm md lg
列對應(yīng)類 * 為1-12的等分?jǐn)?shù)值 layui-col-xs* layui-col-sm* layui-col-md* layui-col-lg*
總列數(shù) 12 12 12 12
響應(yīng)行為 始終按設(shè)定的比例水平排列 在當(dāng)前屏幕下水平排列，如果屏幕大小低于臨界值則堆疊排列 在當(dāng)前屏幕下水平排列，如果屏幕大小低于臨界值則堆疊排列 在當(dāng)前屏幕下水平排列，如果屏幕大小低于臨界值則堆疊排列 
<h3>平板、桌面端的不同表現(xiàn)：</h3>
<div class="layui-row">
    <div class="layui-col-sm6 layui-col-md4"  
         style="background-color: thistle">
        平板≥768px：6/12 | 桌面端≥992px：4/12
    </div>
</div>

<div class="layui-row">     
    <div class="layui-col-sm4 layui-col-md6"  
         style="background-color: mediumaquamarine;">
        平板≥768px：4/12 | 桌面端≥992px：6/12
    </div>
</div>

<div class="layui-row">
    <div class="layui-col-sm12 layui-col-md8" 
         style="background-color: coral">
        平板≥768px：12/12 | 桌面端≥992px：8/12
    </div>
</div>
列邊距

? 通過“列間距”的預(yù)設(shè)類，來設(shè)定列之間的間距。且一行中最左的列不會(huì)出現(xiàn)左邊距，最右的列不會(huì)出現(xiàn)右邊距。列間距在保證排版美觀的同時(shí)，還可以進(jìn)一步保證分列的寬度精細(xì)程度。我們結(jié)合網(wǎng)頁常用的邊距，預(yù)設(shè)了 12 種不同尺寸的邊距，分別是：

/* 支持列之間為 1px-30px 區(qū)間的所有雙數(shù)間隔，以及 1px、5px、15px、25px 的單數(shù)間隔 */
layui-col-space1 
layui-col-space2 
layui-col-space4 
layui-col-space5 
layui-col-space6 
layui-col-space8 
layui-col-space10 
layui-col-space12 
layui-col-space14 
layui-col-space15 
layui-col-space16 
layui-col-space18 
layui-col-space20 
layui-col-space22 
layui-col-space24 
layui-col-space25 
layui-col-space26 
layui-col-space28 
layui-col-space30

示例：

<h3>列間距</h3>
<div class="layui-row layui-col-space10">
    <div class="layui-col-md4" >
        <!-- 需要在layui-col-md4里面再加一層div -->
        <div style="background-color: #009688;">
            1/3
        </div>
    </div>
    <div class="layui-col-md4">
        <div style="background-color: burlywood;">
            1/3
        </div>
    </div>
    <div class="layui-col-md4">
        <div style="background-color: silver;">
            1/3
        </div>
    </div>
</div>

注：

1\. layui-col-space：設(shè)置后不起作用主要是因?yàn)?*設(shè)置的是padding**,也就是說是**向內(nèi)縮**，所以設(shè)置背景色padding也是會(huì)添上顏色，看起來好像沒有間距一樣。可以在里面在加一個(gè)div，來達(dá)到目的。
2\. 間距一般不高于30px，如果超過30，建議使用列偏移。
列偏移

? 對列追加 類似 layui-col-md-offset* 的預(yù)設(shè)類，從而讓列向右偏移。其中 * 號代表的是偏移占據(jù)的列數(shù)，可選中為 1 - 12。
? 如：layui-col-md-offset3，即代表在“中型桌面屏幕”下，讓該列向右偏移 3 個(gè)列寬度

<h3>列偏移</h3>
<div class="layui-row">
    <div class="layui-col-md4" style="background-color: rosybrown;">
        4/12
    </div>
    <div class="layui-col-md4 layui-col-md-offset4" 
         style="background-color: cornflowerblue;">
        偏移4列，從而在最右
    </div>
</div>

? 注：列偏移可針對不同屏幕的標(biāo)準(zhǔn)進(jìn)行設(shè)定，在當(dāng)前設(shè)定的屏幕下有效，當(dāng)?shù)陀谧烂嫫聊坏囊?guī)定的臨界值，就會(huì)堆疊排列。

列嵌套

? 可以對柵格進(jìn)行無窮層次的嵌套。在列元素（layui-col-md）中插入行元素（layui-row*），即可完成嵌套。

<h3>列嵌套</h3>
<div class="layui-row layui-col-space5">
    <div class="layui-col-md5" style="background-color: thistle;">
        <div class="layui-row">
            <div class="layui-col-md3" style="background-color: burlywood;" >
                內(nèi)部列
            </div>
            <div class="layui-col-md5" style="background-color: indianred;">
                內(nèi)部列
            </div>
            <div class="layui-col-md4" style="background-color: mediumaquamarine;">
                內(nèi)部列
            </div>
        </div>
    </div>
</div>

基本元素

按鈕

用法

? 向任意HTML元素設(shè)定class=“l(fā)ayui-btn”，建立一個(gè)基礎(chǔ)按鈕。通過追加格式為layui-btn-{type}的class來定義其它按鈕風(fēng)格。

<!-- 基礎(chǔ)按鈕 -->
<button type="button" class="layui-btn">一個(gè)標(biāo)準(zhǔn)的按鈕</button>
<a  class="layui-btn">一個(gè)可跳轉(zhuǎn)的按鈕</a>
<div class="layui-btn">一個(gè)按鈕</div>
主題
名稱 組合
原始 class=“l(fā)ayui-btn layui-btn-primary”
默認(rèn) class=“l(fā)ayui-btn”
百搭 class=“l(fā)ayui-btn layui-btn-normal”
暖色 class=“l(fā)ayui-btn layui-btn-warm”
警告 class=“l(fā)ayui-btn layui-btn-danger”
禁用 class=“l(fā)ayui-btn layui-btn-disabled”

示例：

<!-- 不同主題的按鈕 -->
<button class="layui-btn">默認(rèn)按鈕</button>
<button class="layui-btn layui-btn-primary">原始按鈕</button> 
<button class="layui-btn layui-btn-normal">百搭按鈕</button>
<button class="layui-btn layui-btn-warm">暖色按鈕</button>
<button class="layui-btn layui-btn-danger">警告按鈕</button>
<button class="layui-btn layui-btn-disabled">禁用按鈕</button>
尺寸
尺寸 組合
大型 class=“l(fā)ayui-btn layui-btn-lg”
默認(rèn) class=“l(fā)ayui-btn”
小型 class=“l(fā)ayui-btn layui-btn-sm”
迷你 class=“l(fā)ayui-btn layui-btn-xs” 
<!-- 不同尺寸的按鈕 -->
<button class="layui-btn layui-btn-primary layui-btn-lg">大型</button> 
<button class="layui-btn">默認(rèn)</button>
<button class="layui-btn layui-btn-sm layui-btn-danger">小型</button>
<button class="layui-btn layui-btn-xs">迷你</button>
圓角

layui-btn-radius

<button class="layui-btn layui-btn-radius">默認(rèn)按鈕</button>
<button class="layui-btn layui-btn-primary layui-btn-radius">原始按鈕</button> 
<button class="layui-btn layui-btn-normal layui-btn-radius">百搭按鈕</button>
<button class="layui-btn layui-btn-warm layui-btn-radius">暖色按鈕</button>
<button class="layui-btn layui-btn-danger layui-btn-radius">警告按鈕</button>
<button class="layui-btn layui-btn-disabled layui-btn-radius">禁用按鈕</button>
圖標(biāo)
<button type="button" class="layui-btn">
    <i class="layui-icon">&#xe608;</i> 添加
</button>

<button type="button" class="layui-btn layui-btn-sm layui-btn-primary">
    <i class="layui-icon">&#x1002;</i> 刷新
</button>

導(dǎo)航

? 導(dǎo)航一般指頁面引導(dǎo)性頻道集合，多以菜單的形式呈現(xiàn)，可應(yīng)用于頭部和側(cè)邊。面包屑結(jié)構(gòu)簡單，支持自定義分隔符。

? 依賴加載模塊：element

實(shí)現(xiàn)步驟：

  1. 引入的資源

    <link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>

  2. 依賴加載模塊

    <script type="text/javascript">
    // 注意：導(dǎo)航 依賴 element 模塊，否則無法進(jìn)行功能性操作
    layui.use('element', function(){
        var element = layui.element;

    });
</script>

  3. 顯示指定類型的導(dǎo)航

水平導(dǎo)航
<ul class="layui-nav">
    <li class="layui-nav-item"><a href="">最新活動(dòng)</a></li>
    <li class="layui-nav-item layui-this"><a href="">產(chǎn)品</a></li>
    <li class="layui-nav-item"><a href="">大數(shù)據(jù)</a></li>
    <li class="layui-nav-item">
        <a href="javascript:;">解決方案</a>
        <dl class="layui-nav-child"> <!-- 二級菜單 -->
            <dd><a href="">移動(dòng)模塊</a></dd>
            <dd><a href="">后臺模版</a></dd>
            <dd><a href="">電商平臺</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item"><a href="">社區(qū)</a></li>
</ul>
垂直/側(cè)邊導(dǎo)航
<ul class="layui-nav layui-nav-tree" >
<!-- 側(cè)邊導(dǎo)航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
  <li class="layui-nav-item layui-nav-itemed">
    <a href="javascript:;">默認(rèn)展開</a>
    <dl class="layui-nav-child">
      <dd><a href="javascript:;">選項(xiàng)1</a></dd>
      <dd><a href="javascript:;">選項(xiàng)2</a></dd>
      <dd><a href="">跳轉(zhuǎn)</a></dd>
    </dl>
  </li>
  <li class="layui-nav-item">
    <a href="javascript:;">解決方案</a>
    <dl class="layui-nav-child">
      <dd><a href="">移動(dòng)模塊</a></dd>
      <dd><a href="">后臺模版</a></dd>
      <dd><a href="">電商平臺</a></dd>
    </dl>
  </li>
  <li class="layui-nav-item"><a href="">產(chǎn)品</a></li>
  <li class="layui-nav-item"><a href="">大數(shù)據(jù)</a></li>
</ul>

水平、垂直、側(cè)邊三個(gè)導(dǎo)航的HTML結(jié)構(gòu)是完全一樣的，不同的是：

水平導(dǎo)航：layui-nav
垂直導(dǎo)航需要追加class：layui-nav-tree
側(cè)邊導(dǎo)航需要追加class：layui-nav-tree layui-nav-side
導(dǎo)航主題

? 通過對導(dǎo)航追加CSS背景類，讓導(dǎo)航呈現(xiàn)不同的主題色

<!-- 如定義一個(gè)墨綠背景色的導(dǎo)航 -->
<ul class="layui-nav layui-bg-move" >
  …
</ul>

水平導(dǎo)航支持的其它背景主題有：layui-bg-cyan（藏青）、layui-bg-molv（墨綠）、layui-bg-blue（艷藍(lán)）
垂直導(dǎo)航支持的其它背景主題有：layui-bg-cyan（藏青）

面包屑
<span class="layui-breadcrumb">
  <a href="">首頁</a>
  <a href="">國際新聞</a>
  <a href="">亞太地區(qū)</a>
  <a><cite>正文</cite></a>
</span>

你還可以通過設(shè)置屬性 lay-separator="" 來自定義分隔符。例如：

<span class="layui-breadcrumb" lay-separator="-">
  <a href="">首頁</a>
  <a href="">國際新聞</a>
  <a href="">亞太地區(qū)</a>
  <a><cite>正文</cite></a>
</span>

選項(xiàng)卡

? 導(dǎo)航菜單可應(yīng)用于頭部和側(cè)邊，支持響應(yīng)式，支持刪除選項(xiàng)卡等功能。

? 依賴加載模塊：element

實(shí)現(xiàn)步驟

  1. 引入的資源

    <link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>

  2. 依賴加載模塊

    <script type="text/javascript">
    // 注意：選項(xiàng)卡 依賴 element 模塊，否則無法進(jìn)行功能性操作
    layui.use('element', function(){
        var element = layui.element;

    });
</script>

  3. 加載HTML

    <div class="layui-tab">
  <ul class="layui-tab-title">
    <li class="layui-this">網(wǎng)站設(shè)置</li>
    <li>用戶管理</li>
    <li>權(quán)限分配</li>
    <li>商品管理</li>
    <li>訂單管理</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">內(nèi)容1</div>
    <div class="layui-tab-item">內(nèi)容2</div>
    <div class="layui-tab-item">內(nèi)容3</div>
    <div class="layui-tab-item">內(nèi)容4</div>
    <div class="layui-tab-item">內(nèi)容5</div>
  </div>
</div>
選項(xiàng)卡風(fēng)格
默認(rèn)風(fēng)格：layui-tab
簡潔風(fēng)格需要追加class：layui-tab-brief
卡片風(fēng)格需要追加class：layui-tab-card
帶刪除的選項(xiàng)卡

可以對父層容器設(shè)置屬性 lay-allowClose=“true”來允許Tab選項(xiàng)卡被刪除

<div class="layui-tab" lay-allowClose="true">
  <ul class="layui-tab-title">
    <li class="layui-this">網(wǎng)站設(shè)置</li>
    <li>用戶管理</li>
    <li>權(quán)限分配</li>
    <li>商品管理</li>
    <li>訂單管理</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">內(nèi)容1</div>
    <div class="layui-tab-item">內(nèi)容2</div>
    <div class="layui-tab-item">內(nèi)容3</div>
    <div class="layui-tab-item">內(nèi)容4</div>
    <div class="layui-tab-item">內(nèi)容5</div>
  </div>
</div>

表格

常規(guī)用法
<table class="layui-table">
  <colgroup>
    <col width="150">
    <col width="200">
    <col>
  </colgroup>
  <thead>
    <tr>
      <th>昵稱</th>
      <th>加入時(shí)間</th>
      <th>簽名</th>
    </tr> 
  </thead>
  <tbody>
    <tr>
      <td>賢心</td>
      <td>2016-11-29</td>
      <td>人生就像是一場修行</td>
    </tr>
    <tr>
      <td>許閑心</td>
      <td>2016-11-28</td>
      <td>于千萬人之中遇見你所遇見的人，于千萬年之中，時(shí)間的無涯的荒野里…</td>
    </tr>
  </tbody>
</table>
基礎(chǔ)屬性
屬性名 屬性值 備注
lay-even 無 用于開啟 隔行 背景，可與其它屬性一起使用
lay-skin=“屬性值” line （行邊框風(fēng)格）

row （列邊框風(fēng)格）
nob （無邊框風(fēng)格） | 若使用默認(rèn)風(fēng)格不設(shè)置該屬性即可 |
| lay-size=“屬性值” | sm （小尺寸）
lg （大尺寸） | 若使用默認(rèn)尺寸不設(shè)置該屬性即可 |

你所需要的基礎(chǔ)屬性寫在table標(biāo)簽上，例如：

<!-- 一個(gè)帶有隔行背景，且行邊框風(fēng)格的大尺寸表格 -->
<table class="layui-table" lay-even lay-size="lg" lay-skin="row">
  <colgroup>
    <col width="150">
    <col width="200">
    <col>
  </colgroup>
  <thead>
    <tr>
      <th>昵稱</th>
      <th>加入時(shí)間</th>
      <th>簽名</th>
    </tr> 
  </thead>
  <tbody>
    <tr>
      <td>賢心</td>
      <td>2016-11-29</td>
      <td>人生就像是一場修行</td>
    </tr>
    <tr>
      <td>許閑心</td>
      <td>2016-11-28</td>
      <td>于千萬人之中遇見你所遇見的人，于千萬年之中，時(shí)間的無涯的荒野里…</td>
    </tr>
  </tbody>
</table>

表單

? 依賴加載模塊：form

  1. 在一個(gè)容器中設(shè)定 class=“l(fā)ayui-form” 來標(biāo)識一個(gè)表單元素塊

    <form class="layui-form" action="">

</form>

  2. 基本的行區(qū)塊結(jié)構(gòu)，它提供了響應(yīng)式的支持?？梢該Q成其他結(jié)構(gòu)，但必須要在外層容器中定義class=“l(fā)ayui-form”，form模塊才能正常工作。

    <div class="layui-form-item">
    <label class="layui-form-label">標(biāo)簽區(qū)域</label>
    <div class="layui-input-block">
        原始表單元素區(qū)域
    </div>
</div>
輸入框
<input type="text" name="title" required lay-verify="required" placeholder="請輸入標(biāo)題" autocomplete="off" class="layui-input" />

  • required：注冊瀏覽器所規(guī)定的必填字段

  • lay-verify：注冊form模塊需要驗(yàn)證的類型

  • class=“l(fā)ayui-input”：layui.css提供的通用CSS類

下拉選擇框
<select name="city" lay-verify="">
  <option value="">請選擇一個(gè)城市</option>
  <option value="010">北京</option>
  <option value="021">上海</option>
  <option value="0571">杭州</option>
</select>
  • 屬性selected可設(shè)定默認(rèn)項(xiàng)
  • 屬性disabled開啟禁用，select和option標(biāo)簽都支持
<select name="city" lay-verify="">
  <option value="010">北京</option>
  <option value="021" disabled>上海（禁用效果）</option>
  <option value="0571" selected>杭州</option>
</select>
  • 可以通過 optgroup 標(biāo)簽給select分組
<select name="quiz">
  <option value="">請選擇</option>
  <optgroup label="城市記憶">
    <option value="你工作的第一個(gè)城市">你工作的第一個(gè)城市？</option>
  </optgroup>
  <optgroup label="學(xué)生時(shí)代">
    <option value="你的工號">你的工號？</option>
    <option value="你最喜歡的老師">你最喜歡的老師？</option>
  </optgroup>
</select>
  • 通過設(shè)定屬性 lay-search 來開啟搜索匹配功能
<select name="city" lay-verify="" lay-search>
  <option value="010">layer</option>
  <option value="021">form</option>
  <option value="0571" selected>layim</option>
</select>
復(fù)選框
<h2>默認(rèn)風(fēng)格：</h2>
<input type="checkbox" name="" title="寫作" checked>
<input type="checkbox" name="" title="發(fā)呆"> 
<input type="checkbox" name="" title="禁用" disabled> 

<h2>原始風(fēng)格：</h2>
<input type="checkbox" name="" title="寫作" lay-skin="primary" checked>
<input type="checkbox" name="" title="發(fā)呆" lay-skin="primary"> 
<input type="checkbox" name="" title="禁用" lay-skin="primary" disabled>
  • 屬性title可自定義文本（溫馨提示：如果只想顯示復(fù)選框，可以不用設(shè)置title）
  • 屬性checked可設(shè)定默認(rèn)選中
  • 屬性lay-skin可設(shè)置復(fù)選框的風(fēng)格 （原始風(fēng)格：lay-skin=“primary”）
  • 設(shè)置value=“1”可自定義值，否則選中時(shí)返回的就是默認(rèn)的on
開關(guān)

將復(fù)選框checkbox，通過設(shè)定 lay-skin=“switch”形成了開關(guān)風(fēng)格

<input type="checkbox" name="xxx" lay-skin="switch">
<input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked>
<input type="checkbox" name="zzz" lay-skin="switch" lay-text="開啟|關(guān)閉">
<input type="checkbox" name="aaa" lay-skin="switch" disabled>
  • 屬性checked可設(shè)定默認(rèn)開
  • 屬性disabled開啟禁用
  • 屬性lay-text可自定義開關(guān)兩種狀態(tài)的文本 （兩種文本用 “|” 隔開）
  • 設(shè)置value=“1”可自定義值，否則選中時(shí)返回的就是默認(rèn)的on
單選框
<input type="radio" name="sex" value="nan" title="男">
<input type="radio" name="sex" value="nv" title="女" checked>
<input type="radio" name="sex" value="" title="中性" disabled>
  • 屬性title可自定義文本
  • 屬性disabled開啟禁用
  • 設(shè)置value=“xxx”可自定義值，否則選中時(shí)返回的就是默認(rèn)的on
文本域
<textarea name="remark" required lay-verify="required" placeholder="請輸入個(gè)人介紹" class="layui-textarea"></textarea>
  • class=“l(fā)ayui-textarea”：layui.css提供的通用CSS類
組裝行內(nèi)表單
<div class="layui-form-item">
    <div class="layui-inline">
        <label class="layui-form-label">范圍</label>
        <div class="layui-input-inline" style="width: 100px;">
          <input type="text" name="price_min" placeholder="￥" 
                 autocomplete="off" class="layui-input">
        </div>
        <div class="layui-form-mid">-</div>
        <div class="layui-input-inline" style="width: 100px;">
          <input type="text" name="price_max" placeholder="￥" 
                 autocomplete="off" class="layui-input">
        </div>
    </div>
</div>
  • class=“l(fā)ayui-inline”：定義外層行內(nèi)
  • class=“l(fā)ayui-input-inline”：定義內(nèi)層行內(nèi)
忽略美化渲染

? 可以對表單元素增加屬性 lay-ignore 設(shè)置后，將不會(huì)對該標(biāo)簽進(jìn)行美化渲染，即保留系統(tǒng)風(fēng)格。

<input type="radio" name="sex" value="nan" title="男" lay-ignore>
表單方框風(fēng)格

? 通過追加 layui-form-pane 的class，來設(shè)定表單的方框風(fēng)格。

<form class="layui-form layui-form-pane" action="">
  <!-- 
        內(nèi)部結(jié)構(gòu)都一樣，值得注意的是 復(fù)選框/開關(guān)/單選框 這些組合在該風(fēng)格下需要額外添加 pane屬性（否則     會(huì)看起來比較別扭），如： 
  -->
  <div class="layui-form-item" pane>
    <label class="layui-form-label">單選框</label>
    <div class="layui-input-block">
      <input type="radio" name="sex" value="男" title="男">
      <input type="radio" name="sex" value="女" title="女" checked>
    </div>
  </div>
</form>

組件示例

彈出層

模塊加載名稱：layer，獨(dú)立版本：layer.layui.com

使用場景

由于layer可以獨(dú)立使用，也可以通過Layui模塊化使用。所以請按照你的實(shí)際需求來選擇。

場景 用前準(zhǔn)備 調(diào)用方式
1. 作為獨(dú)立組件使用 如果你只是單獨(dú)想使用 layer，你可以去 layer 獨(dú)立版本官網(wǎng)下載組件包。你需要在你的頁面引入jQuery1.8以上的任意版本，并引入layer.js。 通過script標(biāo)簽引入layer.js后，直接用即可。
2. layui 模塊化使用 如果你使用的是 layui，那么你直接在官網(wǎng)下載 layui 框架即可，無需引入 jQuery 和 layer.js，但需要引入layui.css和layui.js 通過layui.use(‘layer’, callback)加載模塊

  1. 作為獨(dú)立組件使用 layer

    <!-- 引入好layer.js后，直接用即可 -->
<script src="layer.js"></script>
<script>
    layer.msg('hello'); 
</script>

  2. 在 layui 中使用 layer

    layui.use('layer', function(){
  var layer = layui.layer;

  layer.msg('hello');
});
基礎(chǔ)參數(shù)

  1. type - 基本層類型

    類型：Number，默認(rèn)：0

可傳入的值有：
    0（信息框，默認(rèn)）
    1（頁面層）
    2（iframe層）
    3（加載層）
    4（tips層）

  2. title - 標(biāo)題

    類型：String/Array/Boolean，默認(rèn)：'信息'

title支持三種類型的值：
    若傳入的是普通的字符串，如 title :'我是標(biāo)題'，那么只會(huì)改變標(biāo)題文本；
    若需要自定義樣式，可以title: ['文本', 'font-size:18px;']，數(shù)組第二項(xiàng)可以寫任意css樣式；
    若你不想顯示標(biāo)題欄，可以 title: false；

  3. content - 內(nèi)容

    類型：String/DOM/Array，默認(rèn)：''

content可傳入的值是靈活多變的，不僅可以傳入普通的html內(nèi)容，還可以指定DOM。


     /* 信息框 */
layer.open({
    type:0,
    title:"系統(tǒng)消息",
    // content可以傳入任意的文本或html
    content:"Hello"
});

/* 頁面層 */
layer.open({
    type:1,
    title:"系統(tǒng)消息",
    // content可以傳入任意的文本或html
    content:"<div style='height:100px;width:200px'>Hello</div>"
});

/* iframe */
layer.open({
    type:2,
    title:"系統(tǒng)消息",
    // content是一個(gè)URL，如果你不想讓iframe出現(xiàn)滾動(dòng)條，你還可以content: ['url', 'no']
    content:"http://www.baidu.com"
    // content:["http://www.baidu.com",'no']
});

 /* tips層 */
layer.open({
  type: 4,
  content: ['內(nèi)容', '#id'] //數(shù)組第二項(xiàng)即吸附元素選擇器或者DOM
});

  4. area - 寬高

    類型：String/Array，默認(rèn)：'auto'

在默認(rèn)狀態(tài)下，layer是寬高都自適應(yīng)的。
當(dāng)定義寬度時(shí)，你可以area: '500px'，高度仍然是自適應(yīng)的。
當(dāng)寬高都要定義時(shí)，你可以area: ['500px', '300px']。

  5. icon - 圖標(biāo)

    注：信息框和加載層的私有參數(shù)。

類型：Number，默認(rèn)：-1（信息框）/0（加載層）

信息框默認(rèn)不顯示圖標(biāo)。當(dāng)你想顯示圖標(biāo)時(shí)，默認(rèn)層可以傳入0-6。如果是加載層，可以傳入0-2。


    // eg1
layer.alert('酷斃了', {icon: 1});
// eg2
layer.msg('不開心。。', {icon: 5});
// eg3
layer.load(1); // 風(fēng)格1的加載

  6. 示例

    // eg1
layer.alert('很高興見到你??', {icon: 6});

// eg2
layer.msg('你愿意和我做朋友么？', {
    time: 0, //不自動(dòng)關(guān)閉
    btn: ['當(dāng)然愿意', '狠心拒絕'], // 按鈕
    yes: function(index){ 
        layer.close(index); // 關(guān)閉當(dāng)前彈出框
        layer.msg('新朋友，你好！', {
            icon: 6, // 圖標(biāo)
            btn: ['開心','快樂']
        });
    }
});

// eg3
layer.msg('這是常用的彈出層');

// eg4
layer.msg('So sad /(ㄒoㄒ)/~~', {icon: 5});

// eg5
layer.msg('玩命加載中...=￣ω￣=', function(){
    // 關(guān)閉后的操作
    layer.msg('(⊙o⊙)？');
});

日期與時(shí)間選擇

? 模塊加載名稱：laydate，獨(dú)立版本：http://www.layui.com/laydate/

? layDate 包含了大量的更新，其中主要以：年選擇器、年月選擇器、日期選擇器、時(shí)間選擇器、日期時(shí)間選擇器 五種類型的選擇方式。

快速使用

? 和 layer 一樣，可以在 layui 中使用 layDate，也可直接使用 layDate 獨(dú)立版，請按照實(shí)際需求來選擇。

場景 用前準(zhǔn)備 調(diào)用方式
1. layui 模塊化使用 下載 layui 后，引入layui.css和layui.js即可 通過layui.use(‘laydate’, callback)加載模塊后，再調(diào)用方法
2. 作為獨(dú)立組件使用 去 layDate 獨(dú)立版本官網(wǎng)下載組件包，引入 laydate.js 即可 直接調(diào)用方法使用

在layui模塊中使用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>日期與時(shí)間選擇</title>
        <link rel="stylesheet" href="layui/css/layui.css">
    </head>
    <body>
        <div class="layui-inline">
            <input type="text" class="layui-input" id="date1" />
        </div>
    </body>
    <script src="layui/layui.js"></script>
    <script type="text/javascript">
        layui.use('laydate', function(){
          var laydate = layui.laydate;

          //執(zhí)行一個(gè)laydate實(shí)例
          laydate.render({
            elem: '#date1' //指定元素
          });
        });
    </script>
</html>
基礎(chǔ)參數(shù)

  1. elem - 綁定元素

    類型：String/DOM，默認(rèn)值：無

必填項(xiàng)，用于綁定執(zhí)行日期渲染的元素，值一般為選擇器，或DOM對象


    laydate.render({ 
  elem: '#test' //或 elem: document.getElementById('test')、elem: lay('#test') 等
});

  2. type - 控件選擇類型

    類型：String，默認(rèn)值：date

用于單獨(dú)提供不同的選擇器類型，可選值如下表：
    type可選值 名稱 用途
    year 年選擇器 只提供年列表選擇
    month 年月選擇器 只提供年、月選擇
    date 日期選擇器 可選擇：年、月、日。type默認(rèn)值，一般可不填
    time 時(shí)間選擇器 只提供時(shí)、分、秒選擇
    datetime 日期時(shí)間選擇器 可選擇：年、月、日、時(shí)、分、秒 
    //年選擇器
laydate.render({ 
  elem: '#test'
  ,type: 'year'
});

//年月選擇器
laydate.render({ 
  elem: '#test'
  ,type: 'month'
});

//日期選擇器
laydate.render({ 
  elem: '#test'
  //,type: 'date' //默認(rèn)，可不填
});

//時(shí)間選擇器
laydate.render({ 
  elem: '#test'
  ,type: 'time'
});

//日期時(shí)間選擇器
laydate.render({ 
  elem: '#test'
  ,type: 'datetime'
});

  3. format - 自定義格式

    類型：String，默認(rèn)值：yyyy-MM-dd

通過日期時(shí)間各自的格式符和長度，來設(shè)定一個(gè)你所需要的日期格式。layDate 支持的格式如下：
    格式符 說明
    yyyy 年份，至少四位數(shù)。如果不足四位，則前面補(bǔ)零
    y 年份，不限制位數(shù)，即不管年份多少位，前面均不補(bǔ)零
    MM 月份，至少兩位數(shù)。如果不足兩位，則前面補(bǔ)零。
    M 月份，允許一位數(shù)。
    dd 日期，至少兩位數(shù)。如果不足兩位，則前面補(bǔ)零。
    d 日期，允許一位數(shù)。
    HH 小時(shí)，至少兩位數(shù)。如果不足兩位，則前面補(bǔ)零。
    H 小時(shí)，允許一位數(shù)。
    mm 分鐘，至少兩位數(shù)。如果不足兩位，則前面補(bǔ)零。
    m 分鐘，允許一位數(shù)。
    ss 秒數(shù)，至少兩位數(shù)。如果不足兩位，則前面補(bǔ)零。
    s 秒數(shù)，允許一位數(shù)。

    通過上述不同的格式符組合成一段日期時(shí)間字符串，可任意排版。

    //自定義日期格式
laydate.render({ 
  elem: '#test'
  ,format: 'yyyy年MM月dd日' //可任意組合
});

  4. value - 初始值

    類型：String，默認(rèn)值：new Date()

支持傳入符合format參數(shù)設(shè)定的日期格式字符，或者 new Date()


    // 傳入符合format格式的字符給初始值
laydate.render({ 
  elem: '#test'
  ,value: '2018-08-18' //必須遵循format參數(shù)設(shè)定的格式
});

// 傳入Date對象給初始值
laydate.render({ 
  elem: '#test'
  ,value: new Date(1534766888000) //參數(shù)即為：2018-08-20 20:08:08 的時(shí)間戳
});

分頁

? 模塊加載名稱：laypage

快速使用

? laypage 的使用非常簡單，指向一個(gè)用于存放分頁的容器，通過服務(wù)端得到一些初始值，即可完成分頁渲染。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>分頁</title>
        <link rel="stylesheet" href="layui/css/layui.css">
    </head>
    <body>
        <div id="test1"></div>
    </body>
    <script src="layui/layui.js"></script>
    <script type="text/javascript">
        layui.use('laypage', function(){
          var laypage = layui.laypage;

          //執(zhí)行一個(gè)laypage實(shí)例
          laypage.render({
            elem: 'test1' //注意，這里的 test1 是 ID，不用加 # 號
            ,count: 50 //數(shù)據(jù)總數(shù)，從服務(wù)端得到
          });
        });
    </script>
</html>
基礎(chǔ)參數(shù)

通過核心方法：laypage.render(options) 來設(shè)置基礎(chǔ)參數(shù)。

參數(shù)選項(xiàng) 說明 類型 默認(rèn)值
elem 指向存放分頁的容器，值可以是容器ID、DOM對象。如： 1. elem: ‘id’ 注意：這里不能加 # 號2. elem: document.getElementById(‘id’) String/Object -
count 數(shù)據(jù)總數(shù)。一般通過服務(wù)端得到 Number -
limit 每頁顯示的條數(shù)。laypage將會(huì)借助 count 和 limit 計(jì)算出分頁數(shù)。 Number 10
limits 每頁條數(shù)的選擇項(xiàng)。如果 layout 參數(shù)開啟了 limit，則會(huì)出現(xiàn)每頁條數(shù)的select選擇框 Array [10, 20, 30, 40, 50]
curr 起始頁。一般用于刷新類型的跳頁以及HASH跳頁。如：

// 開啟location.hash的記錄
laypage.render({
elem: ‘test1’ ,
count: 500 ,
// 獲取起始頁
curr: location.hash.replace(’#!fenye=’, ‘’)
// 自定義hash值
,hash: ‘fenye’
}); ` | Number | 1 |
| groups | 連續(xù)出現(xiàn)的頁碼個(gè)數(shù) | Number | 5 |
| prev | 自定義“上一頁”的內(nèi)容，支持傳入普通文本和HTML | String | 上一頁 |
| next | 自定義“下一頁”的內(nèi)容，同上 | String | 下一頁 |
| first | 自定義“首頁”的內(nèi)容，同上 | String | 1 |
| last | 自定義“尾頁”的內(nèi)容，同上 | String | 總頁數(shù)值 |
| layout | 自定義排版。可選值有：count（總條目輸區(qū)域）、prev（上一頁區(qū)域）、page（分頁區(qū)域）、next（下一頁區(qū)域）、limit（條目選項(xiàng)區(qū)域）、refresh（頁面刷新區(qū)域。注意：layui 2.3.0 新增） 、skip（快捷跳頁區(qū)域） | Array | [‘prev’, ‘page’, ‘next’] |
| theme | 自定義主題。支持傳入：顏色值，或任意普通字符。如： 1. theme: ‘#c00’ 2. theme: ‘xxx’ //將會(huì)生成 class=“l(fā)ayui-laypage-xxx” 的CSS類，以便自定義主題 | String | - |
| hash | 開啟location.hash，并自定義 hash 值。如果開啟，在觸發(fā)分頁時(shí)，會(huì)自動(dòng)對url追加：#!hash值={curr} 利用這個(gè)，可以在頁面載入時(shí)就定位到指定頁 | String/Boolean | false |

jump - 切換分頁的回調(diào)

當(dāng)分頁被切換時(shí)觸發(fā)，函數(shù)返回兩個(gè)參數(shù)：obj（當(dāng)前分頁的所有選項(xiàng)值）、first（是否首次，一般用于初始加載的判斷）

laypage.render({
    elem: 'page'
    ,count: 100 //數(shù)據(jù)總數(shù)，從服務(wù)端得到
    ,groups:10 // 連續(xù)出現(xiàn)的頁碼個(gè)數(shù)
    ,layout:['prev', 'page', 'next','limit','count'] // 自定義排版
    ,limits:[5,10,20] // layout屬性設(shè)置了limit值，可會(huì)出現(xiàn)條數(shù)下拉選擇框
    ,jump: function(obj, first){
        // obj包含了當(dāng)前分頁的所有參數(shù)，比如：
        console.log(obj.curr); //得到當(dāng)前頁，以便向服務(wù)端請求對應(yīng)頁的數(shù)據(jù)。
        console.log(obj.limit); //得到每頁顯示的條數(shù)

        //首次不執(zhí)行
        if(!first){
            //do something
        }
    }
});

數(shù)據(jù)表格

? 模塊加載名稱：table

快速使用

? 創(chuàng)建一個(gè)table實(shí)例最簡單的方式是，在頁面放置一個(gè)元素

，然后通過 table.render() 方法指定該容器。

<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8">
      <title>table數(shù)據(jù)表格</title>
      <link rel="stylesheet" href="layui/css/layui.css">
    </head>
    <body>
        <table id="demo"></table>
    </body>

    <script src="layui/layui.js" type="text/javascript" ></script>
    <script type="text/javascript">
        layui.use('table', function(){
          var table = layui.table;

          // 第一個(gè)實(shí)例
          table.render({
            elem: '#demo'
            ,url: 'user.json' // 數(shù)據(jù)接口
            ,cols: [[ // 表頭
              {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
              ,{field: 'username', title: '用戶名', width:80}
              ,{field: 'sex', title: '性別', width:80, sort: true}
              ,{field: 'city', title: '城市', width:80} 
              ,{field: 'sign', title: '簽名', width: 177}
            ]]
          });

        });
    </script>
</html>

數(shù)據(jù)接口 user.json

{
    "code": 0,
    "msg": "",
    "count": 50,
    "data": [{
            "id": 10000,
            "username": "user-0",
            "sex": "女",
            "city": "城市-0",
            "sign": "簽名-0"          
        },
        {
            "id": 10001,
            "username": "user-1",
            "sex": "男",
            "city": "城市-1",
            "sign": "簽名-1"
        },
        {
            "id": 10002,
            "username": "user-2",
            "sex": "女",
            "city": "城市-2",
            "sign": "簽名-2"
        },
        {
            "id": 10003,
            "username": "user-3",
            "sex": "女",
            "city": "城市-3",
            "sign": "簽名-3"
        },
        {
            "id": 10004,
            "username": "user-4",
            "sex": "男",
            "city": "城市-4",
            "sign": "簽名-4"
        }

    ]
}
三種初始化渲染方式
機(jī)制 適用場景
方法渲染 用JS方法的配置完成渲染 （推薦）無需寫過多的 HTML，在 JS 中指定原始元素，再設(shè)定各項(xiàng)參數(shù)即可。
自動(dòng)渲染 HTML配置，自動(dòng)渲染 無需寫過多 JS，可專注于 HTML 表頭部分
轉(zhuǎn)換靜態(tài)表格 轉(zhuǎn)化一段已有的表格元素 無需配置數(shù)據(jù)接口，在JS中指定表格元素，并簡單地給表頭加上自定義屬性即可
方法渲染

  1. 將基礎(chǔ)參數(shù)的設(shè)定放在了JS代碼中，且原始的 table 標(biāo)簽只需要一個(gè)選擇器

    <table id="demo"></table>

  2. 渲染表格

    layui.use('table', function(){
     var table = layui.table;

     // 執(zhí)行渲染
     table.render({
        elem: '#demo' // 指定原始表格元素選擇器（推薦id選擇器）
        ,url: 'user.json' // 數(shù)據(jù)接口
        ,height: 315 // 容器高度
        ,page:true // 開啟分頁
        ,cols: [[  // 設(shè)置表頭
            {field: 'id', title: 'ID'}
            ,{field: 'username', title: '用戶名'}
            ,{field: 'sex', title: '性別'}
        ]]
     });      
});

    注：table.render()方法返回一個(gè)對象：var tableIns = table.render(options)，可用于對當(dāng)前表格進(jìn)行“重載”等操作。

自動(dòng)渲染

? 在一段 table 容器中配置好相應(yīng)的參數(shù)，由 table 模塊內(nèi)部自動(dòng)對其完成渲染，而無需你寫初始的渲染方法。

? 1) 帶有 class=“l(fā)ayui-table” 的

標(biāo)簽。
? 2) 對標(biāo)簽設(shè)置屬性 lay-data="" 用于配置一些基礎(chǔ)參數(shù)
? 3) 在

| 標(biāo)簽中設(shè)置屬性lay-data=""用于配置表頭信息 |

<table class="layui-table" lay-data="{url:'user.json'}">
  <thead>
    <tr>
      <th lay-data="{field:'id'}">ID</th>
      <th lay-data="{field:'username'}">用戶名</th>
      <th lay-data="{field:'sex', sort: true}">性別</th>
    </tr>
  </thead>
</table>
轉(zhuǎn)換靜態(tài)表格

? 頁面已經(jīng)存在了一段有內(nèi)容的表格，由原始的table標(biāo)簽組成，只需要賦予它一些動(dòng)態(tài)元素。

<table lay-filter="demo">
    <thead>
        <tr>
            <th lay-data="{field:'username', width:100}">昵稱</th>
            <th lay-data="{field:'experience', width:80, sort:true}">積分</th>
            <th lay-data="{field:'sign'}">簽名</th>
        </tr> 
    </thead>
    <tbody>
        <tr>
            <td>賢心1</td>
            <td>66</td>
            <td>人生就像是一場修行a</td>
        </tr>
    </tbody>
</table>

執(zhí)行用于轉(zhuǎn)換表格的JS方法

layui.use('table', function(){
    var table = layui.table;

    // 轉(zhuǎn)換靜態(tài)表格
    table.init('demo', {
        height: 315 // 設(shè)置高度
        // 支持所有基礎(chǔ)參數(shù)
    }); 

});
基礎(chǔ)參數(shù)使用的場景
// 場景一：下述方法中的鍵值即為基礎(chǔ)參數(shù)項(xiàng)
table.render({
  height: 300
  ,url: 'user.json'
});

// 場景二：下述 lay-data 里面的內(nèi)容即為基礎(chǔ)參數(shù)項(xiàng)，切記：值要用單引號
<table lay-data="{height:300, url:'user.json'}" lay-filter="demo"> …… </table>

// 更多場景：下述 options 即為含有基礎(chǔ)參數(shù)項(xiàng)的對象
> table.init('filter', options); // 轉(zhuǎn)化靜態(tài)表格
> var tableObj = table.render({});
  tableObj.reload(options); // 重載表格
開啟分頁
<!-- HTML代碼 -->
<table id="demo"></table>


// JS實(shí)現(xiàn)代碼 
layui.use('table', function(){
    var table = layui.table;

    // 執(zhí)行渲染
    table.render({
        elem: '#demo' // 指定原始表格元素選擇器（推薦id選擇器）
        ,url: 'user.json' // 數(shù)據(jù)接口
        ,height: 315 // 容器高度
        ,page:true // 開啟分頁
        ,cols: [[  // 設(shè)置表頭
            {field: 'id', title: 'ID'}
            ,{field: 'username', title: '用戶名'}
            ,{field: 'sex', title: '性別'}
        ]]
    });   
});
開啟頭部工具欄
<table id="demo" lay-filter="demo"></table>

<!-- 表格工具欄 -->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <!-- lay-event 給元素綁定事件名 -->
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">
            獲取選中行數(shù)據(jù)
        </button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">
            獲取選中數(shù)目
        </button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">
            驗(yàn)證是否全選
        </button>
    </div>
</script>

<!-- 表頭工具欄 -->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">編輯</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">刪除</a>
</script>


layui.use('table', function(){
    var table = layui.table;

    // 執(zhí)行渲染
    table.render({
        elem: '#demo' // 指定原始表格元素選擇器（推薦id選擇器）
        ,url: 'user.json' // 數(shù)據(jù)接口
        ,height: 315 // 容器高度
        ,page:true // 開啟分頁
        ,cols: [[  // 設(shè)置表頭
            {field: 'id', title: 'ID'}
            ,{field: 'username', title: '用戶名'}
            ,{field: 'sex', title: '性別'}
            ,{title:'操作', toolbar: '#barDemo'} // 綁定表頭工具欄
        ]]
        ,toolbar: '#toolbarDemo' // 開啟頭部工具欄，并為其綁定左側(cè)模板
    });  

    /**
      * 頭工具欄事件
      * 語法：
            table.on('toolbar(demo)', function(obj){

            });
            注：demo表示選擇器元素上設(shè)置的lay-filter屬性值
      */
    table.on('toolbar(demo)', function(obj){
        // obj.config.id 當(dāng)前選擇器的id屬性值，即demo
        // 獲取當(dāng)前表格被選中的記錄對象，返回?cái)?shù)組
        var checkStatus = table.checkStatus(obj.config.id);
        // obj.event 得到當(dāng)前點(diǎn)擊元素的事件名
        switch(obj.event){ 
            case 'getCheckData':
                // 獲取被選中的記錄的數(shù)組
                var data = checkStatus.data;
                // 將數(shù)組數(shù)據(jù)解析成字符串
                layer.alert(JSON.stringify(data));
                break;
            case 'getCheckLength':
                var data = checkStatus.data;
                layer.msg('選中了：'+ data.length + ' 個(gè)');
                break;
            case 'isAll':
                // checkStatus.isAll 判斷記錄是否被全選
                layer.msg(checkStatus.isAll ? '全選': '未全選');
                break;
                // 自定義頭工具欄右側(cè)圖標(biāo) - 提示
            case 'LAYTABLE_TIPS':
                layer.alert('這是工具欄右側(cè)自定義的一個(gè)圖標(biāo)按鈕');
                break;
        };
    });

    /**
      * 監(jiān)聽行工具事件
      */
    table.on('tool(demo)', function(obj){
        // 得到當(dāng)前操作的tr的相關(guān)信息
        var data = obj.data;
        if(obj.event === 'del'){
            // 確認(rèn)框
            layer.confirm('真的刪除行么', function(index){
                // 刪除指定tr
                obj.del();
                // index 當(dāng)前彈出層的下標(biāo)，通過下標(biāo)關(guān)閉彈出層
                layer.close(index);
            });
        } else if(obj.event === 'edit'){
            // 輸入框
            layer.prompt({
                // 表單元素的類型 0=文本框 1=密碼框 2=文本域 
                formType: 0
                ,value: data.username 
            }, function(value, index){
                // 修改指定單元格的值
                // value表示輸入的值
                obj.update({
                    username: value
                });
                // 關(guān)閉彈出層
                layer.close(index);
            });
        }
    });

});
開啟單元格編輯
<table class="layui-table" lay-data="{url:'user.json', id:'demo'}" lay-filter="demo">
    <thead>
        <tr>
            <th lay-data="{type:'checkbox'}">ID</th>
            <th lay-data="{field:'id',  sort: true}">ID</th>
            <th lay-data="{field:'username', sort: true, edit: 'text'}">用戶名</th>
            <th lay-data="{field:'sex', edit: 'text'}">性別</th>
            <th lay-data="{field:'city', edit: 'text'}">城市</th>
            <th lay-data="{field:'experience', sort: true, edit: 'text'}">積分</th>
        </tr>
    </thead>
</table>


layui.use('table', function(){
    var table = layui.table;

    // 監(jiān)聽單元格編輯
    table.on('edit(demo)', function(obj){
        var value = obj.value // 得到修改后的值
        ,data = obj.data // 得到所在行所有鍵值
        ,field = obj.field; // 得到字段
        layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改為：'+ value);
    });

});
數(shù)據(jù)表格的重載
<div class="demoTable">
    搜索ID：
    <div class="layui-inline">
        <input class="layui-input" name="id" id="demoReload" autocomplete="off">
    </div>
    <button class="layui-btn" id="searchBtn">搜索</button>
</div>

<table class="layui-hide" id="demo" lay-filter="demo"></table> 


layui.use('table', function(){
    var table = layui.table;
    var $ = layui.jquery; // 獲取jquery對象

    // 執(zhí)行渲染
    table.render({
        elem: '#demo' // 指定原始表格元素選擇器（推薦id選擇器）
        ,url: 'user.json' // 數(shù)據(jù)接口
        ,page:true // 開啟分頁
        ,cols: [[  // 設(shè)置表頭
            {type: 'checkbox', fixed: 'left'} // 設(shè)置復(fù)選框
            ,{field: 'id', title: 'ID'}
            ,{field: 'username', title: '用戶名'}
            ,{field: 'sex', title: '性別'}
        ]]
    });  

    // 給指定元素綁定事件
    $(document).on('click', '#searchBtn', function(data) {
        // 獲取搜索框?qū)ο?        var demoReload = $('#demoReload');
        table.reload('demo', {
            where: { // 設(shè)定異步數(shù)據(jù)接口的額外參數(shù)，任意設(shè)
                id: demoReload.val()
            }
            ,page: {
                // 讓條件查詢從第一頁開始查詢，不寫則從當(dāng)前頁開始查詢，此頁之前的數(shù)據(jù)將不納入條件篩選
                curr: 1 // 重新從第 1 頁開始
            }
        }); // 只重載數(shù)據(jù)
    });
});
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容