樂字節(jié)-語言教學(xué)

表單

依賴加載模塊：form

在一個容器中設(shè)定 class="layui-form" 來標(biāo)識一個表單元素塊

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html" cid="n6" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;"><form class="layui-form" action="">

</form></pre>
基本的行區(qū)塊結(jié)構(gòu)厢漩，它提供了響應(yīng)式的支持。可以換成其他結(jié)構(gòu)，但必須要在外層容器中定義class="layui-form"，form模塊才能正常工作霍骄。

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html" cid="n9" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;"><div class="layui-form-item">
<label class="layui-form-label">標(biāo)簽區(qū)域</label>
<div class="layui-input-block">
原始表單元素區(qū)域
</div>
</div></pre>

輸入框

required：注冊瀏覽器所規(guī)定的必填字段
lay-verify：注冊form模塊需要驗證的類型
class="layui-input"：layui.css提供的通用CSS類

下拉選擇框

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html" cid="n20" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><select name="city" lay-verify="">
<option value="">請選擇一個城市</option>
<option value="010">北京</option>
<option value="021">上海</option>
<option value="0571">杭州</option>
</select> </pre>

屬性selected可設(shè)定默認項
屬性disabled開啟禁用，select和option標(biāo)簽都支持

可以通過 optgroup 標(biāo)簽給select分組

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html" cid="n30" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><select name="quiz">
<option value="">請選擇</option>
<optgroup label="城市記憶">
<option value="你工作的第一個城市">你工作的第一個城市？</option>
</optgroup>
<optgroup label="學(xué)生時代">
<option value="你的工號">你的工號梭伐？</option>
<option value="你最喜歡的老師">你最喜歡的老師？</option>
</optgroup>
</select></pre>

通過設(shè)定屬性 lay-search 來開啟搜索匹配功能

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html" cid="n34" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><select name="city" lay-verify="" lay-search>
<option value="010">layer</option>
<option value="021">form</option>
<option value="0571" selected>layim</option>
</select> </pre>

復(fù)選框

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

開關(guān)

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

屬性checked可設(shè)定默認開
屬性disabled開啟禁用
屬性lay-text可自定義開關(guān)兩種狀態(tài)的文本（兩種文本用 "|" 隔開）
設(shè)置value="1"可自定義值惰匙，否則選中時返回的就是默認的on

單選框

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

文本域

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

組裝行內(nèi)表單

class="layui-inline"：定義外層行內(nèi)
class="layui-input-inline"：定義內(nèi)層行內(nèi)

忽略美化渲染

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

表單方框風(fēng)格

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

組件示例

彈出層

模塊加載名稱：layer鸠真，獨立版本：layer.layui.com

使用場景

由于layer可以獨立使用悯仙，也可以通過Layui模塊化使用。所以請按照你的實際需求來選擇吠卷。

場景	用前準(zhǔn)備	調(diào)用方式
1. 作為獨立組件使用	如果你只是單獨想使用 layer锡垄，你可以去 layer 獨立版本官網(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)加載模塊

作為獨立組件使用 layer

<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="html" cid="n107" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;">
<script src="layer.js"></script>
<script>
layer.msg('hello');
</script></pre>
在 layui 中使用 layer

<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="js" cid="n110" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;">layui.use('layer', function(){
var layer = layui.layer;

layer.msg('hello');
});</pre>

基礎(chǔ)參數(shù)

type - 基本層類型

<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="html" cid="n115" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;">類型：Number搔谴，默認：0

可傳入的值有：
0（信息框，默認）
1（頁面層）
2（iframe層）
3（加載層）
4（tips層）</pre>
title - 標(biāo)題

<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="html" cid="n118" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;">類型：String/Array/Boolean桩撮，默認：'信息'

title支持三種類型的值：
若傳入的是普通的字符串敦第，如 title :'我是標(biāo)題'，那么只會改變標(biāo)題文本距境；
若需要自定義樣式申尼，可以title: ['文本', 'font-size:18px;']，數(shù)組第二項可以寫任意css樣式垫桂；
若你不想顯示標(biāo)題欄师幕，可以 title: false；</pre>
content - 內(nèi)容

