【前端】layui前端框架學(xué)習(xí)筆記

這篇具有很好參考價(jià)值的文章主要介紹了【前端】layui前端框架學(xué)習(xí)筆記。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

【前端目錄貼】
參考視頻:LayUI
參考筆記:https://blog.csdn.net/qq_61313896/category_12432291.html

1.介紹

官網(wǎng)：http://layui.apixx.net/index.html

國(guó)人16年開發(fā)的框架,拿來即用,門檻低
…

2. LayUi的安裝及使用

Layui 是一套開源的 Web UI 組件庫，采用自身輕量級(jí)模塊化規(guī)范，遵循原生態(tài)的 HTML/CSS/JavaScript 開發(fā)模式，極易上手，拿來即用。其風(fēng)格簡(jiǎn)約輕盈，而內(nèi)在雅致豐盈，甚至包括文檔在內(nèi)的每一處細(xì)節(jié)都經(jīng)過精心雕琢，非常適合網(wǎng)頁界面的快速構(gòu)建。Layui 區(qū)別于一眾主流的前端框架，卻并非逆道而行，而是信奉返璞歸真之道。確切地說，它更多是面向于追求簡(jiǎn)單的務(wù)實(shí)主義者，即無需涉足各類構(gòu)建工具，只需面向?yàn)g覽器本身，便可將頁面所需呈現(xiàn)的元素與交互信手拈來，常用來當(dāng)做后臺(tái)管理系統(tǒng)的框架

2.1 LayUi的特點(diǎn)

原生態(tài)開發(fā)

輕量級(jí)模塊化

外簡(jiǎn)內(nèi)豐

開箱即用

2.2 安裝和使用

官網(wǎng)下載,本地引入核心css和核心js
測(cè)試html如下

<!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-v2.6.8/layui/css/layui.css">
    <script src="./layui-v2.6.8/layui/layui.js"></script>
