layui是個很好用的框架，但是在使用中也存在好多很多坑，簡單的記錄一下以免后面再掉坑里。
1、layui有很多內置的模塊，在使用過程中一定要注意先提前引入模塊和內部函數中聲明一次。包括彈框（div,簡單的按鈕組，iframe，msg）分頁，表格，表單，文件上傳，日期等模塊。列如：
layui.use(['layer', 'form','element','table '], function(){
var table = layui.table, 表格
$= layui.jquery, 內置jquery
form = layui.form, 表單
laypage = layui.laypage; 分頁
var beginTime,endTime;
var laydate = layui.laydate; 日期組建
var limit=10,page=1;
//日期組建的
laydate.render({
elem: '#date',
range: true
,ready: function(date){
// console.log(date); //得到初始的日期時間對象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
}
,done: function(value, date, endDate){
$('#date').css('width',200);
var arrTime=value.split(' - ');
beginTime=arrTime[0];
endTime=arrTime[1]
}
});
});
2.layui中 slect form表單元素 不美化顯現的問題
1.layui中美化的表單元素 在渲染完成要添加 form.render()
|
1
2
3
4
5
6
|
$.each($(
'#classId option'
),function (i, v) {
if
($(v).val()==data.id){
$(v).attr(
"selected"
,
"selected"
)
}
})
form.render()
|
2.渲染之后還是沒有，檢查一下html結構 是否在父級元素上有layui-form的類名
|
1
2
3
4
5
6
|
<div
class
=
"layui-form"
>
<label
for
=
"unit"
class
=
"col-lg-2 control-label"
> 商品單位:</label>
<div
class
=
"col-lg-6"
>
<
select
class
=
"layui-input"
id=
"unit"
lay-search></
select
>
</div>
</div>
|
3.layui select 多選框
官方文檔並沒有 select多選框 不過大牛們利用layui改造了很多select的多選框 社區有一些介紹 戳這里 我用的是select多選v3版本 有一些問題 但是對於目前的功能比較適合 地址戳這里 這里對select v.3的功能介紹展示的很全 以后用到可以直接訪問
select.v4地址 戳這里
接下來 我記錄一下 我的使用 效果圖如下
（1）現引入資源 剛附上的鏈接里 拿來直接用的資源
（2）在頁面引入 js
還有一種方式 是將js引入到layui的資源js中
和其他內置模塊一樣 引入模塊名 並且調用 但是這個需要配置一下路徑
|
1
2
|
layui.use([
'table'
,
'upload'
,
'laypage'
,
'formSelects'
], function(){
var
upload = layui.upload,laydate = layui.laydate,form = layui.form,$ = layui.$;
var
formSelects = layui.formSelects
|
html中
|
1
|
xm-
select
-search 搜索
|
|
1
|
xm-
select
-type 樣式類型
|
|
1
|
xm-
select
選擇器標志 和js中 對應
|
|
1
|
<
select
id=
"serviceNetworkId"
xm-
select
=
"select"
xm-
select
-type=
"3"
xm-
select
-search=
""
lay-filter=
"xm-select"
></
select
>
|
js中 一般layui 中表單渲染 是from.render()
|
1
2
3
4
5
6
7
8
9
10
11
12
|
formSelects.render({
name:
'select'
, 和xm-
select
對應 標志應用
on
: function(data, arr){
var
a=
''
;
$.each(arr,function (i,v) {
a+=v.val+
','
})
//把多選的內容存儲起來
goodCreate.serviceNetworkIdStr=a.slice(0,-1)
}
});
|
（3）賦值，當用戶已經編輯過一次 如何反寫回去呢
|
1
|
formSelects.value(
'select'
, serviceNetworkIdArr);
|
|
1
|
serviceNetworkIdArr是一個數組 是option的value組成的數組
|
formSelects.value('select'); //獲取選中的值 formSelects.value('select', 'val'); //獲取選中的val數組 formSelects.value('select', 'name'); //獲取選中的name數組 formSelects.value('select', [1, 3]); //動態賦值4.layui 日期插件laydate 閃沒 問題
問題描述：當頁面高度不夠時（高度不夠，指的是 input輸入框下面的頁面高度 小於 時間控件的高度），時間控件，點擊以后 會閃沒，當退出頁面 ，再返回以后，時間控件正常出現；
解決方法：
將觸發 方法 改為 click
|
1
2
3
4
|
laydate.render({
elem:
'#birthLeader'
,trigger:
'click'
});
|
效果：無論是否 高度足夠，均可以出現 控件 ，當高度不夠時，會遮擋 input輸入框
5.layui圖片上傳
看需求 ，是否 同步還是異步上傳
1.異步上傳 點擊上傳照片 按鈕 就上傳到服務器，返回線上圖片地址，等提交表單提交的時候 ，將其它表單信息 和 圖片的線上地址 一起提交
2.同步提交 ，點擊上傳照片，后 僅僅 將圖片的base64格式 存儲下來，並不掉接口，等表單提交的時候，將其他表單信息以及圖片的base64 字符串 一起提交
6.layer.open 彈框 出現 object object
|
1
2
3
4
5
6
|
layer.open({
title:
'添加團隊團員'
,area: [
'400px'
,
'520px'
]
,btn: []
,content: $(
'#form-box'
)
|
當content為一個 dom元素的時候，彈出框出現異常
解決辦法： 將type設置為 1,內容就正常了
7.彈出框 不居中問題
正常情況下，彈出框 默認是居中的位置（在沒有offset的情況下），現在 遇到一個問題，彈出框 水平居中，高度偏下，解決辦法
1.動態改變位置
|
1
2
3
4
|
layer.style(index 的值 彈出框 唯一標識, {
top:
'50%'
,
transform:
'translateY(-50%)'
});
|
2.由於彈出框 fixed,定位，但是 內容高度 獲取不對，此時 給body添加 ，height:100%;也可以解決
8.關於頁面layer報錯
有很多時候，這個頁面不需要用到layui的form,table，或者其他模塊，所以
不引用 這些模塊
layui.use(['form','laydate','upload'], function(){代碼}）
，但需要用到layer模塊，此時 直接調用會報錯
|
1
2
3
4
5
6
7
8
9
|
<script src=
"layui/layui.js"
></script>
<script>
$(
'.dele'
).click(function () {
layer.open({
title:
'在線調試'
,content:
'可以填寫任意的layer代碼'
});
})
</script>
|
而在有引用 form,table等模塊的時候，直接調用並不會報錯，能夠正常使用
這是因為，模塊之間的相互依賴，當引用這些功能性模塊的時候，會自動引用layer，但是當不使用其他模塊的時候，只需要layer的時候需要 單獨引入 ，像下面這樣
layui.use(['layer']);
$('.dele').click(function () {
layer.open({
title: 'test'
,content: '可以填寫任意的layer代碼'
});
})
就不會報錯了
8.關於lay-search 屬性 英文區分大小寫的問題
|
1
2
3
4
|
<
select
name=
"Nationality"
lay-search lay-filter=
"nationality"
>
<option value=
"中國"
>中國</option>
<option value=
"其他"
>其他</option>
</
select
>
|
layui提供搜索功能，切搜索是根據option的text而不是value值，這樣很便捷，但是layui這里對於英文來說是區分大小寫的，所以 英文輸入的時候 不太便捷 需要修改源碼進行優化
在layui.all.js和form.js中 搜索 無匹配項，修改兩處 轉為大寫 此時 就會不區分大小寫了
9.laydate無法正常顯示的問題，
laydate接受的格式默認為 datetime類型下 為：yyyy-MM-dd HH:mm:ss，當數據庫數據為 yyyy-MM-dd HH:mm的時候 ，會由於格式不正確，而導致無法正常顯示的問題
laydate.render({
elem: '#goTime',
type:'datetime',
format:'yyyy-MM-dd HH:mm'
});
解決辦法：1.在讀數據的時候，動態判斷並修改格式為統一
2.前后台，數據保持統一性，防止此類問題發生
10.上傳圖片 當重復提交同一個圖片 無法再次吊起（ input file也是一樣）
解決辦法：
<1>. 當圖片是異步上傳 可以在選擇上傳完 對文件隊列 進行刪除
|
1
2
3
4
5
6
7
8
9
10
|
, choose: function (obj) {
var
files =
this
.files = obj.pushFile();
//將每次選擇的文件追加到文件隊列
}
, done: function (res, index, upload) {
alert(index);
layer.msg(
'添加失敗！'
);
//var files = upload.pushFile();
delete
this
.files[index]
//console.log(res)
}
|
<2>.修改源碼 當單個圖片是異步上傳 可以在選擇上傳完 對文件隊列 進行清空
<3>當圖片是同步上傳，上傳完成后，需要保存 ，等待和form一起提交 ，就不可以 清空，或者 利用兩個input進行提交
提供一個博客 寫過相關解決辦法 以供參考 地址
11.日期范圍 動態切換問題
laydate 提供了 日期范圍 可以選擇，不過正常需求中，日期范圍一般都是 動態可變的 ，所以 來寫一下實現這個的方法
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
//兩個時間綁定
var
startDate=laydate.render({
elem:
'#intime'
,trigger:
'click'
,min:
'2019-10-06'
,max:
'2019-10-07'
,done: function(value, date, endDate){
console.log(value);
//得到日期生成的值，如：2017-08-18
if
($(
'#outtime'
).val().replace(/\-/g,
''
)<=$(
'#intime'
).val().replace(/\-/g,
''
)){
var
index=layer.open({
title:
'警告'
,content:
'入住時間不能比離開時間晚'
,yes: function(index, layero){
//關閉彈框
layer.close(index);
$(
'#intime'
).val(
''
)
}
});
}
else
{
// 根據選中的值 獲取數據 重新渲染頁面
homeSurplus()
}
}
});
//重新設置 最大值 最小值 並重新渲染
function timeMaxMinChange(startDateMin,startDateMax){
//注意，月份是從 0開始 到11
startDate.config.min ={
year:timeForm(endDateMIn).year,
month:timeForm(endDateMIn).month,
date: timeForm(endDateMIn).date,
hours: 0,
minutes: 0,
seconds : 0
};
startDate.config.max ={
year:timeForm(endDateMax).year,
month:timeForm(endDateMax).month,
date: timeForm(endDateMax).date,
hours: 0,
minutes: 0,
seconds : 0
};
}
|
2020-04-16補充
12.laydate 只取時分 hh:mm 不要時分秒 hh:mm:ss
需要更改
在css最下面添加
|
1
2
3
4
5
6
7
8
9
|
/*隱藏秒*/
.laydate-time-list {
padding-bottom: 0;
overflow: hidden
}
/*時分 寬度 */
.laydate-time-list>li {
width: 50%
}
|
js 確保 可讀可寫（當設置為hh:mm:ss 而接受的數據是hh:mm形式的情況下 不會回顯 所以必須保持一致性）
|
1
2
3
4
5
6
|
laydate.render({
elem:
'#comeTime1'
,
type:
'time'
,
format:
'HH:mm'
, trigger:
'click'
});
|
效果