<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="html" cid="n121" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;">類型：String/DOM/Array诬滩，默認：''

content可傳入的值是靈活多變的霹粥，不僅可以傳入普通的html內(nèi)容，還可以指定DOM疼鸟。</pre>

<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="js" cid="n122" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;"> /* 信息框 */
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
});
</pre>
area - 寬高

<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="html" cid="n125" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;">類型：String/Array空镜，默認：'auto'

在默認狀態(tài)下浩淘，layer是寬高都自適應(yīng)的。
當(dāng)定義寬度時吴攒，你可以area: '500px'张抄，高度仍然是自適應(yīng)的。
當(dāng)寬高都要定義時洼怔，你可以area: ['500px', '300px']署惯。</pre>
icon - 圖標(biāo)

<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="html" cid="n128" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;">注：信息框和加載層的私有參數(shù)。

類型：Number镣隶，默認：-1（信息框）/0（加載層）

信息框默認不顯示圖標(biāo)极谊。當(dāng)你想顯示圖標(biāo)時诡右，默認層可以傳入0-6。如果是加載層轻猖，可以傳入0-2帆吻。</pre>

<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="js" cid="n129" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;">// eg1
layer.alert('酷斃了', {icon: 1});
// eg2
layer.msg('不開心。蜕依。', {icon: 5});
// eg3
layer.load(1); // 風(fēng)格1的加載</pre>
示例

<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="js" cid="n132" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;">// 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⊙)？');
});</pre>

日期與時間選擇

模塊加載名稱：laydate翠肘，獨立版本：http://www.layui.com/laydate/

layDate 包含了大量的更新檐束，其中主要以：年選擇器、年月選擇器束倍、日期選擇器被丧、時間選擇器、日期時間選擇器 五種類型的選擇方式绪妹。

快速使用

和 layer 一樣甥桂，可以在 layui 中使用 layDate，也可直接使用 layDate 獨立版邮旷，請按照實際需求來選擇黄选。

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

在layui模塊中使用

<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="html" cid="n154" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>日期與時間選擇</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í)行一個laydate實例
      laydate.render({
        elem: '#date1' //指定元素
      });
    });
</script>

</html></pre>

基礎(chǔ)參數(shù)

elem - 綁定元素

<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="html" cid="n159" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;">類型：String/DOM，默認值：無

必填項律歼，用于綁定執(zhí)行日期渲染的元素民镜，值一般為選擇器，或DOM對象</pre>

<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="js" cid="n160" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;">laydate.render({
elem: '#test' //或 elem: document.getElementById('test')险毁、elem: lay('#test') 等
});</pre>

type - 控件選擇類型

<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="html" cid="n163" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;">類型：String制圈，默認值：date

用于單獨提供不同的選擇器類型，可選值如下表：</pre>

type可選值	名稱	用途
year	年選擇器	只提供年列表選擇
month	年月選擇器	只提供年畔况、月選擇
date	日期選擇器	可選擇：年鲸鹦、月、日问窃。type默認值亥鬓，一般可不填
time	時間選擇器	只提供時、分域庇、秒選擇
datetime	日期時間選擇器	可選擇：年嵌戈、月覆积、日、時熟呛、分宽档、秒

<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="js" cid="n189" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;">//年選擇器
laydate.render({
elem: '#test'
,type: 'year'
});

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

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

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

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

format - 自定義格式

<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="html" cid="n192" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;">類型：String庵朝，默認值：yyyy-MM-dd

通過日期時間各自的格式符和長度吗冤，來設(shè)定一個你所需要的日期格式。layDate 支持的格式如下：</pre>