</head>
<body>
<!-- 你的 HTML 代碼 -->
<script>
    layui.use(['layer', 'form'], function(){
        var layer = layui.layer
            ,form = layui.form;

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

3. 頁面元素

3.1 布局

3.1.1 布局容器

3.1.1.1 固定寬度

 <!--固定寬度(兩側(cè)有留白效果)-->
<div  class="layui-container" style="background-color:navajowhite;height: 300px">
    固定寬度
</div>

3.1.1.2 完整寬度

<!--完整寬度(占據(jù)屏幕的100%)-->
<div class="layui-fluid" style="background-color:yellow;height: 300px">
   完整寬度
</div>

3.1.2 柵格系統(tǒng)

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

3.1.2.1 柵格布局規(guī)則：

【前端】layui前端框架學(xué)習(xí)筆記,前端,layui,javascript

3.1.2.2 響應(yīng)式規(guī)則

柵格會(huì)根據(jù)屏幕的分辨率選擇對(duì)應(yīng)的樣式效果

【前端】layui前端框架學(xué)習(xí)筆記,前端,layui,javascript

3.1.2.3 列間距

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

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
layui-col-space32
<p>即：支持列之間為 1px-32px 區(qū)間的所有雙數(shù)間隔，以及 1px、5px、15px、25px 的單數(shù)間隔</p>
·如果需要的間距高于30px（一般不常見），請(qǐng)采用偏移，下文繼續(xù)講解·

3.1.2.4 列偏移

對(duì)列追加類似 layui-col-md-offset* 的預(yù)設(shè)類，從而讓列向右偏移。其中 * 號(hào)代表的是偏移占據(jù)的列數(shù)，可選中為 1 - 12。

3.1.2.5 列嵌套

理論上，你可以對(duì)柵格進(jìn)行無窮層次的嵌套，這更加增強(qiáng)了柵格的表現(xiàn)能力。而嵌套的使用非常簡(jiǎn)單。在列元素（layui-col-md*）中插入一個(gè)行元素（layui-row），即可完成嵌套。下面是一個(gè)簡(jiǎn)單的例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>布局容器</title>
    <!--引入核心css文件-->
    <link rel="stylesheet"  href="./layui/css/layui.css">

</head>
<body>
<!--布局容器-->
<div class="layui-container">
<!--
    柵格系統(tǒng)
    1.定義行.layui-row
    2.定義列 .layui-col-md*
        md:表示不同屏幕的表示（xs,sm,md,lg)
        * 表示列的數(shù)量
    3.每一行被均分為12列，列的總數(shù)不能超過12，否則會(huì)自動(dòng)換行
    4.響應(yīng)式規(guī)則，柵格會(huì)根據(jù)屏幕的分辨率選擇對(duì)應(yīng)的樣式效果
    5.列邊距 . layui-col-space*
        * 表示px值（1-30）
    6.列偏移 . layui-col-md-offset*
            * 代表的是右偏移占據(jù)的列數(shù)
    7.列嵌套
        列中可以無限嵌套列


-->
    <!--定義行-->
    <div class="layui-row" >
        <!--定義列-->
        <div class="layui-col-md5" style="background-color: yellow">
            內(nèi)容5/12
        </div>
        <div class="layui-col-md7" style="background-color: #00f7de">
            內(nèi)容7/12
        </div>
    </div>
    <!--定義行-->
    <div class="layui-row" >
        <!--定義列-->
        <div class="layui-col-md4" style="background-color:rebeccapurple">
            內(nèi)容4/12
        </div>
        <div class="layui-col-md4" style="background-color: red">
            內(nèi)容4/12
        </div>
        <div class="layui-col-md5" style="background-color: blue">
            內(nèi)容5/12
        </div>
    </div>

    <hr/>
<!--    響應(yīng)式規(guī)則-->
    <div class="layui-row">
        <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
            <div class="grid-demo grid-demo-bg1">xs:6/12 | sm:6/12 | md:4/12</div>
        </div>
        <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
            <div class="grid-demo layui-bg-red">xs:6/12 | sm:6/12 | md:4/12</div>
        </div>
        <div class="layui-col-xs4 layui-col-sm12 layui-col-md4">
            <div class="grid-demo layui-bg-blue">xs:4/12 | sm:12/12 | md:4/12</div>
        </div>
        <div class="layui-col-xs4 layui-col-sm7 layui-col-md8">
            <div class="grid-demo layui-bg-green">xs:4/12 | sm:7/12 | md:8/12</div>
        </div>
        <div class="layui-col-xs4 layui-col-sm5 layui-col-md4">
            <div class="grid-demo layui-bg-black">xs:4/12 | sm:5/12 | md:4/12</div>
        </div>
    </div>

    <hr>
    <h3>列間距</h3>
    <div class="layui-row layui-col-space30">
        <div class="layui-col-md4" >
            <div style="background-color: blue">1/3</div>
        </div>
        <div class="layui-col-md4" >
            <div style="background-color: blue">1/3</div>
        </div>
        <div class="layui-col-md4" >
            <div style="background-color: purple">1/3</div>
        </div>
    </div>

    <h3>列偏移</h3>
    <div class="layui-row">
        <div class="layui-col-md4" >
            <div style="background-color: blue">4/12</div>
        </div>
        <div class="layui-col-md4 layui-col-md-offset3" >
            <div style="background-color: red">4/12</div>
        </div>
    </div>

    <hr>
    <h3>列嵌套</h3>
    <div class="layui-row">
        <div class="layui-col-md6" style="background-color: red">
            <div class="layui-row" >
                <!--定義列-->
                <div class="layui-col-md4" style="background-color:rebeccapurple">
                    內(nèi)容4/12
                </div>
                <div class="layui-col-md4" style="background-color: red">
                    內(nèi)容4/12
                </div>
                <div class="layui-col-md4" style="background-color: blue">
                    內(nèi)容5/12
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

3.2 基本元素

3.2.1 按鈕

向任意HTML元素設(shè)定class="layui-btn"，建立一個(gè)基礎(chǔ)按鈕。通過追加格式為layui-btn-{type}的class來定義其它按鈕風(fēng)格。內(nèi)置的按鈕class可以進(jìn)行任意組合，從而形成更多種按鈕風(fēng)格。

3.2.1.1 主題

【前端】layui前端框架學(xué)習(xí)筆記,前端,layui,javascript

名稱	組合
原始	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”

3.2.1.2 尺寸

【前端】layui前端框架學(xué)習(xí)筆記,前端,layui,javascript

尺寸	組合
大型	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”

3.2.1.3 圓角

【前端】layui前端框架學(xué)習(xí)筆記,前端,layui,javascript

主題	組合
原始	class=“l(fā)ayui-btn layui-btn-radius layui-btn-primary”
默認(rèn)	class=“l(fā)ayui-btn layui-btn-radius”
百搭	class=“l(fā)ayui-btn layui-btn-radius layui-btn-normal”
暖色	class=“l(fā)ayui-btn layui-btn-radius layui-btn-warm”
警告	class=“l(fā)ayui-btn layui-btn-radius layui-btn-danger”
禁用	class=“l(fā)ayui-btn layui-btn-radius layui-btn-disabled”

3.2.1.4 圖標(biāo)

【前端】layui前端框架學(xué)習(xí)筆記,前端,layui,javascript

溫馨提示：各種圖標(biāo)字體請(qǐng)移步(**官網(wǎng)**)文檔左側(cè)【頁面元素 - 圖標(biāo)】閱覽

<button type="button" class="layui-btn">
  <i class="layui-icon layui-icon-down layui-font-12"></i> 按鈕
</button>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>布局容器</title>
    <!--引入核心css文件-->
    <link rel="stylesheet" href="./layui/css/layui.css">

</head>
<body>
<!--基礎(chǔ)按鈕-->
<button type="button" class="layui-btn">一個(gè)標(biāo)準(zhǔn)的按鈕</button>
<a href="http://baidu.com" class="layui-btn">一個(gè)可跳轉(zhuǎn)的按鈕</a>
<div class="layui-btn">一個(gè)按鈕</div>

<hr/>
<!-- 不同主題按鈕-->
<div>
    <button type="button" class="layui-btn layui-btn-primary">原始按鈕</button>
    <button type="button" class="layui-btn">默認(rèn)按鈕</button>
    <button type="button" class="layui-btn layui-btn-normal">百搭按鈕</button>
    <button type="button" class="layui-btn layui-btn-warm">暖色按鈕</button>
    <button type="button" class="layui-btn layui-btn-danger">警告按鈕</button>
    <button type="button" class="layui-btn layui-btn-disabled">禁用按鈕</button>
</div>

<hr/>
<!-- 不同尺寸按鈕-->
<div>
    <div class="layui-btn-container">
        <button type="button" class="layui-btn layui-btn-primary layui-btn-lg">大型按鈕</button>
        <button type="button" class="layui-btn layui-btn-primary">默認(rèn)按鈕</button>
        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">小型按鈕</button>
        <button type="button" class="layui-btn layui-btn-primary layui-btn-xs">迷你按鈕</button>
    </div>
</div>

<hr/>
<!--    圓角-->
<div class="layui-btn-container">
    <button type="button" class="layui-btn layui-btn-primary layui-btn-radius">原始按鈕</button>
    <button type="button" class="layui-btn layui-btn-radius">默認(rèn)按鈕</button>
    <button type="button" class="layui-btn layui-btn-normal layui-btn-radius">百搭按鈕</button>
    <button type="button" class="layui-btn layui-btn-warm layui-btn-radius">暖色按鈕</button>
    <button type="button" class="layui-btn layui-btn-danger layui-btn-radius">警告按鈕</button>
    <button type="button" class="layui-btn layui-btn-disabled layui-btn-radius">禁用按鈕</button>
</div>
<hr/>
<!--圖標(biāo)-->
<!--從 layui 2.3.0 開始，支持 font-class 的形式定義圖標(biāo)：-->
<i class="layui-icon layui-icon-face-smile"></i>
<!--注意：在 layui 2.3.0 之前的版本，只能設(shè)置 unicode 來定義圖標(biāo)-->
<i class="layui-icon">&#xe60c;</i>

<button type="button" class="layui-btn">
    <i class="layui-icon layui-icon-face-smile"></i>按鈕
</button>
</body>
</html>

3.2.2 導(dǎo)航

導(dǎo)航一般指頁面引導(dǎo)性頻道集合,多以菜單的形式呈現(xiàn),可用于頭部和側(cè)邊,面包屑結(jié)構(gòu)簡(jiǎn)單,支持自定義分隔符
依賴加載模塊: element

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

引入資源

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

依賴加載模塊

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

3.2.2.1 水平導(dǎo)航

水平導(dǎo)航: layui-nav
當(dāng)前被選中項(xiàng): layui-this
二級(jí)菜單: layui-nav-child

3.2.2.2 垂直/側(cè)邊導(dǎo)航

垂直導(dǎo)航: layui-nav layui-nav-tree
側(cè)邊導(dǎo)航: layui-nav layui-nav-tree layui-nav-side

3.2.2.3 導(dǎo)航主題

顏色:layui-bg-cyan（藏青）、layui-bg-molv（墨綠）、layui-bg-blue（艷藍(lán)）
徽章:

3.2.2.4 面包屑

面包屑導(dǎo)航: layui-breadcrumb
自定義分隔符: lay-separator="-"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>布局容器</title>
    <!--引入核心css文件-->
    <link rel="stylesheet" href="./layui/css/layui.css">
    <script src="layui/layui.js"></script>

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

        //…
    });
