LayUI 的安裝及使用
LayUI 的介紹
layui（諧音：類UI) 是一款采用自身模塊規(guī)范編寫的前端 UI 框架葫录，遵循原生 HTML/CSS/JS 的書寫與組織形式反肋，門檻極低，拿來即用。
由國人開發(fā)奴烙，16年出廠的框架，其主要提供了很多好看剖张、方便的樣式切诀，并且基本拿來即用，和Bootstrap有些相似搔弄，但該框架有個極大的好處就是定義了很多前后端交互的樣式接口幅虑，如分頁表格，只需在前端配置好接口顾犹，后端則按照定義好的接口規(guī)則返回數(shù)據(jù)倒庵，即可完成頁面的展示，極大減少了后端人員的開發(fā)成本炫刷。
官網(wǎng)：https://www.layui.com
官方文檔：https://www.layui.com/doc/
LayUI 的特點(diǎn)
（1）layui屬于輕量級框架擎宝，簡單美觀。適用于開發(fā)后端模式浑玛，它在服務(wù)端頁面上有非常好的效果认臊。
（2）layui是提供給后端開發(fā)人員的ui框架，基于DOM驅(qū)動锄奢。
下載與使用
在 官網(wǎng)首頁 下載到 layui 的最新版失晴。目錄結(jié)構(gòu)如下：
├─css// css目錄
││─modules// 模塊css目錄（一般如果模塊相對較大剧腻，我們會單獨(dú)提取，比如下面三個：）
││├─laydate
││├─layer
││└─layim
│└─layui.css// 核心樣式文件
├─font// 字體圖標(biāo)目錄
├─images// 圖片資源目錄（目前只有l(wèi)ayim和編輯器用到的GIF表情）
│─lay// 模塊核心目錄
│└─modules// 各模塊組件
│─layui.js// 基礎(chǔ)核心庫
└─layui.all.js// 包含layui.js和所有模塊的合并文件
獲得 layui 后涂屁，將其完整地部署（拷貝到項目中）到你的項目目錄书在，你只需要引入下述兩個文件：
./layui/css/layui.css
./layui/layui.js// 提示：如果是采用非模塊化方式，此處可換成：./layui/layui.all.js
基本的入門頁面
<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8">
<metaname="viewport"content="width=device-width, initial-scale=1, maximum-scale=1">
<title>開始使用layui</title>
<linkrel="stylesheet"href="layui/css/layui.css">
</head>
<body>
<!-- 你的HTML代碼 -->
<scriptsrc="layui/layui.js"></script>
<script>
// 模塊和回調(diào)函數(shù)
// 一般直接寫在一個js文件中
layui.use(['layer','form'],function(){
varlayer=layui.layer
,form=layui.form;
?
layer.msg('Hello World');
?? });
</script>
</body>
</html>
還需要聲明需要使用的 模塊 和 回調(diào)函數(shù)拆又。參照官方文檔儒旬，選擇自己想要的效果就行。
比如：
<script>
// 注意：導(dǎo)航 依賴 element 模塊帖族，否則無法進(jìn)行功能性操作
layui.use('element',function(){
? varelement=layui.element;
?
? //…
?? });
</script>
頁面元素
布局
布局容器
固定寬度
將柵格放入一個帶有 class="layui-container" 的特定的容器中栈源，以便在小屏幕以上的設(shè)備中固定寬度，讓列可控竖般。
<divclass="layui-container">
<divclass="layui-row">
?? ……
</div>
</div>
完整寬度
可以不固定容器寬度甚垦。將柵格或其它元素放入一個帶有 class="layui-fluid" 的容器中，那么寬度將不會固定涣雕，而是 100% 適應(yīng)
<divclass="layui-fluid">
? ……
</div>
柵格系統(tǒng)
為了豐富網(wǎng)頁布局艰亮，簡化 HTML/CSS 代碼的耦合，并提升多終端的適配能力挣郭，layui 引進(jìn)了一套具備響應(yīng)式能力的柵格系統(tǒng)迄埃。將容器進(jìn)行了 12 等分，預(yù)設(shè)了 4*12 種 CSS 排列類兑障，它們在移動設(shè)備侄非、平板、桌面中/大尺寸四種不同的屏幕下發(fā)揮著各自的作用流译。
柵格布局規(guī)則
采用 layui-row 來定義行逞怨，如：
<divclass="layui-row"></div>
采用類似 layui-col-md* 這樣的預(yù)設(shè)類來定義一組列（column），且放在行（row）內(nèi)先蒋。其中：
變量 md 代表的是不同屏幕下的標(biāo)記
變量 * 代表的是該列所占用的12等分?jǐn)?shù)（如6/12），可選值為 1 - 12
如果多個列的“等分?jǐn)?shù)值”總和等于12宛渐，則剛好滿行排列竞漾。如果大于12，多余的列將自動另起一行窥翩。
列可以同時出現(xiàn)最多四種不同的組合业岁，分別是：xs（超小屏幕，如手機(jī)）寇蚊、sm（小屏幕笔时，如平板）、md（桌面中等屏幕）仗岸、lg（桌面大型屏幕）允耿。
可對列追加類似 layui-col-space5借笙、 layui-col-md-offset3 這樣的預(yù)設(shè)類來定義列的間距和偏移。
可以在列（column）元素中放入你自己的任意元素填充內(nèi)容
示例：
<h3>常規(guī)布局（以中型屏幕桌面為例）：</h3>
<divclass="layui-row">
? ? <divclass="layui-col-md9"style="background-color: #00F7DE;">
? ? 你的內(nèi)容 9/12
? ? </div>
? ? <divclass="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的值auto750px970px1170px
標(biāo)記xssmmdlg
列對應(yīng)類 * 為1-12的等分?jǐn)?shù)值layui-col-xs*layui-col-sm*layui-col-md*layui-col-lg*
總列數(shù)12121212
響應(yīng)行為始終按設(shè)定的比例水平排列在當(dāng)前屏幕下水平排列低散，如果屏幕大小低于臨界值則堆疊排列在當(dāng)前屏幕下水平排列，如果屏幕大小低于臨界值則堆疊排列在當(dāng)前屏幕下水平排列骡楼，如果屏幕大小低于臨界值則堆疊排列
<h3>平板熔号、桌面端的不同表現(xiàn)：</h3>
<divclass="layui-row">
<divclass="layui-col-sm6 layui-col-md4"
style="background-color: thistle">
? ? ?? 平板≥768px：6/12 | 桌面端≥992px：4/12
</div>
</div>
?
<divclass="layui-row">
<divclass="layui-col-sm4 layui-col-md6"
style="background-color: mediumaquamarine;">
? ? ?? 平板≥768px：4/12 | 桌面端≥992px：6/12
</div>
</div>
?
<divclass="layui-row">
<divclass="layui-col-sm12 layui-col-md8"
style="background-color: coral">
? ? ?? 平板≥768px：12/12 | 桌面端≥992px：8/12
</div>
</div>
列邊距
通過“列間距”的預(yù)設(shè)類，來設(shè)定列之間的間距鸟整。且一行中最左的列不會出現(xiàn)左邊距引镊，最右的列不會出現(xiàn)右邊距。列間距在保證排版美觀的同時吃嘿，還可以進(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>
<divclass="layui-row layui-col-space10">
<divclass="layui-col-md4">
<!-- 需要在layui-col-md4里面再加一層div -->
<divstyle="background-color: #009688;">
? ? ? ? ?? 1/3
</div>
</div>
<divclass="layui-col-md4">
<divstyle="background-color: burlywood;">
? ? ? ? ?? 1/3
</div>
</div>
<divclass="layui-col-md4">
<divstyle="background-color: silver;">
? ? ? ? ?? 1/3
</div>
</div>
</div>
注：
layui-col-space：設(shè)置后不起作用主要是因?yàn)?b>設(shè)置的是padding,也就是說是向內(nèi)縮，所以設(shè)置背景色padding也是會添上顏色挣饥，看起來好像沒有間距一樣除师。可以在里面在加一個div扔枫，來達(dá)到目的汛聚。
間距一般不高于30px，如果超過30短荐，建議使用列偏移倚舀。
列偏移
對列追加 類似 layui-col-md-offset* 的預(yù)設(shè)類，從而讓列向右偏移忍宋。其中 * 號代表的是偏移占據(jù)的列數(shù)痕貌，可選中為 1 - 12。 ? 如：layui-col-md-offset3糠排，即代表在“中型桌面屏幕”下舵稠，讓該列向右偏移 3 個列寬度
<h3>列偏移</h3>
<divclass="layui-row">
<divclass="layui-col-md4"style="background-color: rosybrown;">
? ? ?? 4/12
</div>
<divclass="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ī)定的臨界值室琢，就會堆疊排列。
列嵌套
可以對柵格進(jìn)行無窮層次的嵌套唉工。在列元素（layui-col-md*）中插入行元素（layui-row）研乒，即可完成嵌套。
<h3>列嵌套</h3>
<divclass="layui-row layui-col-space5">
<divclass="layui-col-md5"style="background-color: thistle;">
<divclass="layui-row">
<divclass="layui-col-md3"style="background-color: burlywood;">
? ? ? ? ? ? ?? 內(nèi)部列
</div>
<divclass="layui-col-md5"style="background-color: indianred;">
? ? ? ? ? ? ?? 內(nèi)部列
</div>
<divclass="layui-col-md4"style="background-color: mediumaquamarine;">
? ? ? ? ? ? ?? 內(nèi)部列
</div>
</div>
</div>
</div>
基本元素
按鈕
用法
向任意HTML元素設(shè)定class="layui-btn"淋硝，建立一個基礎(chǔ)按鈕雹熬。通過追加格式為layui-btn-{type}的class來定義其它按鈕風(fēng)格。
<!-- 基礎(chǔ)按鈕 -->
<buttontype="button"class="layui-btn">一個標(biāo)準(zhǔn)的按鈕</button>
<alayui-btn layui-btn-primary"
默認(rèn)class="layui-btn"
百搭class="layui-btn layui-btn-normal"
暖色class="layui-btn layui-btn-warm"
警告class="layui-btn layui-btn-danger"
禁用class="layui-btn layui-btn-disabled"
示例：
<!-- 不同主題的按鈕 -->
<buttonclass="layui-btn">默認(rèn)按鈕</button>
<buttonclass="layui-btn layui-btn-primary">原始按鈕</button>
<buttonclass="layui-btn layui-btn-normal">百搭按鈕</button>
<buttonclass="layui-btn layui-btn-warm">暖色按鈕</button>
<buttonclass="layui-btn layui-btn-danger">警告按鈕</button>
<buttonclass="layui-btn layui-btn-disabled">禁用按鈕</button>
尺寸
尺寸組合
大型class="layui-btn layui-btn-lg"
默認(rèn)class="layui-btn"
小型class="layui-btn layui-btn-sm"
迷你class="layui-btn layui-btn-xs"
<!-- 不同尺寸的按鈕 -->
<buttonclass="layui-btn layui-btn-primary layui-btn-lg">大型</button>
<buttonclass="layui-btn">默認(rèn)</button>
<buttonclass="layui-btn layui-btn-sm layui-btn-danger">小型</button>
<buttonclass="layui-btn layui-btn-xs">迷你</button>
圓角
layui-btn-radius
<buttonclass="layui-btn layui-btn-radius">默認(rèn)按鈕</button>
<buttonclass="layui-btn layui-btn-primary layui-btn-radius">原始按鈕</button>
<buttonclass="layui-btn layui-btn-normal layui-btn-radius">百搭按鈕</button>
<buttonclass="layui-btn layui-btn-warm layui-btn-radius">暖色按鈕</button>
<buttonclass="layui-btn layui-btn-danger layui-btn-radius">警告按鈕</button>
<buttonclass="layui-btn layui-btn-disabled layui-btn-radius">禁用按鈕</button>
圖標(biāo)
<buttontype="button"class="layui-btn">
<iclass="layui-icon"></i>添加
</button>
?
<buttontype="button"class="layui-btn layui-btn-sm layui-btn-primary">
<iclass="layui-icon">ဂ</i>刷新
</button>
導(dǎo)航
導(dǎo)航一般指頁面引導(dǎo)性頻道集合谣膳，多以菜單的形式呈現(xiàn)竿报，可應(yīng)用于頭部和側(cè)邊。面包屑結(jié)構(gòu)簡單继谚，支持自定義分隔符烈菌。
依賴加載模塊：element
實(shí)現(xiàn)步驟：
引入的資源
<linkrel="stylesheet"href="layui/css/layui.css">
<scriptsrc="layui/layui.js"></script>
依賴加載模塊
<scripttype="text/javascript">
// 注意：導(dǎo)航 依賴 element 模塊，否則無法進(jìn)行功能性操作
layui.use('element',function(){
varelement=layui.element;
?
?? });
</script>
顯示指定類型的導(dǎo)航
水平導(dǎo)航
<ulclass="layui-nav">
? ? <liclass="layui-nav-item"><ahref="">最新活動</a></li>
<liclass="layui-nav-item layui-this"><ahref="">產(chǎn)品</a></li>
<liclass="layui-nav-item"><ahref="">大數(shù)據(jù)</a></li>
<liclass="layui-nav-item">
<ahref="javascript:;">解決方案</a>
<dlclass="layui-nav-child"><!-- 二級菜單 -->
<dd><ahref="">移動模塊</a></dd>
<dd><ahref="">后臺模版</a></dd>
<dd><ahref="">電商平臺</a></dd>
</dl>
</li>
<liclass="layui-nav-item"><ahref="">社區(qū)</a></li>
</ul>
垂直/側(cè)邊導(dǎo)航
<ulclass="layui-nav layui-nav-tree">
<!-- 側(cè)邊導(dǎo)航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
<liclass="layui-nav-item layui-nav-itemed">
<ahref="javascript:;">默認(rèn)展開</a>
<dlclass="layui-nav-child">
<dd><ahref="javascript:;">選項1</a></dd>
<dd><ahref="javascript:;">選項2</a></dd>
<dd><ahref="">跳轉(zhuǎn)</a></dd>
</dl>
</li>
<liclass="layui-nav-item">
<ahref="javascript:;">解決方案</a>
<dlclass="layui-nav-child">
<dd><ahref="">移動模塊</a></dd>
<dd><ahref="">后臺模版</a></dd>
<dd><ahref="">電商平臺</a></dd>
</dl>
</li>
<liclass="layui-nav-item"><ahref="">產(chǎn)品</a></li>
<liclass="layui-nav-item"><ahref="">大數(shù)據(jù)</a></li>
</ul>
水平花履、垂直芽世、側(cè)邊三個導(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)不同的主題色
<!-- 如定義一個墨綠背景色的導(dǎo)航 -->
<ulclass="layui-nav layui-bg-move">
? …
</ul>
水平導(dǎo)航支持的其它背景主題有：layui-bg-cyan（藏青）济瓢、layui-bg-molv（墨綠）、layui-bg-blue（艷藍(lán)） 垂直導(dǎo)航支持的其它背景主題有：layui-bg-cyan（藏青）
面包屑
<spanclass="layui-breadcrumb">
<ahref="">首頁</a>
<ahref="">國際新聞</a>
<ahref="">亞太地區(qū)</a>
<a><cite>正文</cite></a>
</span>
你還可以通過設(shè)置屬性 lay-separator="" 來自定義分隔符妹卿。例如：
<spanclass="layui-breadcrumb"lay-separator="-">
<ahref="">首頁</a>
<ahref="">國際新聞</a>
<ahref="">亞太地區(qū)</a>
<a><cite>正文</cite></a>
</span>
選項卡
導(dǎo)航菜單可應(yīng)用于頭部和側(cè)邊旺矾，支持響應(yīng)式，支持刪除選項卡等功能夺克。
依賴加載模塊：element
實(shí)現(xiàn)步驟
引入的資源
<linkrel="stylesheet"href="layui/css/layui.css">
<scriptsrc="layui/layui.js"></script>
依賴加載模塊
<scripttype="text/javascript">
// 注意：選項卡 依賴 element 模塊箕宙，否則無法進(jìn)行功能性操作
layui.use('element',function(){
varelement=layui.element;
?
?? });
</script>
加載HTML
<divclass="layui-tab">
<ulclass="layui-tab-title">
<liclass="layui-this">網(wǎng)站設(shè)置</li>
<li>用戶管理</li>
<li>權(quán)限分配</li>
<li>商品管理</li>
<li>訂單管理</li>
</ul>
<divclass="layui-tab-content">
<divclass="layui-tab-item layui-show">內(nèi)容1</div>
<divclass="layui-tab-item">內(nèi)容2</div>
<divclass="layui-tab-item">內(nèi)容3</div>
<divclass="layui-tab-item">內(nèi)容4</div>
<divclass="layui-tab-item">內(nèi)容5</div>
</div>
</div>
選項卡風(fēng)格
默認(rèn)風(fēng)格：layui-tab
簡潔風(fēng)格需要追加class：layui-tab-brief
卡片風(fēng)格需要追加class：layui-tab-card
帶刪除的選項卡
可以對父層容器設(shè)置屬性 lay-allowClose="true" 來允許Tab選項卡被刪除
<divclass="layui-tab"lay-allowClose="true">
<ulclass="layui-tab-title">
<liclass="layui-this">網(wǎng)站設(shè)置</li>
<li>用戶管理</li>
<li>權(quán)限分配</li>
<li>商品管理</li>
<li>訂單管理</li>
</ul>
<divclass="layui-tab-content">
<divclass="layui-tab-item layui-show">內(nèi)容1</div>
<divclass="layui-tab-item">內(nèi)容2</div>
<divclass="layui-tab-item">內(nèi)容3</div>
<divclass="layui-tab-item">內(nèi)容4</div>
<divclass="layui-tab-item">內(nèi)容5</div>
</div>
</div>
表格
常規(guī)用法
<tableclass="layui-table">
<colgroup>
<colwidth="150">
<colwidth="200">
<col>
</colgroup>
<thead>
<tr>
<th>昵稱</th>
<th>加入時間</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>于千萬人之中遇見你所遇見的人，于千萬年之中铺纽，時間的無涯的荒野里…</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)簽上，例如：
<!-- 一個帶有隔行背景狡门，且行邊框風(fēng)格的大尺寸表格 -->
<tableclass="layui-table"lay-evenlay-size="lg"lay-skin="row">
<colgroup>
<colwidth="150">
<colwidth="200">
<col>
</colgroup>
<thead>
<tr>
<th>昵稱</th>
<th>加入時間</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>于千萬人之中遇見你所遇見的人陷寝，于千萬年之中，時間的無涯的荒野里…</td>
</tr>
</tbody>
</table>
表單
依賴加載模塊：form?
在一個容器中設(shè)定 class="layui-form" 來標(biāo)識一個表單元素塊
<formclass="layui-form"action="">
</form>
基本的行區(qū)塊結(jié)構(gòu)融撞，它提供了響應(yīng)式的支持盼铁〈治担可以換成其他結(jié)構(gòu)尝偎，但必須要在外層容器中定義class="layui-form"，form模塊才能正常工作。
<divclass="layui-form-item">
? <labelclass="layui-form-label">標(biāo)簽區(qū)域</label>
? <divclass="layui-input-block">
? ? 原始表單元素區(qū)域
? </div>
</div>
輸入框
<inputtype="text"name="title"requiredlay-verify="required"placeholder="請輸入標(biāo)題"autocomplete="off"class="layui-input"/>
required：注冊瀏覽器所規(guī)定的必填字段
lay-verify：注冊form模塊需要驗(yàn)證的類型
class="layui-input"：layui.css提供的通用CSS類
下拉選擇框
<selectname="city"lay-verify="">
<optionvalue="">請選擇一個城市</option>
<optionvalue="010">北京</option>
<optionvalue="021">上海</option>
<optionvalue="0571">杭州</option>
</select>
屬性selected可設(shè)定默認(rèn)項
屬性disabled開啟禁用致扯，select和option標(biāo)簽都支持
<selectname="city"lay-verify="">
<optionvalue="010">北京</option>
<optionvalue="021"disabled>上海（禁用效果）</option>
<optionvalue="0571"selected>杭州</option>
</select>
可以通過 optgroup 標(biāo)簽給select分組
<selectname="quiz">
<optionvalue="">請選擇</option>
<optgrouplabel="城市記憶">
<optionvalue="你工作的第一個城市">你工作的第一個城市肤寝？</option>
</optgroup>
<optgrouplabel="學(xué)生時代">
<optionvalue="你的工號">你的工號？</option>
<optionvalue="你最喜歡的老師">你最喜歡的老師抖僵？</option>
</optgroup>
</select>
通過設(shè)定屬性 lay-search 來開啟搜索匹配功能
<selectname="city"lay-verify=""lay-search>
<optionvalue="010">layer</option>
<optionvalue="021">form</option>
<optionvalue="0571"selected>layim</option>
</select>
復(fù)選框
<h2>默認(rèn)風(fēng)格：</h2>
<inputtype="checkbox"name=""title="寫作"checked>
<inputtype="checkbox"name=""title="發(fā)呆">
<inputtype="checkbox"name=""title="禁用"disabled>
<h2>原始風(fēng)格：</h2>
<inputtype="checkbox"name=""title="寫作"lay-skin="primary"checked>
<inputtype="checkbox"name=""title="發(fā)呆"lay-skin="primary">
<inputtype="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"可自定義值，否則選中時返回的就是默認(rèn)的on
開關(guān)
將復(fù)選框checkbox耍群，通過設(shè)定 lay-skin="switch" 形成了開關(guān)風(fēng)格
<inputtype="checkbox"name="xxx"lay-skin="switch">
<inputtype="checkbox"name="yyy"lay-skin="switch"lay-text="ON|OFF"checked>
<inputtype="checkbox"name="zzz"lay-skin="switch"lay-text="開啟|關(guān)閉">
<inputtype="checkbox"name="aaa"lay-skin="switch"disabled>
屬性checked可設(shè)定默認(rèn)開
屬性disabled開啟禁用
屬性lay-text可自定義開關(guān)兩種狀態(tài)的文本 （兩種文本用 "|" 隔開）
設(shè)置value="1"可自定義值义桂，否則選中時返回的就是默認(rèn)的on
單選框
<inputtype="radio"name="sex"value="nan"title="男">
<inputtype="radio"name="sex"value="nv"title="女"checked>
<inputtype="radio"name="sex"value=""title="中性"disabled>
屬性title可自定義文本
屬性disabled開啟禁用
設(shè)置value="xxx"可自定義值，否則選中時返回的就是默認(rèn)的on
文本域
<textareaname="remark"requiredlay-verify="required"placeholder="請輸入個人介紹"class="layui-textarea"></textarea>
class="layui-textarea"：layui.css提供的通用CSS類
組裝行內(nèi)表單
<divclass="layui-form-item">
<divclass="layui-inline">
<labelclass="layui-form-label">范圍</label>
<divclass="layui-input-inline"style="width: 100px;">
<inputtype="text"name="price_min"placeholder="￥"
autocomplete="off"class="layui-input">
</div>
<divclass="layui-form-mid">-</div>
<divclass="layui-input-inline"style="width: 100px;">
<inputtype="text"name="price_max"placeholder="￥"
autocomplete="off"class="layui-input">
</div>
</div>
</div>
class="layui-inline"：定義外層行內(nèi)
class="layui-input-inline"：定義內(nèi)層行內(nèi)
忽略美化渲染
可以對表單元素增加屬性 lay-ignore 設(shè)置后蹈垢，將不會對該標(biāo)簽進(jìn)行美化渲染慷吊，即保留系統(tǒng)風(fēng)格。
<inputtype="radio"name="sex"value="nan"title="男"lay-ignore>
表單方框風(fēng)格
通過追加 layui-form-pane 的class曹抬，來設(shè)定表單的方框風(fēng)格溉瓶。
<formclass="layui-form layui-form-pane"action="">
<!--
? ? ? ? 內(nèi)部結(jié)構(gòu)都一樣，值得注意的是 復(fù)選框/開關(guān)/單選框 這些組合在該風(fēng)格下需要額外添加 pane屬性（否則? ? 會看起來比較別扭）谤民，如：
-->
<divclass="layui-form-item"pane>
<labelclass="layui-form-label">單選框</label>
<divclass="layui-input-block">
<inputtype="radio"name="sex"value="男"title="男">
<inputtype="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)加載模塊
作為獨(dú)立組件使用 layer
<!-- 引入好layer.js后，直接用即可 -->
<scriptsrc="layer.js"></script>
<script>
? ? layer.msg('hello');
</script>
在 layui 中使用 layer
layui.use('layer',function(){
varlayer=layui.layer;
layer.msg('hello');
});
基礎(chǔ)參數(shù)
type - 基本層類型
類型：Number块攒，默認(rèn)：0
?
可傳入的值有：
? ? 0（信息框励稳，默認(rèn)）
? ? 1（頁面層）
? ? 2（iframe層）
? ? 3（加載層）
? ? 4（tips層）
title - 標(biāo)題
類型：String/Array/Boolean，默認(rèn)：'信息'
?
title支持三種類型的值：
? ? 若傳入的是普通的字符串囱井，如 title :'我是標(biāo)題'驹尼，那么只會改變標(biāo)題文本；
? ? 若需要自定義樣式庞呕，可以title: ['文本', 'font-size:18px;']新翎，數(shù)組第二項可以寫任意css樣式程帕；
? ? 若你不想顯示標(biāo)題欄，可以 title: false地啰；
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是一個URL，如果你不想讓iframe出現(xiàn)滾動條蔚鸥，你還可以content: ['url', 'no']
content:"http://www.baidu.com"
// content:["http://www.baidu.com",'no']
});
?
/* tips層 */
layer.open({
type:4,
content: ['內(nèi)容','#id']//數(shù)組第二項即吸附元素選擇器或者DOM
});
?
area - 寬高
類型：String/Array惜论，默認(rèn)：'auto'
?
在默認(rèn)狀態(tài)下，layer是寬高都自適應(yīng)的止喷。
當(dāng)定義寬度時来涨，你可以area: '500px'，高度仍然是自適應(yīng)的启盛。
當(dāng)寬高都要定義時蹦掐，你可以area: ['500px', '300px']。
icon - 圖標(biāo)
注：信息框和加載層的私有參數(shù)僵闯。
?
類型：Number卧抗，默認(rèn)：-1（信息框）/0（加載層）
?
信息框默認(rèn)不顯示圖標(biāo)。當(dāng)你想顯示圖標(biāo)時鳖粟，默認(rèn)層可以傳入0-6社裆。如果是加載層，可以傳入0-2向图。
// eg1
layer.alert('酷斃了', {icon:1});
// eg2
layer.msg('不開心泳秀。。', {icon:5});
// eg3
layer.load(1);// 風(fēng)格1的加載
示例
// eg1
layer.alert('很高興見到你??', {icon:6});
?
// eg2
layer.msg('你愿意和我做朋友么榄攀？', {
time:0,//不自動關(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⊙)方库？');
});
日期與時間選擇
模塊加載名稱：laydate瑟俭，獨(dú)立版本：http://www.layui.com/laydate/
layDate 包含了大量的更新，其中主要以：年選擇器贞瞒、年月選擇器偶房、日期選擇器、時間選擇器军浆、日期時間選擇器 五種類型的選擇方式棕洋。
快速使用
和 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>
? ? ? ? <metacharset="utf-8">
? ? ? ? <title>日期與時間選擇</title>
? ? ? ? <linkrel="stylesheet"href="layui/css/layui.css">
? ? </head>
? ? <body>
? ? ? ? <divclass="layui-inline">
? ? ? ? ? ? <inputtype="text"class="layui-input"id="date1"/>
? ? ? ? </div>
? ? </body>
? ? <scriptsrc="layui/layui.js"></script>
? ? <scripttype="text/javascript">
? ? ? ? layui.use('laydate',function(){
? ? ? ? varlaydate=layui.laydate;
? ? ? ? //執(zhí)行一個laydate實(shí)例
? ? ? ? laydate.render({
? ? ? ? elem:'#date1'//指定元素
? ? ? ? });
? ? ? ? });
? ? </script>
</html>
基礎(chǔ)參數(shù)
elem - 綁定元素
類型：String/DOM碟摆，默認(rèn)值：無
?
必填項晃财，用于綁定執(zhí)行日期渲染的元素，值一般為選擇器典蜕，或DOM對象
laydate.render({
elem:'#test'//或 elem: document.getElementById('test')断盛、elem: lay('#test') 等
});
type - 控件選擇類型
類型：String，默認(rèn)值：date
?
用于單獨(dú)提供不同的選擇器類型愉舔，可選值如下表：
type可選值名稱用途
year年選擇器只提供年列表選擇
month年月選擇器只提供年钢猛、月選擇
date日期選擇器可選擇：年、月轩缤、日命迈。type默認(rèn)值，一般可不填
time時間選擇器只提供時火的、分壶愤、秒選擇
datetime日期時間選擇器可選擇：年、月馏鹤、日征椒、時、分湃累、秒
//年選擇器
laydate.render({
elem:'#test'
,type:'year'
});
//年月選擇器
laydate.render({
elem:'#test'
,type:'month'
});
//日期選擇器
laydate.render({
elem:'#test'
//,type: 'date' //默認(rèn)勃救，可不填
});
//時間選擇器
laydate.render({
elem:'#test'
,type:'time'
});
//日期時間選擇器
laydate.render({
elem:'#test'
,type:'datetime'
});
format - 自定義格式
類型：String，默認(rèn)值：yyyy-MM-dd
?
通過日期時間各自的格式符和長度治力，來設(shè)定一個你所需要的日期格式蒙秒。layDate 支持的格式如下：
格式符說明
yyyy年份，至少四位數(shù)宵统。如果不足四位税肪，則前面補(bǔ)零
y年份，不限制位數(shù)榜田，即不管年份多少位益兄，前面均不補(bǔ)零
MM月份，至少兩位數(shù)箭券。如果不足兩位净捅，則前面補(bǔ)零。
M月份辩块，允許一位數(shù)蛔六。
dd日期荆永，至少兩位數(shù)。如果不足兩位国章，則前面補(bǔ)零具钥。
d日期，允許一位數(shù)液兽。
HH小時骂删，至少兩位數(shù)。如果不足兩位四啰，則前面補(bǔ)零宁玫。
H小時，允許一位數(shù)柑晒。
mm分鐘欧瘪，至少兩位數(shù)。如果不足兩位匙赞，則前面補(bǔ)零佛掖。
m分鐘，允許一位數(shù)涌庭。
ss秒數(shù)苦囱，至少兩位數(shù)。如果不足兩位脾猛，則前面補(bǔ)零撕彤。
s秒數(shù)，允許一位數(shù)猛拴。
通過上述不同的格式符組合成一段日期時間字符串羹铅，可任意排版。
//自定義日期格式
laydate.render({
? elem: '#test'
? ,format: 'yyyy年MM月dd日' //可任意組合
});
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:newDate(1534766888000)//參數(shù)即為：2018-08-20 20:08:08 的時間戳
});
分頁
模塊加載名稱：laypage
快速使用
laypage 的使用非常簡單，指向一個用于存放分頁的容器跛溉，通過服務(wù)端得到一些初始值焊切，即可完成分頁渲染。
<!DOCTYPE html>
<html>
? ? <head>
? ? ? ? <metacharset="utf-8">
? ? ? ? <title>分頁</title>
? ? ? ? <linkrel="stylesheet"href="layui/css/layui.css">
? ? </head>
? ? <body>
? ? ? ? <divid="test1"></div>
? ? </body>
? ? <scriptsrc="layui/layui.js"></script>
? ? <scripttype="text/javascript">
? ? ? ? layui.use('laypage',function(){
? ? ? ? varlaypage=layui.laypage;
? ? ? ? //執(zhí)行一個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ù)選項說明類型默認(rèn)值
elem指向存放分頁的容器嚎尤，值可以是容器ID、DOM對象伍宦。如：? 1. elem: 'id' 注意：這里不能加 # 號? 2. elem: document.getElementById('id')String/Object-
count數(shù)據(jù)總數(shù)芽死。一般通過服務(wù)端得到Number-
limit每頁顯示的條數(shù)乏梁。laypage將會借助 count 和 limit 計算出分頁數(shù)。Number10
limits每頁條數(shù)的選擇項关贵。如果 layout 參數(shù)開啟了 limit遇骑，則會出現(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' });? ? ? ? ? ? ? ? ? ? ? ? `Number1
groups連續(xù)出現(xiàn)的頁碼個數(shù)Number5
prev自定義“上一頁”的內(nèi)容落萎，支持傳入普通文本和HTMLString上一頁
next自定義“下一頁”的內(nèi)容，同上String下一頁
first自定義“首頁”的內(nèi)容翩肌，同上String1
last自定義“尾頁”的內(nèi)容，同上String總頁數(shù)值
layout自定義排版禁悠∧罴溃可選值有：count（總條目輸區(qū)域）、prev（上一頁區(qū)域）碍侦、page（分頁區(qū)域）粱坤、next（下一頁區(qū)域）、limit（條目選項區(qū)域）瓷产、refresh（頁面刷新區(qū)域站玄。注意：layui 2.3.0 新增） 、skip（快捷跳頁區(qū)域）Array['prev', 'page', 'next']
theme自定義主題濒旦。支持傳入：顏色值株旷，或任意普通字符。如：? 1. theme: '#c00'? 2. theme: 'xxx' //將會生成 class="layui-laypage-xxx" 的CSS類尔邓，以便自定義主題String-
hash開啟location.hash晾剖，并自定義 hash 值。如果開啟梯嗽，在觸發(fā)分頁時齿尽，會自動對url追加：#!hash值={curr} 利用這個，可以在頁面載入時就定位到指定頁String/Booleanfalse
jump - 切換分頁的回調(diào)
當(dāng)分頁被切換時觸發(fā)灯节，函數(shù)返回兩個參數(shù)：obj（當(dāng)前分頁的所有選項值）循头、first（是否首次，一般用于初始加載的判斷）
laypage.render({
elem:'page'
,count:100//數(shù)據(jù)總數(shù)炎疆，從服務(wù)端得到
,groups:10// 連續(xù)出現(xiàn)的頁碼個數(shù)
,layout:['prev','page','next','limit','count']// 自定義排版
,limits:[5,10,20]// layout屬性設(shè)置了limit值卡骂，可會出現(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)建一個table實(shí)例最簡單的方式是，在頁面放置一個元素 <table id="demo"></table>唯笙，然后通過 table.render() 方法指定該容器螟蒸。
<!DOCTYPE html>
<html>
? ? <head>
? ? <metacharset="utf-8">
? ? <title>table數(shù)據(jù)表格</title>
? ? <linkrel="stylesheet"href="layui/css/layui.css">
? ? </head>
? ? <body>
? ? ? ? <tableid="demo"></table>
? ? </body>
? ? <scriptsrc="layui/layui.js"type="text/javascript"></script>
? ? <scripttype="text/javascript">
? ? ? ? layui.use('table',function(){
? ? ? ? vartable=layui.table;
? ? ? ? // 第一個實(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è)定各項參數(shù)即可七嫌。
自動渲染HTML配置少办，自動渲染無需寫過多 JS，可專注于 HTML 表頭部分
轉(zhuǎn)換靜態(tài)表格轉(zhuǎn)化一段已有的表格元素?zé)o需配置數(shù)據(jù)接口诵原，在JS中指定表格元素英妓，并簡單地給表頭加上自定義屬性即可
方法渲染
將基礎(chǔ)參數(shù)的設(shè)定放在了JS代碼中，且原始的 table 標(biāo)簽只需要一個選擇器
<tableid="demo"></table>
渲染表格
layui.use('table',function(){
vartable=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()方法返回一個對象：var tableIns = table.render(options)绍赛，可用于對當(dāng)前表格進(jìn)行“重載”等操作蔓纠。
自動渲染
在一段 table 容器中配置好相應(yīng)的參數(shù)，由 table 模塊內(nèi)部自動對其完成渲染吗蚌，而無需你寫初始的渲染方法腿倚。
1) 帶有 class="layui-table" 的 <table> 標(biāo)簽。 ? 2) 對標(biāo)簽設(shè)置屬性 lay-data="" 用于配置一些基礎(chǔ)參數(shù) ? 3) 在 <th> 標(biāo)簽中設(shè)置屬性lay-data=""用于配置表頭信息
<tableclass="layui-table"lay-data="{url:'user.json'}">
<thead>
<tr>
<thlay-data="{field:'id'}">ID</th>
<thlay-data="{field:'username'}">用戶名</th>
<thlay-data="{field:'sex', sort: true}">性別</th>
</tr>
</thead>
</table>
轉(zhuǎn)換靜態(tài)表格
頁面已經(jīng)存在了一段有內(nèi)容的表格蚯妇，由原始的table標(biāo)簽組成敷燎，只需要賦予它一些動態(tài)元素。
<tablelay-filter="demo">
<thead>
<tr>
<thlay-data="{field:'username', width:100}">昵稱</th>
<thlay-data="{field:'experience', width:80, sort:true}">積分</th>
<thlay-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(){
vartable=layui.table;
?
// 轉(zhuǎn)換靜態(tài)表格
table.init('demo', {
height:315// 設(shè)置高度
// 支持所有基礎(chǔ)參數(shù)
?? });
?
});
基礎(chǔ)參數(shù)使用的場景
// 場景一：下述方法中的鍵值即為基礎(chǔ)參數(shù)項
table.render({
? height: 300
? ,url: 'user.json'
});
// 場景二：下述 lay-data 里面的內(nèi)容即為基礎(chǔ)參數(shù)項箩言，切記：值要用單引號
<tablelay-data="{height:300, url:'user.json'}"lay-filter="demo">……</table>
// 更多場景：下述 options 即為含有基礎(chǔ)參數(shù)項的對象
> table.init('filter', options); // 轉(zhuǎn)化靜態(tài)表格
> var tableObj = table.render({});
? tableObj.reload(options); // 重載表格
開啟分頁
<!-- HTML代碼 -->
<tableid="demo"></table>
// JS實(shí)現(xiàn)代碼
layui.use('table',function(){
vartable=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:'性別'}
? ? ?? ]]
});
});
開啟頭部工具欄
?
<tableid="demo"lay-filter="demo"></table>
?
<!-- 表格工具欄 -->
<scripttype="text/html"id="toolbarDemo">
? ?
? ? ? ?
? ? ? ? ? ? 獲取選中行數(shù)據(jù)
? ? ? ?
? ? ? ? ? ? 獲取選中數(shù)目
? ? ? ?
? ? ? ? ? ? 驗(yàn)證是否全選
?? </div>
</script>
?
<!-- 表頭工具欄 -->
<scripttype="text/html"id="barDemo">
? ? 編輯
? ? 刪除
</script>
layui.use('table',function(){
vartable=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)前表格被選中的記錄對象陨收，返回數(shù)組
varcheckStatus=table.checkStatus(obj.config.id);
// obj.event 得到當(dāng)前點(diǎn)擊元素的事件名
switch(obj.event){
case'getCheckData':
// 獲取被選中的記錄的數(shù)組
vardata=checkStatus.data;
// 將數(shù)組數(shù)據(jù)解析成字符串
layer.alert(JSON.stringify(data));
break;
case'getCheckLength':
vardata=checkStatus.data;
layer.msg('選中了：'+data.length+' 個');
break;
case'isAll':
// checkStatus.isAll 判斷記錄是否被全選
layer.msg(checkStatus.isAll?'全選':'未全選');
break;
// 自定義頭工具欄右側(cè)圖標(biāo) - 提示
case'LAYTABLE_TIPS':
layer.alert('這是工具欄右側(cè)自定義的一個圖標(biāo)按鈕');
break;
? ? ?? };
?? });
/**
? ? * 監(jiān)聽行工具事件
? ? */
table.on('tool(demo)',function(obj){
// 得到當(dāng)前操作的tr的相關(guān)信息
vardata=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);
? ? ? ? ?? });
}elseif(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);
? ? ? ? ?? });
? ? ?? }
?? });
});
開啟單元格編輯
<tableclass="layui-table"lay-data="{url:'user.json', id:'demo'}"lay-filter="demo">
<thead>
<tr>
<thlay-data="{type:'checkbox'}">ID</th>
<thlay-data="{field:'id',? sort: true}">ID</th>
<thlay-data="{field:'username', sort: true, edit: 'text'}">用戶名</th>
<thlay-data="{field:'sex', edit: 'text'}">性別</th>
<thlay-data="{field:'city', edit: 'text'}">城市</th>
<thlay-data="{field:'experience', sort: true, edit: 'text'}">積分</th>
</tr>
</thead>
</table>
layui.use('table',function(){
vartable=layui.table;
?
// 監(jiān)聽單元格編輯
table.on('edit(demo)',function(obj){
varvalue=obj.value// 得到修改后的值
,data=obj.data// 得到所在行所有鍵值
,field=obj.field;// 得到字段
layer.msg('[ID: '+data.id+'] '+field+' 字段更改為：'+value);
?? });
?
});
數(shù)據(jù)表格的重載
<divclass="demoTable">
?? 搜索ID：
<divclass="layui-inline">
<inputclass="layui-input"name="id"id="demoReload"autocomplete="off">
</div>
<buttonclass="layui-btn"id="searchBtn">搜索</button>
</div>
?
<tableclass="layui-hide"id="demo"lay-filter="demo"></table>
layui.use('table',function(){
vartable=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ū)ο?/p>
vardemoReload=$('#demoReload');
table.reload('demo', {
where: {// 設(shè)定異步數(shù)據(jù)接口的額外參數(shù)，任意設(shè)
id:demoReload.val()
? ? ? ? ?? }
,page: {
// 讓條件查詢從第一頁開始查詢务漩，不寫則從當(dāng)前頁開始查詢墨状，此頁之前的數(shù)據(jù)將不納入條件篩選
curr:1// 重新從第 1 頁開始
? ? ? ? ?? }
});// 只重載數(shù)據(jù)
?? });
});