格式符	說明
yyyy	年份九府，至少四位數(shù)椎瘟。如果不足四位，則前面補零
y	年份侄旬，不限制位數(shù)肺蔚，即不管年份多少位，前面均不補零
MM	月份儡羔，至少兩位數(shù)宣羊。如果不足兩位，則前面補零汰蜘。
M	月份仇冯，允許一位數(shù)。
dd	日期族操，至少兩位數(shù)苛坚。如果不足兩位，則前面補零坪创。
d	日期炕婶，允許一位數(shù)。
HH	小時莱预，至少兩位數(shù)柠掂。如果不足兩位，則前面補零依沮。
H	小時涯贞，允許一位數(shù)。
mm	分鐘危喉，至少兩位數(shù)宋渔。如果不足兩位，則前面補零辜限。
m	分鐘皇拣，允許一位數(shù)。
ss	秒數(shù)，至少兩位數(shù)氧急。如果不足兩位颗胡，則前面補零。
s	秒數(shù)吩坝，允許一位數(shù)毒姨。

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

<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="html" cid="n234" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;">//自定義日期格式
laydate.render({
elem: '#test'
,format: 'yyyy年MM月dd日' //可任意組合
});</pre>

value - 初始值

<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="html" cid="n237" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;">類型：String弧呐，默認值：new Date()

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

<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="js" cid="n238" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;">// 傳入符合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 的時間戳
});</pre>

分頁

模塊加載名稱：laypage

快速使用

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

<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="html" cid="n244" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><!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í)行一個laypage實例
      laypage.render({
        elem: 'test1' //注意崩哩，這里的 test1 是 ID，不用加 # 號
        ,count: 50 //數(shù)據(jù)總數(shù)言沐，從服務(wù)端得到
      });
    });
</script>

</html></pre>

基礎(chǔ)參數(shù)

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

參數(shù)選項	說明	類型	默認值
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ù)。	Number	10
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' }); `	Number	1
groups	連續(xù)出現(xiàn)的頁碼個數(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（條目選項區(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/Boolean	false

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

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

<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="js" cid="n320" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">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
    }
}

});</pre>

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

模塊加載名稱：table

快速使用

創(chuàng)建一個table實例最簡單的方式是女责，在頁面放置一個元素 <table id="demo"></table>漆枚，然后通過 table.render() 方法指定該容器。

<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="html" cid="n326" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><!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;

      // 第一個實例
      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></pre>

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

<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="json" cid="n328" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">{
"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"
}

}</pre>

三種初始化渲染方式

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

方法渲染

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

<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="html" cid="n351" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;"><table id="demo"></table></pre>
渲染表格

<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="js" cid="n354" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;">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: '性別'}
    ]]
 });      
```
});</pre>

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

自動渲染

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

帶有 class="layui-table" 的 <table> 標(biāo)簽桥氏。 ? 2) 對標(biāo)簽設(shè)置屬性 lay-data="" 用于配置一些基礎(chǔ)參數(shù) ? 3) 在 <th> 標(biāo)簽中設(shè)置屬性lay-data=""用于配置表頭信息

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

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

<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="html" cid="n362" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><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></pre>

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

<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="js" cid="n364" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">layui.use('table', function(){
var table = layui.table;

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

});</pre>

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

<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="html" cid="n366" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">// 場景一：下述方法中的鍵值即為基礎(chǔ)參數(shù)項
table.render({
height: 300
,url: 'user.json'
});

// 場景二：下述 lay-data 里面的內(nèi)容即為基礎(chǔ)參數(shù)項，切記：值要用單引號
<table lay-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); // 重載表格</pre>

開啟分頁

<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="js" cid="n369" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">// JS實現(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: '性別'}
    ]]
});

});</pre>

開啟頭部工具欄

<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="js" cid="n372" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">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)前表格被選中的記錄對象揖庄，返回數(shù)組
    var checkStatus = table.checkStatus(obj.config.id);
    // obj.event 得到當(dāng)前點擊元素的事件名
    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 + ' 個');
            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)信息
    var data = obj.data;
    if(obj.event === 'del'){
        // 確認框
        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);
        });
    }
});

});</pre>

開啟單元格編輯

<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="js" cid="n375" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">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);
});

});</pre>

數(shù)據(jù)表格的重載

<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="js" cid="n378" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">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ù)
});

});</pre>