</script>
<!--<hr/>-->
<!--<h3>水平導(dǎo)航</h3>-->
<!--<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"> &lt;!&ndash; 二級(jí)菜單 &ndash;&gt;-->
<!--            <dd><a href="">移動(dòng)模塊</a></dd>-->
<!--            <dd><a href="">后臺(tái)模版</a></dd>-->
<!--            <dd><a href="">電商平臺(tái)</a></dd>-->
<!--        </dl>-->
<!--    </li>-->
<!--    <li class="layui-nav-item"><a href="">社區(qū)</a></li>-->
<!--</ul>-->

<!--<hr/>-->
<!--<h3>垂直導(dǎo)航</h3>-->
<!--<ul class="layui-nav  layui-nav-tree">-->
<!--    <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"> &lt;!&ndash; 二級(jí)菜單 &ndash;&gt;-->
<!--            <dd><a href="">移動(dòng)模塊</a></dd>-->
<!--            <dd><a href="">后臺(tái)模版</a></dd>-->
<!--            <dd><a href="">電商平臺(tái)</a></dd>-->
<!--        </dl>-->
<!--    </li>-->
<!--    <li class="layui-nav-item"><a href="">社區(qū)</a></li>-->
<!--</ul>-->
<!--<h3>側(cè)邊導(dǎo)航</h3>-->
<!--<ul class="layui-nav  layui-nav-tree layui-nav-side">-->
<!--    <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"> &lt;!&ndash; 二級(jí)菜單 &ndash;&gt;-->
<!--            <dd><a href="">移動(dòng)模塊</a></dd>-->
<!--            <dd><a href="">后臺(tái)模版</a></dd>-->
<!--            <dd><a href="">電商平臺(tái)</a></dd>-->
<!--        </dl>-->
<!--    </li>-->
<!--    <li class="layui-nav-item"><a href="">社區(qū)</a></li>-->
<!--</ul>-->

<!--<h3>主題:顏色,徽章</h3>-->
<!--<ul class="layui-nav  layui-nav-tree layui-nav-side layui-bg-red">-->
<!--    <li class="layui-nav-item"><a href="">最新活動(dòng)</a></li>-->
<!--    <li class="layui-nav-item layui-this"><a href="">產(chǎn)品<span class="layui-badge">6</span></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"> &lt;!&ndash; 二級(jí)菜單 &ndash;&gt;-->
<!--            <dd><a href="">移動(dòng)模塊</a></dd>-->
<!--            <dd><a href="">后臺(tái)模版</a></dd>-->
<!--            <dd><a href="">電商平臺(tái)</a></dd>-->
<!--        </dl>-->
<!--    </li>-->
<!--    <li class="layui-nav-item"><a href="">社區(qū)</a></li>-->
<!--</ul>-->

<!--lay-separator 自定義分隔符-->
<h3>面包屑導(dǎo)航</h3>
<span class="layui-breadcrumb" lay-separator="-">
  <a href="">首頁</a>
  <a href="">國(guó)際新聞</a>
  <a href="">亞太地區(qū)</a>
  <a><cite>正文</cite></a>
