layui目錄介紹：
├─css //css目錄
│ │─modules //模塊css目錄（一般如果模塊相對較大嘱根，我們會(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可以采用全部加載或者按需加載兩種方式使用
如果想要提高性能可以按需加載：
引入layui.js文件
<script src="/lib/layui/layui.js"></script>
使用時(shí)加載自己需要的模塊就行
layui.use(['jquery', 'layedit', 'form'], function () {
var $ = layui.jquery,
layedit = layui.layedit,
form = layui.form,
layer = layui.layer;
})
如果覺得麻煩，也可以直接引入全部：
<script src="/lib/layui/layui.all.js"></script>
這樣就可以直接使用全部模塊了芥被；
layui自帶了穩(wěn)定jquery模塊把篓，你可以使用layui中的jquery，也可以導(dǎo)入其他的jquery庫丑勤；
因?yàn)閘ayui是重新渲染了頁面的错维，所以在數(shù)據(jù)更新時(shí)會(huì)出現(xiàn)很多問題。
使用筆記：
常用layui屬性：
lay-filter 一般用于監(jiān)聽
lay-verify 用于表單驗(yàn)證
lay-submit 表單提交
1橄唬、 表單元素初始化值
form.val('addArticleForm', { //form的lay-filter屬性
'remarks': sortid //元素的name屬性
});
2赋焕、監(jiān)聽事件
//release 為元素的lay-filter屬性
//submit為監(jiān)聽的事件或者標(biāo)簽
form.on('submit(release)', function (data) {
}）;
3、表單驗(yàn)證(表單驗(yàn)證要寫在表單提交之前仰楚，在提交時(shí)會(huì)自動(dòng)驗(yàn)證)
form.verify({
title: function (val) {
if (val.trim().length == 0) {
return '文章標(biāo)題不能為空';
}
},
});
4隆判、表單提交
(1)form提交
form.on('submit(release)', function (data) {
var field = data.field;
})；
(1)ajax提交（return false 代表禁止form提交）
form.on('submit(release)', function (data) {
var field = data.field;
retrun false僧界；
})侨嘀；
5、分頁器
laypage.render({
elem: 'indexPage' //注意捂襟，這里的 indexPage是 ID咬腕，不用加 # 號(hào)
, count: count //數(shù)據(jù)總數(shù)，從服務(wù)端得到
, theme: '#CDB5CD' //顏色
, limit: 2 //每頁顯示數(shù)量
, curr: 1//獲取起始頁
, prev: '上一頁'
, next: '下一頁'
, skip: true
, layout: ['count', 'prev', 'page', 'next', 'skip']
, jump: function (obj, first) {
//首次不執(zhí)行
//do something
if (!first) {
location.href = "/admin/Index/toArticles_drafts?sortid=" + sortid + "&page=" + obj.curr;
}
}
});
6葬荷、layui表格
table_sort = table.render({
id: 'sortid', //這里可以作為保留字段涨共，當(dāng)你不想將某個(gè)字段顯示出來卻要使用它時(shí)，可以將此字段寫在這里宠漩，用逗號(hào)隔開
elem: '#sort_table',
cols: [[
{title: '序號(hào)', type: 'numbers', width: '10%', align: 'center', fixed: 'left'}
, {field: 'sortname', title: '分類名', align: 'center', width: '25%'}
, {field: 'createtime', title: '創(chuàng)建時(shí)間', align: 'center', width: '25%'}
, {title: '操作', align: 'center', toolbar: '#bar'}
]],
url: '/admin/ArticlesSort/getArticlesSortByPage',
where: { //參數(shù)
key: ''
},
page: true, //開啟分頁
limit: 10,
limits: [10, 20, 30, 40],
loading: true, //加載動(dòng)畫
text: {
none: '沒有找到數(shù)據(jù)QAQ'
}
});
7举反、layui彈出層
基礎(chǔ)參數(shù)
layuiicon 顯示的icon
1
2
3
4
5
6
time 自動(dòng)關(guān)閉所需毫秒
例：time: 5000，即代表5秒后自動(dòng)關(guān)閉扒吁，注意單位是毫秒（1秒=1000毫秒）火鼻，如果不寫一般默認(rèn)是為0，提示框默認(rèn)為3000
anim 彈出動(dòng)畫
anim: -1 不顯示動(dòng)畫
anim: 0 平滑放大。默認(rèn)
anim: 1 從上掉落
anim: 2 從最底部往上滑入
anim: 3 從左滑入
anim: 4 從左翻滾
anim: 5 漸顯
anim: 6 抖動(dòng)
詳細(xì)參數(shù)見文檔：https://www.layui.com/doc/modules/layer.html
（1）帶輸入框的彈出層(可用于敏感操作前的密碼驗(yàn)證)
//formType： 0（文本）默認(rèn)1（密碼）2（多行文本）
layer.prompt({formType: 1,title: "請輸入密碼"}, function (val, index) {
if (val == "xxx") {
layer.msg("密碼正確")
}else{
layer.msg("密碼錯(cuò)誤")
}
}）魁索；
（2）layui確認(rèn)提示框
layer.confirm("確定要公之于眾嗎QVQ融撞？", {btn: ['是的,我確定', '還是算了吧']}, function (index) {
layer.close(index);
}）
layer.confirm("執(zhí)行哪個(gè)操作？", {btn: ['A操作', 'B操作']},
function () {
//A操作
}蛾默，
function () {
//B操作
})
layer.confirm('執(zhí)行哪個(gè)操作懦铺？', {
btn: ['按鈕一', '按鈕二', '按鈕三'] //可以無限個(gè)按鈕
,btn3: function(index, layero){
//按鈕【按鈕三】的回調(diào)
}
}, function(index, layero){
//按鈕【按鈕一】的回調(diào)
}, function(index){
//按鈕【按鈕二】的回調(diào)
});
（3）layui提示：
信息框：
layer.alert('信息框', {icon:1},function(index){
//回調(diào)事件
layer.close(index);
});
提示框：
layer.msg('提示框', {
icon: 1,
time: 1500//1.5秒關(guān)閉（如果不配置，默認(rèn)是3秒）
}, function(){
//回調(diào)事件
});
7支鸡、layui富文本編輯器
/**
* 初始化富文本編輯器
*/
var edit = layedit.build('whisperEditor', {
uploadImage: { //圖片上傳接口
url: '/admin/Index/uploadImg'
}
});
ps:
layedit修改預(yù)覽圖片的style(修改大小)：
打開layedit.js文件,搜索“img{”冬念，然后再后邊添加需要的style
layedit修改表情圖片的style：
打開layedit.js文件,搜索“img{”，在后邊增加style：""
layedit修改上傳的圖片儲(chǔ)存時(shí)的style(即編輯器里未解析的img標(biāo)簽)：
打開layedit.js文件,搜索“src: e.data.src,”牧挣，然后再后邊添加需要的style
以上大多是使用時(shí)我遇到的一些問題急前，希望對同樣遇到此問題的能有所幫助。
其他：
基于layui的下拉多選框：https://hnzzmsf.github.io/example/example_v4.html
2019/04/14更新：
在上周修改數(shù)據(jù)的時(shí)候瀑构，類似這種：
裆针，在點(diǎn)擊編輯的時(shí)候，有些行可以正常的使用寺晌，有些行會(huì)報(bào)這個(gè)錯(cuò)誤世吨，
Uncaught SyntaxError: Invalid or unexpected token
使用的toolbar入下：
后來發(fā)現(xiàn)reportingConditions這個(gè)參數(shù)中有空格，而onclick屬性中不允許有空格
最終解決：
在傳參數(shù)之前先encodeURIComponent(d.reportingConditions)編碼呻征，然后使用的時(shí)候用decodeURIComponent()解碼就行了耘婚！
