LayUI
LayUI 的安裝及使用
? layui（諧音：類UI) 是一款采用自身模塊規(guī)范編寫的前端 UI 框架，遵循原生 HTML/CSS/JS 的書寫與組織形式鸽凶，門檻極低，拿來即用璃谨。
? 由國人開發(fā)逞盆，16年出廠的框架，其主要提供了很多好看这弧、方便的樣式捷凄，并且基本拿來即用忱详，和Bootstrap有些相似，但該框架有個(gè)極大的好處就是定義了很多前后端交互的樣式接口跺涤，如分頁表格踱阿，只需在前端配置好接口，后端則按照定義好的接口規(guī)則返回?cái)?shù)據(jù)钦铁，即可完成頁面的展示软舌，極大減少了后端人員的開發(fā)成本。
? 官網(wǎng)：https://www.layui.com
? 官方文檔：https://www.layui.com/doc/
（1）layui屬于輕量級(jí)框架牛曹，簡單美觀佛点。適用于開發(fā)后端模式，它在服務(wù)端頁面上有非常好的效果。
（2）layui是提供給后端開發(fā)人員的ui框架超营，基于DOM驅(qū)動(dòng)鸳玩。
在?官網(wǎng)首頁?下載到 layui 的最新版。目錄結(jié)構(gòu)如下：
├─css// css目錄│? │─modules// 模塊css目錄（一般如果模塊相對(duì)較大演闭，我們會(huì)單獨(dú)提取不跟，比如下面三個(gè)：）│? │? ├─laydate? │? │? ├─layer? │? │? └─layim? │? └─layui.css// 核心樣式文件├─font// 字體圖標(biāo)目錄├─images// 圖片資源目錄（目前只有l(wèi)ayim和編輯器用到的GIF表情）│─lay// 模塊核心目錄│? └─modules// 各模塊組件│─layui.js// 基礎(chǔ)核心庫└─layui.all.js// 包含layui.js和所有模塊的合并文件
獲得 layui 后，將其完整地部署（拷貝到項(xiàng)目中）到你的項(xiàng)目目錄米碰，你只需要引入下述兩個(gè)文件：
./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ù)// 一般直接寫在一個(gè)js文件中l(wèi)ayui.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>
將柵格放入一個(gè)帶有?class=“l(fā)ayui-container”?的特定的容器中吴趴，以便在小屏幕以上的設(shè)備中固定寬度漆诽，讓列可控。
<divclass="layui-container"><divclass="layui-row">……</div></div>
可以不固定容器寬度锣枝。將柵格或其它元素放入一個(gè)帶有?class=“l(fā)ayui-fluid”?的容器中厢拭，那么寬度將不會(huì)固定，而是 100% 適應(yīng)
<divclass="layui-fluid">……</div>
? 為了豐富網(wǎng)頁布局撇叁，簡化 HTML/CSS 代碼的耦合蚪腐，并提升多終端的適配能力，layui 引進(jìn)了一套具備響應(yīng)式能力的柵格系統(tǒng)税朴。將容器進(jìn)行了 12 等分，預(yù)設(shè)了 4*12 種 CSS 排列類家制，它們?cè)谝苿?dòng)設(shè)備正林、平板、桌面中/大尺寸四種不同的屏幕下發(fā)揮著各自的作用颤殴。
采用?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
如果多個(gè)列的“等分?jǐn)?shù)值”總和等于12，則剛好滿行排列矮瘟。如果大于12瞳脓，多余的列將自動(dòng)另起一行。
列可以同時(shí)出現(xiàn)最多四種不同的組合澈侠，分別是：xs（超小屏幕劫侧，如手機(jī)）、sm（小屏幕，如平板）烧栋、md（桌面中等屏幕）写妥、lg（桌面大型屏幕）。
可對(duì)列追加類似?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)式能力，得益于CSS3媒體查詢（Media Queries）的強(qiáng)力支持魔吐，從而針對(duì)四類不同尺寸的屏幕扎筒，進(jìn)行相應(yīng)的適配處理。
超小屏幕 (手機(jī)<768px)小屏幕 (平板≥768px)中等屏幕 (桌面≥992px)大型屏幕(桌面≥1200px)
.layui-container的值auto750px970px1170px
標(biāo)記xssmmdlg
列對(duì)應(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è)定列之間的間距。且一行中最左的列不會(huì)出現(xiàn)左邊距淫僻，最右的列不會(huì)出現(xiàn)右邊距诱篷。列間距在保證排版美觀的同時(shí)，還可以進(jìn)一步保證分列的寬度精細(xì)程度雳灵。我們結(jié)合網(wǎng)頁常用的邊距棕所，預(yù)設(shè)了 12 種不同尺寸的邊距，分別是：
/* 支持列之間為 1px-30px 區(qū)間的所有雙數(shù)間隔悯辙，以及 1px琳省、5px、15px躲撰、25px 的單數(shù)間隔 */layui-col-space1 layui-col-space2 layui-col-space4 layui-col-space5 layui-col-space6 layui-col-space8 layui-col-space10 layui-col-space12 layui-col-space14 layui-col-space15 layui-col-space16 layui-col-space18 layui-col-space20 layui-col-space22 layui-col-space24 layui-col-space25 layui-col-space26 layui-col-space28 layui-col-space30
示例：
<h3>列間距</h3><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>
注：
1. layui-col-space：設(shè)置后不起作用主要是因?yàn)?*設(shè)置的是padding**,也就是說是**向內(nèi)縮**针贬，所以設(shè)置背景色padding也是會(huì)添上顏色，看起來好像沒有間距一樣拢蛋¤胨可以在里面在加一個(gè)div，來達(dá)到目的谆棱。
2. 間距一般不高于30px快压，如果超過30，建議使用列偏移垃瞧。
? 對(duì)列追加 類似?layui-col-md-offset*?的預(yù)設(shè)類蔫劣，從而讓列向右偏移。其中 * 號(hào)代表的是偏移占據(jù)的列數(shù)个从，可選中為 1 - 12拦宣。
? 如：layui-col-md-offset3，即代表在“中型桌面屏幕”下，讓該列向右偏移 3 個(gè)列寬度
<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>
? 注：列偏移可針對(duì)不同屏幕的標(biāo)準(zhǔn)進(jìn)行設(shè)定绸罗，在當(dāng)前設(shè)定的屏幕下有效，當(dāng)?shù)陀谧烂嫫聊坏囊?guī)定的臨界值豆瘫，就會(huì)堆疊排列珊蟀。
? 可以對(duì)柵格進(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=“l(fā)ayui-btn”，建立一個(gè)基礎(chǔ)按鈕昵宇。通過追加格式為*layui-btn-{type}*的class來定義其它按鈕風(fēng)格磅崭。
<!-- 基礎(chǔ)按鈕 --><buttontype="button"class="layui-btn">一個(gè)標(biāo)準(zhǔn)的按鈕</button><a>一個(gè)按鈕</div>
名稱組合
原始class=“l(fā)ayui-btn layui-btn-primary”
默認(rèn)class=“l(fā)ayui-btn”
百搭class=“l(fā)ayui-btn layui-btn-normal”
暖色class=“l(fā)ayui-btn layui-btn-warm”
警告class=“l(fā)ayui-btn layui-btn-danger”
禁用class=“l(fā)ayui-btn layui-btn-disabled”
示例：
<!-- 不同主題的按鈕 --><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=“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”
<!-- 不同尺寸的按鈕 --><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>
<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)性頻道集合，多以菜單的形式呈現(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)航
<ulclass="layui-nav"><liclass="layui-nav-item"><ahref="">最新活動(dòng)</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"><!-- 二級(jí)菜單 --><dd><ahref="">移動(dòng)模塊</a></dd><dd><ahref="">后臺(tái)模版</a></dd><dd><ahref="">電商平臺(tái)</a></dd></dl></li><liclass="layui-nav-item"><ahref="">社區(qū)</a></li></ul>
<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:;">選項(xiàng)1</a></dd><dd><ahref="javascript:;">選項(xiàng)2</a></dd><dd><ahref="">跳轉(zhuǎn)</a></dd></dl></li><liclass="layui-nav-item"><ahref="javascript:;">解決方案</a><dlclass="layui-nav-child"><dd><ahref="">移動(dòng)模塊</a></dd><dd><ahref="">后臺(tái)模版</a></dd><dd><ahref="">電商平臺(tái)</a></dd></dl></li><liclass="layui-nav-item"><ahref="">產(chǎn)品</a></li><liclass="layui-nav-item"><ahref="">大數(shù)據(jù)</a></li></ul>
水平、垂直犯助、側(cè)邊三個(gè)導(dǎo)航的HTML結(jié)構(gòu)是完全一樣的癣漆，不同的是：
水平導(dǎo)航：layui-nav
垂直導(dǎo)航需要追加class：layui-nav-tree
側(cè)邊導(dǎo)航需要追加class：layui-nav-tree layui-nav-side
? 通過對(duì)導(dǎo)航追加CSS背景類，讓導(dǎo)航呈現(xiàn)不同的主題色
<!-- 如定義一個(gè)墨綠背景色的導(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)式婚肆，支持刪除選項(xiàng)卡等功能。
??依賴加載模塊：element
引入的資源
<linkrel="stylesheet"href="layui/css/layui.css"><scriptsrc="layui/layui.js"></script>
依賴加載模塊
<scripttype="text/javascript">// 注意：選項(xiàng)卡 依賴 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>
默認(rèn)風(fēng)格：layui-tab
簡潔風(fēng)格需要追加class：layui-tab-brief
卡片風(fēng)格需要追加class：layui-tab-card
可以對(duì)父層容器設(shè)置屬性?lay-allowClose=“true”?來允許Tab選項(xiàng)卡被刪除
<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>
<tableclass="layui-table"><colgroup><colwidth="150"><colwidth="200"><col></colgroup><thead><tr><th>昵稱</th><th>加入時(shí)間</th><th>簽名</th></tr></thead><tbody><tr><td>賢心</td><td>2016-11-29</td><td>人生就像是一場修行</td></tr><tr><td>許閑心</td><td>2016-11-28</td><td>于千萬人之中遇見你所遇見的人，于千萬年之中附井，時(shí)間的無涯的荒野里…</td></tr></tbody></table>
屬性名屬性值備注
lay-even無用于開啟?隔行?背景讨越，可與其它屬性一起使用
lay-skin=“屬性值”line （行邊框風(fēng)格）
row （列邊框風(fēng)格）
nob （無邊框風(fēng)格）
若使用默認(rèn)風(fēng)格不設(shè)置該屬性即可
lay-size=“屬性值”sm （小尺寸）
lg （大尺寸）
若使用默認(rèn)尺寸不設(shè)置該屬性即可
你所需要的基礎(chǔ)屬性寫在table標(biāo)簽上，例如：
<!-- 一個(gè)帶有隔行背景永毅，且行邊框風(fēng)格的大尺寸表格 --><tableclass="layui-table"lay-evenlay-size="lg"lay-skin="row"><colgroup><colwidth="150"><colwidth="200"><col></colgroup><thead><tr><th>昵稱</th><th>加入時(shí)間</th><th>簽名</th></tr></thead><tbody><tr><td>賢心</td><td>2016-11-29</td><td>人生就像是一場修行</td></tr><tr><td>許閑心</td><td>2016-11-28</td><td>于千萬人之中遇見你所遇見的人把跨，于千萬年之中，時(shí)間的無涯的荒野里…</td></tr></tbody></table>
??依賴加載模塊：form
在一個(gè)容器中設(shè)定?class=“l(fā)ayui-form”?來標(biāo)識(shí)一個(gè)表單元素塊
<formclass="layui-form"action=""></form>
基本的行區(qū)塊結(jié)構(gòu)沼死，它提供了響應(yīng)式的支持着逐。可以換成其他結(jié)構(gòu)，但必須要在外層容器中定義class=“l(fā)ayui-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="請(qǐng)輸入標(biāo)題"autocomplete="off"class="layui-input"/>
required：注冊(cè)瀏覽器所規(guī)定的必填字段
lay-verify：注冊(cè)form模塊需要驗(yàn)證的類型
class=“l(fā)ayui-input”：layui.css提供的通用CSS類
<selectname="city"lay-verify=""><optionvalue="">請(qǐng)選擇一個(gè)城市</option><optionvalue="010">北京</option><optionvalue="021">上海</option><optionvalue="0571">杭州</option></select>
屬性selected可設(shè)定默認(rèn)項(xiàng)
屬性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="">請(qǐng)選擇</option><optgrouplabel="城市記憶"><optionvalue="你工作的第一個(gè)城市">你工作的第一個(gè)城市秀姐？</option></optgroup><optgrouplabel="學(xué)生時(shí)代"><optionvalue="你的工號(hào)">你的工號(hào)慈迈？</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>
<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”*可自定義值痒留，否則選中時(shí)返回的就是默認(rèn)的on
將復(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”*可自定義值蠢沿，否則選中時(shí)返回的就是默認(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”*可自定義值伸头，否則選中時(shí)返回的就是默認(rèn)的on
<textareaname="remark"requiredlay-verify="required"placeholder="請(qǐng)輸入個(gè)人介紹"class="layui-textarea"></textarea>
class=“l(fā)ayui-textarea”：layui.css提供的通用CSS類
<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=“l(fā)ayui-inline”：定義外層行內(nèi)
class=“l(fā)ayui-input-inline”：定義內(nèi)層行內(nèi)
? 可以對(duì)表單元素增加屬性?lay-ignore?設(shè)置后，將不會(huì)對(duì)該標(biāo)簽進(jìn)行美化渲染舷蟀，即保留系統(tǒng)風(fēng)格恤磷。
<inputtype="radio"name="sex"value="nan"title="男"lay-ignore>
? 通過追加?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屬性（否則 會(huì)看起來比較別扭），如：
? --><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模塊化使用。所以請(qǐng)按照你的實(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');});
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)題'茎用，那么只會(huì)改變標(biāo)題文本遣总；
若需要自定義樣式睬罗，可以title: ['文本', 'font-size:18px;']，數(shù)組第二項(xiàng)可以寫任意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可以傳入任意的文本或htmlcontent:"Hello"});/* 頁面層 */layer.open({type:1,title:"系統(tǒng)消息",// content可以傳入任意的文本或htmlcontent:"<div style='height:100px;width:200px'>Hello</div>"});/* iframe */layer.open({type:2,title:"系統(tǒng)消息",// content是一個(gè)URL卒暂，如果你不想讓iframe出現(xiàn)滾動(dòng)條，你還可以content: ['url', 'no']content:"http://www.baidu.com"http:// content:["http://www.baidu.com",'no']});/* tips層 */layer.open({type:4,content:['內(nèi)容','#id']//數(shù)組第二項(xiàng)即吸附元素選擇器或者DOM});
area - 寬高
類型：String/Array娄帖，默認(rèn)：'auto'
在默認(rèn)狀態(tài)下也祠，layer是寬高都自適應(yīng)的。
當(dāng)定義寬度時(shí)近速，你可以area: '500px'诈嘿，高度仍然是自適應(yīng)的。
當(dāng)寬高都要定義時(shí)削葱，你可以area: ['500px', '300px']奖亚。
icon - 圖標(biāo)
注：信息框和加載層的私有參數(shù)。
類型：Number析砸，默認(rèn)：-1（信息框）/0（加載層）
信息框默認(rèn)不顯示圖標(biāo)昔字。當(dāng)你想顯示圖標(biāo)時(shí)，默認(rèn)層可以傳入0-6首繁。如果是加載層作郭，可以傳入0-2。
// eg1layer.alert('酷斃了',{icon:1});// eg2layer.msg('不開心弦疮。夹攒。',{icon:5});// eg3layer.load(1);// 風(fēng)格1的加載
示例
// eg1layer.alert('很高興見到你??',{icon:6});// eg2layer.msg('你愿意和我做朋友么？',{time:0,//不自動(dòng)關(guān)閉btn:['當(dāng)然愿意','狠心拒絕'],// 按鈕yes:function(index){layer.close(index);// 關(guān)閉當(dāng)前彈出框layer.msg('新朋友胁塞，你好咏尝！',{icon:6,// 圖標(biāo)btn:['開心','快樂']});}});// eg3layer.msg('這是常用的彈出層');// eg4layer.msg('So sad /(ㄒoㄒ)/~~',{icon:5});// eg5layer.msg('玩命加載中...=￣ω￣=',function(){// 關(guān)閉后的操作layer.msg('(⊙o⊙)？');});
??模塊加載名稱：laydate啸罢，獨(dú)立版本：http://www.layui.com/laydate/
? layDate 包含了大量的更新编检，其中主要以：年選擇器、年月選擇器伺糠、日期選擇器蒙谓、時(shí)間選擇器斥季、日期時(shí)間選擇器?五種類型的選擇方式训桶。
? 和 layer 一樣累驮，可以在 layui 中使用 layDate，也可直接使用 layDate 獨(dú)立版舵揭，請(qǐng)按照實(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>日期與時(shí)間選擇</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í)行一個(gè)laydate實(shí)例laydate.render({elem:'#date1'//指定元素});});</script></html>
elem - 綁定元素
類型：String/DOM抚笔，默認(rèn)值：無
必填項(xiàng)，用于綁定執(zhí)行日期渲染的元素，值一般為選擇器步责，或DOM對(duì)象
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時(shí)間選擇器只提供時(shí)勇吊、分、秒選擇
datetime日期時(shí)間選擇器可選擇：年窍仰、月汉规、日、時(shí)辈赋、分鲫忍、秒
//年選擇器laydate.render({elem:'#test',type:'year'});//年月選擇器laydate.render({elem:'#test',type:'month'});//日期選擇器laydate.render({elem:'#test'//,type: 'date' //默認(rèn)，可不填});//時(shí)間選擇器laydate.render({elem:'#test',type:'time'});//日期時(shí)間選擇器laydate.render({elem:'#test',type:'datetime'});
format - 自定義格式
類型：String钥屈，默認(rèn)值：yyyy-MM-dd
通過日期時(shí)間各自的格式符和長度悟民，來設(shè)定一個(gè)你所需要的日期格式。layDate 支持的格式如下：
格式符說明
yyyy年份篷就，至少四位數(shù)射亏。如果不足四位，則前面補(bǔ)零
y年份竭业，不限制位數(shù)智润，即不管年份多少位，前面均不補(bǔ)零
MM月份未辆，至少兩位數(shù)窟绷。如果不足兩位，則前面補(bǔ)零咐柜。
M月份兼蜈，允許一位數(shù)攘残。
dd日期，至少兩位數(shù)为狸。如果不足兩位歼郭，則前面補(bǔ)零。
d日期辐棒，允許一位數(shù)病曾。
HH小時(shí)，至少兩位數(shù)漾根。如果不足兩位泰涂，則前面補(bǔ)零。
H小時(shí)辐怕，允許一位數(shù)负敏。
mm分鐘，至少兩位數(shù)秘蛇。如果不足兩位其做，則前面補(bǔ)零。
m分鐘赁还，允許一位數(shù)妖泄。
ss秒數(shù)，至少兩位數(shù)艘策。如果不足兩位蹈胡，則前面補(bǔ)零。
s秒數(shù)朋蔫，允許一位數(shù)罚渐。
通過上述不同的格式符組合成一段日期時(shí)間字符串，可任意排版驯妄。
//自定義日期格式
laydate.render({
? elem: '#test'
? ,format: 'yyyy年MM月dd日' //可任意組合
});
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:newDate(1534766888000)//參數(shù)即為：2018-08-20 20:08:08 的時(shí)間戳});
??模塊加載名稱：laypage
? laypage 的使用非常簡單青扔，指向一個(gè)用于存放分頁的容器源织，通過服務(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í)行一個(gè)laypage實(shí)例laypage.render({elem:'test1'//注意谈息，這里的 test1 是 ID，不用加 # 號(hào),count:50//數(shù)據(jù)總數(shù)凛剥，從服務(wù)端得到});});</script></html>
通過核心方法：laypage.render(options)?來設(shè)置基礎(chǔ)參數(shù)侠仇。
參數(shù)選項(xiàng)說明類型默認(rèn)值
elem指向存放分頁的容器，值可以是容器ID犁珠、DOM對(duì)象逻炊。如： 1. elem: ‘id’?注意：這里不能加 # 號(hào)?2. elem: document.getElementById(‘id’)String/Object-
count數(shù)據(jù)總數(shù)踢代。一般通過服務(wù)端得到Number-
limit每頁顯示的條數(shù)。laypage將會(huì)借助 count 和 limit 計(jì)算出分頁數(shù)嗅骄。Number10
limits每頁條數(shù)的選擇項(xiàng)。如果 layout 參數(shù)開啟了 limit饼疙，則會(huì)出現(xiàn)每頁條數(shù)的select選擇框Array[10, 20, 30, 40, 50]
curr起始頁溺森。一般用于刷新類型的跳頁以及HASH跳頁。如：
// 開啟location.hash的記錄
laypage.render({
elem: ‘test1’ ,
count: 500 ,
// 獲取起始頁
curr: location.hash.replace(’#!fenye=’, ‘’)
// 自定義hash值
,hash: ‘fenye’
}); `
Number1
groups連續(xù)出現(xiàn)的頁碼個(gè)數(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（條目選項(xiàng)區(qū)域）奕枝、refresh（頁面刷新區(qū)域。注意：layui 2.3.0 新增） 瓶堕、skip（快捷跳頁區(qū)域）Array[‘prev’, ‘page’, ‘next’]
theme自定義主題隘道。支持傳入：顏色值，或任意普通字符郎笆。如： 1. theme: ‘#c00’ 2. theme: ‘xxx’ //將會(huì)生成 class=“l(fā)ayui-laypage-xxx” 的CSS類谭梗，以便自定義主題String-
hash開啟location.hash，并自定義 hash 值宛蚓。如果開啟激捏，在觸發(fā)分頁時(shí)，會(huì)自動(dòng)對(duì)url追加：#!hash值={curr}?利用這個(gè)凄吏，可以在頁面載入時(shí)就定位到指定頁String/Booleanfalse
當(dāng)分頁被切換時(shí)觸發(fā)缩幸，函數(shù)返回兩個(gè)參數(shù)：obj（當(dāng)前分頁的所有選項(xiàng)值）、first（是否首次竞思，一般用于初始加載的判斷）
laypage.render({elem:'page',count:100//數(shù)據(jù)總數(shù)表谊，從服務(wù)端得到,groups:10// 連續(xù)出現(xiàn)的頁碼個(gè)數(shù),layout:['prev','page','next','limit','count']// 自定義排版,limits:[5,10,20]// layout屬性設(shè)置了limit值，可會(huì)出現(xiàn)條數(shù)下拉選擇框,jump:function(obj,first){// obj包含了當(dāng)前分頁的所有參數(shù)盖喷，比如：console.log(obj.curr);//得到當(dāng)前頁爆办，以便向服務(wù)端請(qǐng)求對(duì)應(yīng)頁的數(shù)據(jù)。console.log(obj.limit);//得到每頁顯示的條數(shù)//首次不執(zhí)行if(!first){//do something}}});
??模塊加載名稱：table
? 創(chuàng)建一個(gè)table實(shí)例最簡單的方式是课梳，在頁面放置一個(gè)元素
距辆，然后通過?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;// 第一個(gè)實(shí)例table.render({elem:'#demo',url:'user.json'// 數(shù)據(jù)接口,cols:[[// 表頭{field:'id',title:'ID',width:80,sort:true,fixed:'left'},{field:'username',title:'用戶名',width:80},{field:'sex',title:'性別',width:80,sort:true},{field:'city',title:'城市',width:80},{field:'sign',title:'簽名',width:177}]]});});</script></html>
數(shù)據(jù)接口 user.json
{"code":0,"msg":"","count":50,"data":[{"id":10000,"username":"user-0","sex":"女","city":"城市-0","sign":"簽名-0"},{"id":10001,"username":"user-1","sex":"男","city":"城市-1","sign":"簽名-1"},{"id":10002,"username":"user-2","sex":"女","city":"城市-2","sign":"簽名-2"},{"id":10003,"username":"user-3","sex":"女","city":"城市-3","sign":"簽名-3"},{"id":10004,"username":"user-4","sex":"男","city":"城市-4","sign":"簽名-4"}]}
機(jī)制適用場景
方法渲染用JS方法的配置完成渲染（推薦）無需寫過多的 HTML，在 JS 中指定原始元素跨算，再設(shè)定各項(xiàng)參數(shù)即可爆土。
自動(dòng)渲染HTML配置，自動(dòng)渲染無需寫過多 JS诸蚕，可專注于 HTML 表頭部分
轉(zhuǎn)換靜態(tài)表格轉(zhuǎn)化一段已有的表格元素?zé)o需配置數(shù)據(jù)接口步势，在JS中指定表格元素，并簡單地給表頭加上自定義屬性即可
將基礎(chǔ)參數(shù)的設(shè)定放在了JS代碼中背犯，且原始的 table 標(biāo)簽只需要一個(gè)選擇器
<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()*方法返回一個(gè)對(duì)象：var tableIns = table.render(options)坏瘩，可用于對(duì)當(dāng)前表格進(jìn)行“重載”等操作。
? 在一段 table 容器中配置好相應(yīng)的參數(shù)漠魏，由 table 模塊內(nèi)部自動(dòng)對(duì)其完成渲染倔矾，而無需你寫初始的渲染方法。
? 1) 帶有?class=“l(fā)ayui-table”?的
標(biāo)簽柱锹。
? 2) 對(duì)標(biāo)簽設(shè)置屬性?lay-data=""?用于配置一些基礎(chǔ)參數(shù)
? 3) 在
標(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>
? 頁面已經(jīng)存在了一段有內(nèi)容的表格哪自，由原始的table標(biāo)簽組成，只需要賦予它一些動(dòng)態(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ù)項(xiàng)table.render({? height: 300? ,url: 'user.json'});? ? ? // 場景二：下述 lay-data 里面的內(nèi)容即為基礎(chǔ)參數(shù)項(xiàng)提陶，切記：值要用單引號(hào)<tablelay-data="{height:300, url:'user.json'}"lay-filter="demo">……</table>// 更多場景：下述 options 即為含有基礎(chǔ)參數(shù)項(xiàng)的對(duì)象> 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"><divclass="layui-btn-container"><!--lay-event 給元素綁定事件名--><buttonclass="layui-btn layui-btn-sm"lay-event="getCheckData">獲取選中行數(shù)據(jù)</button><buttonclass="layui-btn layui-btn-sm"lay-event="getCheckLength">獲取選中數(shù)目</button><buttonclass="layui-btn layui-btn-sm"lay-event="isAll">驗(yàn)證是否全選</button></div></script><!-- 表頭工具欄 --><scripttype="text/html"id="barDemo"><aclass="layui-btn layui-btn-xs"lay-event="edit">編輯</a><aclass="layui-btn layui-btn-danger layui-btn-xs"lay-event="del">刪除</a></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)前表格被選中的記錄對(duì)象隙笆，返回?cái)?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+' 個(gè)');break;case'isAll':// checkStatus.isAll 判斷記錄是否被全選layer.msg(checkStatus.isAll?'全選':'未全選');break;// 自定義頭工具欄右側(cè)圖標(biāo) - 提示case'LAYTABLE_TIPS':layer.alert('這是工具欄右側(cè)自定義的一個(gè)圖標(biāo)按鈕');break;};});/**
? * 監(jiān)聽行工具事件
? */table.on('tool(demo)',function(obj){// 得到當(dāng)前操作的tr的相關(guān)信息vardata=obj.data;if(obj.event==='del'){// 確認(rèn)框layer.confirm('真的刪除行么',function(index){// 刪除指定trobj.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);});});
<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對(duì)象// 執(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ū)ο髒ardemoReload=$('#demoReload');table.reload('demo',{where:{// 設(shè)定異步數(shù)據(jù)接口的額外參數(shù)升筏，任意設(shè)id:demoReload.val()},page:{// 讓條件查詢從第一頁開始查詢撑柔，不寫則從當(dāng)前頁開始查詢，此頁之前的數(shù)據(jù)將不納入條件篩選curr:1// 重新從第 1 頁開始}});// 只重載數(shù)據(jù)});});
sort: true, edit: ‘text’}">積分
```
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);});});
<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對(duì)象// 執(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ū)ο髒ardemoReload=$('#demoReload');table.reload('demo',{where:{// 設(shè)定異步數(shù)據(jù)接口的額外參數(shù)您访，任意設(shè)id:demoReload.val()},page:{// 讓條件查詢從第一頁開始查詢铅忿，不寫則從當(dāng)前頁開始查詢，此頁之前的數(shù)據(jù)將不納入條件篩選curr:1// 重新從第 1 頁開始}});// 只重載數(shù)據(jù)});});