</ul>
</span>
</body>
</html>

3.2.3 選項(xiàng)卡

導(dǎo)航菜單可應(yīng)用于頭部和側(cè)邊，Tab選項(xiàng)卡提供多套風(fēng)格，支持響應(yīng)式，支持刪除選項(xiàng)卡等功能。面包屑結(jié)構(gòu)簡(jiǎn)單，支持自定義分隔符。
依賴加載組件：element （請(qǐng)注意：必須加載element模塊，相關(guān)功能才能正常使用，詳見：內(nèi)置組件 - 常用元素操作）

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

引入資源

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

依賴加載模塊

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

3.2.3.1 默認(rèn)Tab選項(xiàng)卡

默認(rèn)Tab選項(xiàng)卡: layui-tab
選項(xiàng)卡內(nèi)容: layui-tab-content

3.2.3.2 Tab簡(jiǎn)潔風(fēng)格

Tab簡(jiǎn)潔風(fēng)格: layui-tab layui-tab-brief

3.2.3.3 Tab卡片風(fēng)格

Tab卡片風(fēng)格: layui-tab layui-tab-card

3.2.3.4 帶刪除的Tab

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

3.2.4 表格

3.2.4.1 靜態(tài)表格

layui-table

3.2.4.2 基礎(chǔ)屬性

【前端】layui前端框架學(xué)習(xí)筆記,前端,layui,javascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>布局容器</title>
    <!--引入核心css文件-->
    <link rel="stylesheet" href="./layui/css/layui.css">

</head>
<body>
<!--基本樣例-->
<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>人生就像是一場(chǎng)修行</td>
    </tr>
    <tr>
        <td>許閑心</td>
        <td>2016-11-28</td>
        <td>于千萬人之中遇見你所遇見的人，于千萬年之中，時(shí)間的無涯的荒野里…</td>
    </tr>
    </tbody>
</table>

<!--基礎(chǔ)屬性-->
<table class="layui-table" lay-even lay-skin="line" lay-size="sm">
<!--<table class="layui-table" lay-even lay-skin="row">-->
<!--<table class="layui-table" lay-even lay-skin="nob">-->
    <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>人生就像是一場(chǎng)修行</td>
    </tr>
    <tr>
        <td>許閑心</td>
        <td>2016-11-28</td>
        <td>于千萬人之中遇見你所遇見的人，于千萬年之中，時(shí)間的無涯的荒野里…</td>
    </tr>
    <tr>
        <td>賢心</td>
        <td>2016-11-29</td>
        <td>人生就像是一場(chǎng)修行</td>
    </tr>
    <tr>
        <td>許閑心</td>
        <td>2016-11-28</td>
        <td>于千萬人之中遇見你所遇見的人，于千萬年之中，時(shí)間的無涯的荒野里…</td>
    </tr>
    <tr>
        <td>賢心</td>
        <td>2016-11-29</td>
        <td>人生就像是一場(chǎng)修行</td>
    </tr>
    <tr>
        <td>許閑心</td>
        <td>2016-11-28</td>
        <td>于千萬人之中遇見你所遇見的人，于千萬年之中，時(shí)間的無涯的荒野里…</td>
    </tr>
    </tbody>
</table>
</body>
</html>

3.2.5 表單

在一個(gè)容器中設(shè)定 class=“layui-form” 來標(biāo)識(shí)一個(gè)表單元素塊，通過規(guī)范好的HTML結(jié)構(gòu)及CSS類，來組裝成各式各樣的表單元素，并通過內(nèi)置的 form模塊來完成各種交互。
依賴加載模塊：form （請(qǐng)注意：如果不加載form模塊，select、checkbox、radio等將無法顯示，并且無法使用form相關(guān)功能）

layui-form

3.2.5.1 基本結(jié)構(gòu)

<div class="layui-form-item">
  <label class="layui-form-label">標(biāo)簽區(qū)域</label>
  <div class="layui-input-block">
    原始表單元素區(qū)域
  </div>
</div>

常用屬性
required：注冊(cè)瀏覽器所規(guī)定的必填字段
lay-verify：注冊(cè)form模塊需要驗(yàn)證的類型
layui-input-block 占據(jù)整行寬度
layui-input-inline 不會(huì)占據(jù)部分寬度

3.2.5.2 文本框

<input type="text" name="title" required lay-verify="required" placeholder="請(qǐng)輸入標(biāo)題" autocomplete="off" class="layui-input">

autocomplete是否自動(dòng)填充（當(dāng)瀏覽器緩存中存在相同的name屬性時(shí)，會(huì)填充）
placeholder 為空時(shí),默認(rèn)顯示的文本信息
class="layui-input"：layui.css提供的通用CSS類

3.2.5.3 下拉選擇框

