說(shuō)明：官方文檔寫(xiě)的特別好钉凌！但是我吧咧最，光看是記不到啥東西的，所以就挑著自己寫(xiě)了點(diǎn)御雕，emmmm，基本都是copy官網(wǎng)滥搭，就當(dāng)是我在謄抄酸纲，加強(qiáng)記憶吧！
是一款國(guó)產(chǎn)的框架瑟匆，可以讓后端程序員不需學(xué)習(xí)太多就能操作頁(yè)面
下載
官網(wǎng)：https://www.layui.com/
下載文件說(shuō)明
說(shuō)明：
css
font
images
-
lay：
我們可以看到他是分模塊的管理我們的組件闽坡。并且?guī)臀覀兗闪薺Query。layui.all.js：默認(rèn)引入modules里面的所有模塊愁溜。需要使用的時(shí)候疾嗅，不需要引入，直接
聲明就行了冕象！
var table = layui.table;
var tree = layui.tree;
var form = layui.form;layui.js：默認(rèn)不引入代承，如果想要使用必須手動(dòng)引入,再聲明。
引入方式：
<script>
layui.use(['tree', 'table', 'form'], function (obj) {
var table = layui.table;
var tree = layui.tree;
var form = layui.form;
……
});
</script>
準(zhǔn)備工作
我們先創(chuàng)建一個(gè)web項(xiàng)目
在WEB-INF下新建classes和lib2個(gè)文件夾（Directory）渐扮，配置java class字節(jié)碼編譯路徑
配置jar包存放路徑 lib文件夾
再引入我們下載好的layui：
在webapp下新建一個(gè)文件夾resources论悴，將我們下載好的layui文件夾復(fù)制進(jìn)去掖棉，最后在JSP文件里邊引入就可以了。
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>button</title>
<%--引入css--%>
<link href="resources/layui/css/layui.css">
<%--引入js--%>
<script src="resources/layui/layui.js"></script>
</head>
<body>
<div>
我的web項(xiàng)目
</div>
</body>
</html>
按鈕
有直角按鈕膀估，有圓角按鈕幔亥。大尺寸按鈕，小尺寸按鈕察纯。通過(guò)不同的class名來(lái)設(shè)置
默認(rèn)的按鈕與按鈕之間有間隔帕棉，但我們可以使用按鈕組來(lái)放置多個(gè)相連的按鈕。
圖標(biāo)
布局
選項(xiàng)卡
進(jìn)度條
面板
徽章
動(dòng)畫(huà)
時(shí)間和日期選擇器
表單
//監(jiān)聽(tīng)form表單的提交
form.on('submit(formDemo)', function(data){
console.log(data);
//這里面的data對(duì)應(yīng)的是設(shè)置了name屬性的表單元素饼记，如果表單元素沒(méi)有設(shè)置name屬性的話(huà)笤昨，他的值就不會(huì)被包含在data里邊。
layer.msg(JSON.stringify(data.field));
return false;
});
通過(guò)事件監(jiān)聽(tīng)來(lái)提交表單內(nèi)容握恳。
form.on('event(過(guò)濾器值)', callback)
本例中：
form.on('submit(formDemo)', function(data){……}
過(guò)濾器的值——有l(wèi)ay-submit屬性對(duì)應(yīng)元素的 lay-filter屬性的值
callback——回調(diào)函數(shù)
??回調(diào)函數(shù)的參數(shù)data：值如下圖
??data包含的值解析：
- elem:綁定提交事件的元素（通過(guò)
lay-submit屬性）瞒窒，必須給這個(gè)元素另一屬性lay-filter，用來(lái)標(biāo)識(shí)當(dāng)前的表單乡洼。 - field:對(duì)應(yīng)for表單下的
具有name屬性表單元素的 name:值 組成的對(duì)象。 - form:對(duì)應(yīng)的form
彈出層
數(shù)據(jù)表格
使用html方式（了解）
使用js方式（掌握）渲染數(shù)據(jù)
<%--表格的標(biāo)題欄氮块，數(shù)據(jù)欄我們采用js的方式動(dòng)態(tài)顯示--%>
<table class="layui-table" id="user_table"></table>
......
<script>
//推薦使用這種方式使用layui模塊
layui.use(["table","layer"], function(){
var table = layui.table;
var layer = layui.layer,
$ = layui.$,//不引入jquery是因?yàn)椋簝?nèi)置的模塊layer本身是依賴(lài)jquery的
//執(zhí)行一個(gè) table 實(shí)例
table.render({
elem: '#user_table'
,url: './json/user.json' //數(shù)據(jù)接口
,cols: [[ //表頭
{type: 'checkbox', fixed: 'left'}
,{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left', totalRowText: '合計(jì)：'}
,{field: 'username', title: '用戶(hù)名', width:80}
,{field: 'experience', title: '積分', width: 90, sort: true, totalRow: true}
,{field: 'sex', title: '性別', width:80, sort: true}
,{field: 'score', title: '評(píng)分', width: 80, sort: true, totalRow: true}
,{field: 'city', title: '城市', width:150}
,{field: 'sign', title: '簽名', width: 200}
,{field: 'classify', title: '職業(yè)', width: 100}
,{field: 'wealth', title: '財(cái)富', width: 135, sort: true, totalRow: true}
,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}
]]
//以上的幾個(gè)參數(shù)為必填。
,toolbar: '#toolbarDemo'
});
</script>
table通過(guò)js渲染數(shù)據(jù)：
1.先在html里面定義一個(gè)table巴比，注意需要定義好id屬性
2.在js區(qū)域引入layui的js文件礁遵，并聲明table組件
3.通過(guò)函數(shù)的方式，設(shè)置Table的相關(guān)參數(shù)
4.必填參數(shù)：
- elem：綁定將要顯示數(shù)據(jù)的table（一般通過(guò)Id屬性綁定）
- url：獲取數(shù)據(jù)的地址
- cols:設(shè)置表頭的相關(guān)信息政勃。
5.比較常見(jiàn)的選填參數(shù)
- toolbar：表格頭部工具欄區(qū)域。類(lèi)型值：
toolbar: '#toolbarDemo' ：指向自定義工具欄模板選擇器
toolbar: '<div>xxx</div>' ：直接傳入工具欄模板字符
toolbar: true ：僅開(kāi)啟工具欄奸远，不顯示左側(cè)模板
toolbar: 'default'：讓工具欄左側(cè)顯示默認(rèn)的內(nèi)置模板
若需要“列顯示隱藏”、“導(dǎo)出”讽挟、“打印”等功能懒叛，則必須開(kāi)啟toolbar參數(shù) - page：是否開(kāi)啟分頁(yè)功能，默認(rèn)為false不開(kāi)啟
6.cols以及cols的參數(shù)：cols用于設(shè)置表頭耽梅，是一個(gè)一個(gè)二維數(shù)組
- field：設(shè)定字段名薛窥，字段名是表格數(shù)據(jù)列的唯一標(biāo)識(shí)
- sort: true： 可以對(duì)本列進(jìn)行 上升/下降 排序，不會(huì)新發(fā)起一次請(qǐng)求
- fixed：left/right褐墅，當(dāng)我們一行的單元格過(guò)多的時(shí)候后拆檬，表格就是橫向滾動(dòng)的了洪己。這種情況如果想固定某一列，可以使用這個(gè)參數(shù)竟贯。
- type：設(shè)置列類(lèi)型答捕，默認(rèn)為normal，可選值：
normal（常規(guī)列屑那，無(wú)需設(shè)定）
checkbox（復(fù)選框列）
radio（單選框列拱镐，layui 2.4.0 新增）
numbers（序號(hào)列）
space（空列） - templet：自定義列模板，實(shí)現(xiàn)邏輯處理持际，以及將原始數(shù)據(jù)轉(zhuǎn)化成其它格式沃琅，如時(shí)間戳轉(zhuǎn)化為日期字符等
- toolbar：String類(lèi)型，綁定列工具條蜘欲。設(shè)定后，可在每行列中出現(xiàn)一些自定義的操作性按鈕
templet 參數(shù)：自定義列模板
單元格的內(nèi)容默認(rèn)是完全按照數(shù)據(jù)接口返回的content原樣輸出的郭脂。
如果你想對(duì)某列的單元格實(shí)現(xiàn)邏輯處理澈歉，或者原始數(shù)據(jù)轉(zhuǎn)化成其它格式埃难，則需要用到這個(gè)參數(shù)涡尘。
方式有三種：
暫時(shí)先不學(xué)了，知道就行剧罩！
toolbar參數(shù)： 綁定列工具條
用于比如說(shuō)在表格的每一行加上 查看、編輯挑势、刪除 這樣類(lèi)似的操作按鈕啦鸣。
String類(lèi)型無(wú)默認(rèn)值：通常接受的是一個(gè)選擇器诫给，也可以是一段HTML字符。
數(shù)據(jù)的異步請(qǐng)求
參數(shù)如下：
- url：接口地址凫碌。
默認(rèn)會(huì)自動(dòng)傳遞兩個(gè)參數(shù)：?page=1&limit=30（該參數(shù)可通過(guò) request 自定義）page 代表當(dāng)前頁(yè)碼盛险、limit 代表每頁(yè)數(shù)據(jù)量 - method： 接口http請(qǐng)求類(lèi)型苦掘，默認(rèn)：get
- where： 接口的其它參數(shù)鹤啡。如：where: {token: 'sasasas', id: 123}
- contentType：發(fā)送到服務(wù)端的內(nèi)容編碼類(lèi)型。如果你要發(fā)送 json 內(nèi)容祟牲，可以設(shè)置：contentType: 'application/json'
- headers：接口的請(qǐng)求頭疲眷。如：headers: {token: 'sasasas'}
- parseData：將返回的任意數(shù)據(jù)格式解析成 table 組件規(guī)定的數(shù)據(jù)格式
- request：用于對(duì)分頁(yè)請(qǐng)求的參數(shù)：page狂丝、limit重新設(shè)定名稱(chēng)
- response：重新規(guī)定返回的數(shù)據(jù)格式
獲取選中行
獲取到表格所有的選中行相關(guān)數(shù)據(jù)几颜。語(yǔ)法：table.checkStatus('ID')蛋哭，其中 ID 為基礎(chǔ)參數(shù) id 對(duì)應(yīng)的值
1.通過(guò)方法渲染
……
table.render({
……
id: 'idTest'
});
2.調(diào)用
var checkStatus = table.checkStatus('idTest'); //idTest 即為基礎(chǔ)參數(shù) id 對(duì)應(yīng)的值
console.log(checkStatus.data) //獲取選中行的數(shù)據(jù)
console.log(checkStatus.data.length) //獲取選中行數(shù)量谆趾，可作為是否有選中行的條件
console.log(checkStatus.isAll ) //表格是否全選
導(dǎo)出數(shù)據(jù)
table的事件監(jiān)聽(tīng)
語(yǔ)法：table.on('event(filter)', callback)叛本。event為內(nèi)置事件名来候，filter為容器lay-filter設(shè)定的值
table的監(jiān)聽(tīng)有：
監(jiān)聽(tīng)復(fù)選框事：用戶(hù)選擇了哪些行
監(jiān)聽(tīng)頭部工具欄事件：
監(jiān)聽(tīng)單元格編輯：在單元格里直接修改內(nèi)容
監(jiān)聽(tīng)行單雙擊事件：列工具條中的刪除/編輯等操作
監(jiān)聽(tīng)排序切換：列排序的切換
<table class="layui-table" lay-filter="test_table" id="test_event_table"></table>
//監(jiān)聽(tīng)復(fù)選框事件
table.on('checkbox(test_table)',function(obj){//
console.log(obj);
});
文件上傳
富文本編輯
底層方法
全局配置
方法：layui.config(options)
可以在使用模塊之前，全局化配置一些參數(shù)梆砸，目前支持的全局配置項(xiàng)如下：
layui.config({
dir: '/res/layui/' //layui.js 所在路徑（注意帖世，如果是script單獨(dú)引入layui.js狮暑，無(wú)需設(shè)定該參數(shù)搬男。）彭沼，一般情況下可以無(wú)視
,version: false //一般用于更新模塊緩存姓惑，默認(rèn)不開(kāi)啟。設(shè)為true即讓瀏覽器不緩存敦冬。也可以設(shè)為一個(gè)固定的值脖旱，如：201610
,debug: false //用于開(kāi)啟調(diào)試模式萌庆，默認(rèn)false践险，如果設(shè)為true吹菱，則JS模塊的節(jié)點(diǎn)會(huì)保留在頁(yè)面
,base: '' //設(shè)定擴(kuò)展的Layui模塊的所在目錄鳍刷，一般用于外部模塊擴(kuò)展
});
自定義模塊
方法：layui.define([mods], callback)
通過(guò)該方法可定義一個(gè) Layui模塊倾剿。
參數(shù)：
mods：可選的前痘，用于聲明該模塊所依賴(lài)的模塊芹缔。
callback：模塊加載完畢的回調(diào)函數(shù)，返回一個(gè)exports參數(shù)示罗，用于輸出該模塊的接口蚜点。
layui.define(function(exports){
exports('demo', function(){
alert('Hello World!');
});
});