optgroup 標(biāo)簽給select分組
通過selected屬性設(shè)置默認(rèn)選中項(xiàng)
disabled禁用該選擇:可可以設(shè)置select和option標(biāo)簽(禁用下拉框和禁用下拉選項(xiàng))
lay-search 來開啟搜索匹配功能

 <!--下拉選擇框-->
    <!--第一項(xiàng)主要是占個(gè)坑，讓form模塊預(yù)留“請(qǐng)選擇”的提示空間，否則將會(huì)把第一項(xiàng)（存在value值）作為默認(rèn)選中項(xiàng)。你可以在option的空值項(xiàng)中自定義文本，如：請(qǐng)選擇分類。-->
    <div class="layui-form-item">
        <label class="layui-form-label">我是下拉選擇框</label>
        <div class="layui-input-inline">
            <!--通過selected屬性設(shè)置默認(rèn)選中項(xiàng)-->
            <!--disabled禁用該選擇:可以針對(duì)所有選擇,也可以針對(duì)單個(gè)item-->
            <!--<select name="city" lay-verify="required" disabled>-->
            <select name="city" lay-verify="required">
                <option value="">請(qǐng)選擇一個(gè)城市</option>
                <option value="010" selected>北京</option>
                <option value="021">上海</option>
                <option value="0571" disabled>杭州</option>
            </select>

            <select name="quiz" lay-verify="required">
                <option value="">請(qǐng)選擇</option>
                <optgroup label="城市記憶">
                    <option value="你工作的第一個(gè)城市" selected>你工作的第一個(gè)城市？</option>
                </optgroup>
                <optgroup label="學(xué)生時(shí)代">
                    <option value="你的工號(hào)">你的工號(hào)？</option>
                    <option value="你最喜歡的老師">你最喜歡的老師？</option>
                </optgroup>
            </select>
            <select name="city" lay-search>
                <option value="">請(qǐng)選擇一個(gè)城市</option>
                <option value="010">你好啊北京,hello</option>
                <option value="021" selected>上海</option>
                <option value="0571" disabled>杭州</option>
            </select>
        </div>
    </div>

【前端】layui前端框架學(xué)習(xí)筆記,前端,layui,javascript

3.2.5.3 復(fù)選框

屬性title可自定義文本（溫馨提示：如果只想顯示復(fù)選框，可以不用設(shè)置title）
屬性checked可設(shè)定默認(rèn)選中
屬性lay-skin可設(shè)置復(fù)選框的風(fēng)格
設(shè)置value="1"可自定義值，否則選中時(shí)返回的就是默認(rèn)的on+

  <div class="layui-form-item">
        <label class="layui-form-label">標(biāo)簽區(qū)域22</label>
        <div class="layui-input-block">
            <!--默認(rèn)風(fēng)格：-->
            <input type="checkbox" name="hobby" title="寫作" checked>
            <input type="checkbox" name="hobby" title="發(fā)呆">
            <input type="checkbox" name="hobby" title="禁用" disabled>
            <!--原始風(fēng)格：-->
            <hr/>
            <input type="checkbox" name="hobby" title="寫作" lay-skin="primary" checked>
            <input type="checkbox" name="hobby" title="發(fā)呆" lay-skin="primary">
            <input type="checkbox" name="hobby" title="禁用" lay-skin="primary" disabled>
        </div>
    </div>

3.2.5.5 開關(guān)

其實(shí)就是checkbox復(fù)選框的“變種”，通過設(shè)定 lay-skin="switch" 形成了開關(guān)風(fēng)格
屬性checked可設(shè)定默認(rèn)開
屬性disabled開啟禁用
屬性lay-text可自定義開關(guān)兩種狀態(tài)的文本
設(shè)置value="1"可自定義值，否則選中時(shí)返回的就是默認(rèn)的on

<!--開關(guān)-->
    <div class="layui-form-item">
        <label class="layui-form-label">標(biāo)簽區(qū)域22</label>
        <div class="layui-input-block">
            <!--默認(rèn)風(fēng)格：-->
            <input type="checkbox" name="xxx" lay-skin="switch" lay-text="開/關(guān)閉">
            <input type="checkbox" name="yyy" lay-skin="switch" checked disabled>
            <input type="checkbox" name="zzz" lay-skin="switch" value="1">
        </div>
    </div>

3.2.5.6 單選框

屬性title可自定義文本
屬性disabled開啟禁用
設(shè)置value="xxx"可自定義值，否則選中時(shí)返回的就是默認(rèn)的on

<!--單選框-->
    <div class="layui-form-item">
        <label class="layui-form-label">標(biāo)簽區(qū)域22</label>
        <div class="layui-input-block">
            <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>
        </div>
    </div>

3.2.5.7 文本域

class="layui-textarea"：layui.css提供的通用CSS類

 <!--文本域-->
    <div class="layui-form-item">
        <label class="layui-form-label">標(biāo)簽區(qū)域22</label>
        <div class="layui-input-block">
            <textarea name="aaa" required lay-verify="required" placeholder="請(qǐng)輸入" class="layui-textarea"></textarea>
        </div>
    </div>

3.2.5.8 組裝行內(nèi)表單

class=“l(fā)ayui-inline”：定義外層行內(nèi)
class=“l(fā)ayui-input-inline”：定義內(nèi)層行內(nèi)

<!--組裝行內(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="layui-inline">
            <label class="layui-form-label">密碼</label>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="password" name="" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>

3.2.5.9 忽略美化渲染

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

 <!--忽略美化渲染-->
    <div class="layui-form-item">
        <label class="layui-form-label">密碼</label>
        <div class="layui-input-block"  >
            <select name="city" lay-search lay-ignore>
                <option value="">請(qǐng)選擇一個(gè)城市</option>
                <option value="010">你好啊北京,hello</option>
                <option value="021" selected>上海</option>
                <option value="0571" disabled>杭州</option>
            </select>
        </div>
    </div>

3.2.5.10 表單方框風(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>

3.3 組件示例

3.3.1 彈層組

【前端】layui前端框架學(xué)習(xí)筆記,前端,layui,javascript

3.3.1.1 作為獨(dú)立組件使用(未下載到獨(dú)立版本)

引入jQuery1.8以上的任意版本，
引入layer.js
引入layer.css

<script>
layer.msg('hello'); 
</script>

3.3.1.2 layui 模塊化使用

引入layui.css
引入layui.js

layui.use('form', function () {
        var layer = layui.layer;
        layer.msg('hello');
    });

3.3.1.3 內(nèi)置方法

layer.open
layer.msg

3.3.1.4 type-基本層類型

類型：Number，默認(rèn)：0
layer提供了5種層類型?？蓚魅氲闹涤校?br>0（信息框，默認(rèn)）
1（頁面層）
2（iframe層）
3（加載層）
4（tips層）
若你采用layer.open({type: 1})方式調(diào)用，則type為必填項(xiàng)（信息框除外）

3.3.1.5 title-標(biāo)題

類型：String/Array/Boolean，默認(rèn)：‘信息’
title支持三種類型的值，若你傳入的是普通的字符串，如title :‘我是標(biāo)題’，那么只會(huì)改變標(biāo)題文本；若你還需要自定義標(biāo)題區(qū)域樣式，那么你可以title: ['文本', 'font-size:18px;']，數(shù)組第二項(xiàng)可以寫任意css樣式；如果你不想顯示標(biāo)題欄，你可以title: false
總結(jié):
title :'我是標(biāo)題'
title: ['文本', 'font-size:18px;']
title: false

3.3.1.6 content-內(nèi)容

類型：String/DOM/Array，默認(rèn)：‘’
content可傳入的值是靈活多變的，不僅可以傳入普通的html內(nèi)容，還可以指定DOM，更可以隨著type的不同而不同

/!*
 如果是頁面層
 */
layer.open({
  type: 1, 
  content: '傳入任意的文本或html' //這里content是一個(gè)普通的String
});
layer.open({
  type: 1,
  content: $('#id') //這里content是一個(gè)DOM，注意：最好該元素要存放在body最外層，否則可能被其它的相對(duì)元素所影響
});
//Ajax獲取
$.post('url', {}, function(str){
  layer.open({
    type: 1,
    content: str //注意，如果str是object，那么需要字符拼接。
  });
});
/!*
 如果是iframe層
 */
layer.open({
  type: 2, 
  content: 'http://sentsin.com' //這里content是一個(gè)URL，如果你不想讓iframe出現(xiàn)滾動(dòng)條，你還可以content: ['http://sentsin.com', 'no']
}); 
/!*
 如果是用layer.open執(zhí)行tips層
 */
layer.open({
  type: 4,
  content: ['內(nèi)容', '#id'] //數(shù)組第二項(xiàng)即吸附元素選擇器或者DOM
});

3.3.1.7 area - 寬高

類型：String/Array，默認(rèn)：‘a(chǎn)uto’
在默認(rèn)狀態(tài)下，layer是寬高都自適應(yīng)的，但當(dāng)你只想定義寬度時(shí)，你可以area: ‘500px’，高度仍然是自適應(yīng)的。當(dāng)你寬高都要定義時(shí)，你可以area: [‘500px’, ‘300px’]

3.3.1.8 icon - 圖標(biāo)

信息框和加載層的私有參數(shù)
類型：Number，默認(rèn)：-1（信息框）/0（加載層）
信息框默認(rèn)不顯示圖標(biāo)。當(dāng)你想顯示圖標(biāo)時(shí)，默認(rèn)皮膚可以傳入0-6如果是加載層，可以傳入0-2

3.3.2 日期與時(shí)間選擇

3.3.2.1 作為獨(dú)立組件使用(未下載到獨(dú)立版本)

3.3.2.2 在 layui 模塊中使用

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

    });

3.3.1.4 基礎(chǔ)參數(shù)選項(xiàng)

通過核心方法：laydate.render(options) 來設(shè)置基礎(chǔ)參數(shù)，也可以通過方法：laydate.set(options) 來設(shè)定全局基礎(chǔ)參數(shù).

 laydate.render({
            elem: '#test1' //指定元素
});

3.3.1.5 elem - 綁定元素

類型：String/DOM，默認(rèn)值：無
必填項(xiàng)，用于綁定執(zhí)行日期渲染的元素，值一般為選擇器，或DOM對(duì)象

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

3.3.1.6 type - 控件選擇類型

類型：String，默認(rèn)值：date
用于單獨(dú)提供不同的選擇器類型

type可選值	名稱	用途
year	年選擇器	只提供年列表選
month	年月選擇器	只提供年、月選擇
date	日期選擇器	可選擇：年、月、日。type默認(rèn)值，一般可不填
time	時(shí)間選擇器	只提供時(shí)、分、秒選擇
datetime	日期時(shí)間選擇器	可選擇：年、月、日、時(shí)、分、秒

//日期范圍選擇
laydate.render({ 
  elem: '#test'
  ,range: true //或 range: '~' 來自定義分割字符
});
 
//日期時(shí)間范圍選擇
laydate.render({ 
  elem: '#test'
  ,type: 'datetime'
  ,range: true
});
 
//時(shí)間范圍選擇
laydate.render({ 
  elem: '#test'
  ,type: 'time'
  ,range: true
});
 
//年范圍選擇
laydate.render({ 
  elem: '#test'
  ,type: 'year'
  ,range: true
});
 
//年月范圍選擇
laydate.render({ 
  elem: '#test'
  ,type: 'month'
  ,range: true
});

3.3.1.7 format - 自定義格式

類型：String，默認(rèn)值：yyyy-MM-dd
通過日期時(shí)間各自的格式符和長(zhǎng)度，來設(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ù)，至少兩位數(shù)。如果不足兩位，則前面補(bǔ)零。
s	秒數(shù)，允許一位數(shù)。

laydate.render({
            elem: '#test6'
            , format: 'yyyy年MM月dd日' //可任意組合
});

3.3.1.8 value - 初始值

類型：String，默認(rèn)值：new Date()
支持傳入符合format參數(shù)設(shè)定的日期格式字符，或者 new Date()

//傳入符合format格式的字符給初始值
laydate.render({ 
  elem: '#test'
  ,value: '2018-08-18' //必須遵循format參數(shù)設(shè)定的格式
});
 
//傳入Date對(duì)象給初始值
laydate.render({ 
  elem: '#test'
  ,value: new Date(1534766888000) //參數(shù)即為：2018-08-20 20:08:08 的時(shí)間戳
});

3.3.3 分頁

模塊加載名稱：laypage

3.3.3.1 基礎(chǔ)參數(shù)選項(xiàng)

通過核心方法：laypage.render(options) 來設(shè)置基礎(chǔ)參數(shù)。由于使用非常簡(jiǎn)單，本篇直接羅列核心接口的參數(shù)選項(xiàng)

【前端】layui前端框架學(xué)習(xí)筆記,前端,layui,javascript

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

        //執(zhí)行一個(gè)laypage實(shí)例
        laypage.render({
            elem: 'test1' //注意，這里的 test1 是 ID，不用加 # 號(hào)
            , count: 60 //數(shù)據(jù)總數(shù)，從服務(wù)端得到
            , limit: 5 //dize大小   默認(rèn)一頁10條

            , limits: [10, 20, 30, 40, 50] //每頁條數(shù)的選擇項(xiàng),和layout中的limit搭配使用
            // ,layout:['prev', 'page', 'next','limit']
            , layout: ['prev', 'page', 'next', 'limit', 'count']//自定義排版
            , groups: 6,

            jump: function (obj, first) {
                //obj包含了當(dāng)前分頁的所有參數(shù)，比如：
                console.log(obj.curr); //得到當(dāng)前頁，以便向服務(wù)端請(qǐng)求對(duì)應(yīng)頁的數(shù)據(jù)。
                console.log(obj.limit); //得到每頁顯示的條數(shù)

                //首次不執(zhí)行
                if (!first) {
                    console.log('首次不執(zhí)行執(zhí)行')
                }
            }

        });

    });
</script>

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

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

laypage.render({
  elem: 'test1'
  ,count: 70 //數(shù)據(jù)總數(shù)，從服務(wù)端得到
  ,jump: function(obj, first){
    //obj包含了當(dāng)前分頁的所有參數(shù)，比如：
    console.log(obj.curr); //得到當(dāng)前頁，以便向服務(wù)端請(qǐng)求對(duì)應(yīng)頁的數(shù)據(jù)。
    console.log(obj.limit); //得到每頁顯示的條數(shù)
    
    //首次不執(zhí)行
    if(!first){
      //do something
    }
  }
});

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

模塊加載名稱：table

3.3.4.1 快速使用

<table id="demo" lay-filter="test"></table>
<script>
    layui.use('form', function () {
        var table = layui.table;
        //第一個(gè)實(shí)例
        table.render({
            elem: '#demo'
            , height: 312
            , url: 'singers.json' //數(shù)據(jù)接口
            , page: true //開啟分頁
            , cols: [[ //表頭
                {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'}
                , {field: 'singer_name', title: '歌手名稱', width: 150}
                , {field: 'singer_pic', title: '歌手圖片', width: 80, sort: true}
                , {field: 'other_name', title: '別稱', width: 80}
                , {field: 'singer_id', title: '歌手id', width: 177,sort: true}
            ]]
        });

    });
</script>

js數(shù)據(jù)格式

{
  "code": 0,
  "msg": "",
  "count": 50,
  "data": [{
    "singer_name": "周杰倫",
    "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R150x150M0000025NhlN2yWrP4.webp",
    "other_name": "Jay Chou",
    "singer_id": 4558,
    "id": 1
  },
    {
      "singer_name": "林俊杰",
      "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R150x150M000001BLpXF2DyJe2.webp",
      "other_name": "JJ Lin",
      "singer_id": 4286,
      "id": 2
    }
  ]
}

3.3.4.2 三種初始化渲染方式

默認(rèn)方式是方法渲染

3.3.4.3 方法渲染

<table id="demo2"></table>

 // 方法渲染
        table.render({
            elem: '#demo2'
            , height: 312
            , url: 'singers.json' //數(shù)據(jù)接口
            , page: true //開啟分頁
            , cols: [[ //表頭
                {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'}
                , {field: 'singer_name', title: '歌手名稱', width: 150}
                , {field: 'singer_pic', title: '歌手圖片', width: 80, sort: true}
                , {field: 'other_name', title: '別稱', width: 80}
                , {field: 'singer_id', title: '歌手id', width: 177,sort: true}
            ]]
        });

3.3.4.4 自動(dòng)渲染

所謂的自動(dòng)渲染，即：在一段 table 容器中配置好相應(yīng)的參數(shù)，由 table 模塊內(nèi)部自動(dòng)對(duì)其完成渲染，而無需你寫初始的渲染方法。其特點(diǎn)在上文也有闡述。你需要關(guān)注的是以下三點(diǎn)：

帶有 class=“l(fā)ayui-table” 的 <table> 標(biāo)簽。

對(duì)標(biāo)簽設(shè)置屬性 lay-data=“” 用于配置一些基礎(chǔ)參數(shù)

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

<table id="demo3" class="layui-table" lay-data="{height:315, url:'singers.json' ,page:true}">
    <thead>
    <tr>
        <th lay-data="{field:'id', width:80, sort: true}">ID</th>
        <th lay-data="{field:'singer_name', width:80, sort: true}">歌手名稱</th>
        <th lay-data="{field:'singer_pic', width:80, sort: true}">歌手圖片</th>
        <th lay-data="{field:'other_name', width:80, sort: true}">別稱</th>
        <th lay-data="{field:'singer_id', width:80, sort: true}">歌手id</th>
    </tr>
    </thead>
</table>

3.3.4.5 轉(zhuǎn)換靜態(tài)表格

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

<table lay-filter="demo4">
    <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>人生就像是一場(chǎng)修行a</td>
    </tr>
    <tr>
        <td>賢心2</td>
        <td>88</td>
        <td>人生就像是一場(chǎng)修行b</td>
    </tr>
    <tr>
        <td>賢心3</td>
        <td>33</td>
        <td>人生就像是一場(chǎng)修行c</td>
    </tr>
    </tbody>
</table>

//轉(zhuǎn)換靜態(tài)表格
        table.init('demo4', {
            height: 315 //設(shè)置高度
            ,limit: 10 //注意：請(qǐng)務(wù)必確保 limit 參數(shù)（默認(rèn)：10）是與你服務(wù)端限定的數(shù)據(jù)條數(shù)一致
            //支持所有基礎(chǔ)參數(shù)
});

3.3.4.6 基礎(chǔ)參數(shù)使用的場(chǎng)景

基礎(chǔ)參數(shù)使用場(chǎng)景

場(chǎng)景一：下述方法中的鍵值即為基礎(chǔ)參數(shù)項(xiàng)
table.render({
  height: 300
  ,url: '/api/data'
});
       
場(chǎng)景二：下述 lay-data 里面的內(nèi)容即為基礎(chǔ)參數(shù)項(xiàng)，切記：值要用單引號(hào)
<table lay-data="{height:300, url:'/api/data'}" lay-filter="demo"> …… </table>
 
更多場(chǎng)景：下述 options 即為含有基礎(chǔ)參數(shù)項(xiàng)的對(duì)象
> table.init('filter', options); //轉(zhuǎn)化靜態(tài)表格
> var tableObj = table.render({});
  tableObj.reload(options); //重載表格

參考:http://layui.apixx.net/doc/modules/table.html#option

3.3.4.7 開啟分頁

page: true //開啟分頁

3.3.4.8 開啟頭部工具欄&行工具欄

<!--表格工具欄-->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="addAll">添加</button>
        <button class="layui-btn layui-btn-sm" lay-event="deleteAll">刪除</button>
        <button class="layui-btn layui-btn-sm" lay-event="updateAll">編輯</button>
    </div>
</script>
<!--表頭工具欄-->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-even="edit">編輯</a>
    <a class="layui-btn layui-btn-xs" lay-even="delete">刪除</a>
</script>

綁定表格工具欄：toolbar:'#toolbarDemo'
綁定表頭工具欄： {toolbar: '#barDemo'}

3.3.4.9 事件監(jiān)聽

頭工具事件

//test 為容器的lay-filter=""屬性值
table.on('toolbar(test)', function(obj){
  var checkStatus = table.checkStatus(obj.config.id);
  switch(obj.event){
    case 'add':
      layer.msg('添加');
    break;
    case 'delete':
      layer.msg('刪除');
    break;
    case 'update':
      layer.msg('編輯');
    break;
  };
});

行工具事件

table.on('tool(test)', function (obj) {
            console.log(1)
            // var checkStatus = table.checkStatus(obj.config.id);
            //獲取當(dāng)前事件名
            var tr = obj.data;//當(dāng)前行數(shù)據(jù)
            var event = obj.event;
            console.log(event)
            switch (obj.event) {
                case 'delete':
                    layer.confirm('確認(rèn)要?jiǎng)h除嗎?', function (index) {
                        //刪除指定tr
                        obj.del();刪除對(duì)應(yīng)行（tr）的DOM結(jié)構(gòu)，并更新緩存
                        console.log('刪除了')
                        //關(guān)閉彈出層,(index是當(dāng)前彈出層的下標(biāo))
                        layer.close(index);
                        //...//向服務(wù)端發(fā)送刪除指令
                    });
                    break;
                case 'edit':
                    layer.prompt({
                        //表單元素的類型 0=文本框, 1=密碼框, 2=文本域
                        formType: 0,
                        value: tr.singer_name //設(shè)置輸入框的值
                    }, function (value, index) {
                        //修改指定單元格的值
                        //value表示修改后輸入的值
                        obj.update({
                            singer_name:value
                        })
                        layer.close(index);
                    });
                    break;
            }
        });

3.3.4.10 開啟單元格編輯

單元格編輯類型（默認(rèn)不開啟）目前只支持：text（輸入框）
{field: 'singer_name', title: '歌手名稱', width: 150,edit:'text'}

監(jiān)聽單元格編輯事件

//監(jiān)聽單元格編輯事件
        table.on('edit(test)', function (obj) {
            console.log(obj)
            //修改后得值
            var value=obj.value;
            //得到當(dāng)前修改的tr對(duì)象
            var data=obj.data;
            //得到修改后的字段
            var field  = obj.field;
            layer.alert('id:'+data.id+'的'+field+'字段值修改為:'+value);

        });