關於layui踩過的坑
最近在作二手車的後臺系統搭建，前端使用的框架是 layui，如今我對layui進行一下簡單的記錄。css
layui兼容Ie7以上全部瀏覽器，內置了不少好用的模塊，包括彈框（div,簡單的按鈕組，iframe，msg）分頁，表格，表單，文件上傳，日期等模塊，而模塊的引入也十分人性化，使用layui.use引入相應的所需模塊，相似於require.jshtml
layui.use(['layer', 'form'], function(){
var layer = layui.layer
,form = layui.form;
});
今天總結一下在使用layui過程當中遇到的問題前端
1.內置模塊功能不能用 必定要用use引入 你要使用的組建，並在內部函數中聲明一次。 jquery
layui.use(['table','laypage'], 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] } }); });
2019-09-23數據庫
layui內容彈框模塊 layer ，當頁面 引入其餘模塊的時候 因爲依賴關係 會自動引入，當頁面 沒有引入其餘模塊 ，而需使用layer的時候 ，須要 layui.use('layer') 便可使用數組
2.layui中 slect form表單元素 不美化顯現的問題瀏覽器
1.layui中美化的表單元素 在渲染完成要添加 form.render() 服務器
$.each($('#classId option'),function (i, v) {
if($(v).val()==data.id){
$(v).attr("selected","selected")
}
})
form.render()
2.渲染以後仍是沒有，檢查一下html結構 是否在父級元素上有layui-form的類名框架
<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 多選框dom
官方文檔並無 select多選框 不過大牛們利用layui改造了不少select的多選框 社區有一些介紹 戳這裏 我用的是select多選v3版本 有一些問題 可是對於目前的功能比較適合 地址戳這裏 這裏對select v.3的功能介紹展現的很全 之後用到能夠直接訪問
select.v4地址 戳這裏
接下來 我記錄一下 個人使用 效果圖以下
（1）現引入資源 剛附上的連接裏 拿來直接用的資源
（2）在頁面引入 js
還有一種方式 是將js引入到layui的資源js中
和其餘內置模塊同樣 引入模塊名 而且調用 可是這個須要配置一下路徑
layui.use(['table','upload','laypage','formSelects'], function(){
var upload = layui.upload,laydate = layui.laydate,form = layui.form,$ = layui.$;var formSelects = layui.formSelects
html中
xm-select-search 搜索
xm-select-type 樣式類型
xm-select 選擇器標誌 和js中 對應
<select id="serviceNetworkId" xm-select="select" xm-select-type="3" xm-select-search="" lay-filter="xm-select"></select>
js中 通常layui 中表單渲染 是from.render()
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）賦值，當用戶已經編輯過一次 如何反寫回去呢
formSelects.value('select', serviceNetworkIdArr);
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
laydate.render({
elem: '#birthLeader'
,trigger: 'click'
});
效果：不管是否 高度足夠，都可以出現 控件 ，當高度不夠時，會遮擋 input輸入框
5.layui圖片上傳
看需求 ，是否 同步仍是異步上傳
1.異步上傳 點擊上傳照片 按鈕 就上傳到服務器，返回線上圖片地址，等提交表單提交的時候 ，將其它表單信息 和 圖片的線上地址 一塊兒提交
var uploadLeader = upload.render({
elem: '#upMan' //綁定元素
,accept:'images'
// ,auto:'false'
,auto:'true' //默認爲true ，異步提交
,url:'/upfile/img'
,size:'1024' //限制 kb
,before: function(obj){ //obj參數包含的信息，跟 choose回調徹底一致，可參見上文。
layer.load(); //上傳loading
}
,choose:function (obj) {
//將每次選擇的文件追加到文件隊列
var files = obj.pushFile();
//預讀本地文件，若是是多文件，則會遍歷。(不支持ie8/9)
obj.preview(function(index, file, result) {
// console.log(index); //獲得文件索引
// console.log(file); //獲得文件對象
// console.log(result); //獲得文件base64編碼，好比圖片
//下面這個只是爲了操做畫面 並無上傳 應該上傳成功之後 執行 done中執行
$('#upMan').parents('.add-img-box ').find('img').attr('src',result)
})
}
,done: function(res){
layer.closeAll('loading'); //關閉loading
//上傳完畢回調
//將圖片替換爲上傳的圖片
$('#upMan').parents('.add-img-box ').find('img').attr('src',res.data)
}
,error: function(){
layer.closeAll('loading'); //關閉loading
//請求異常回調
}
});
2.同步提交 ，點擊上傳照片，後 僅僅 將圖片的base64格式 存儲下來，並不掉接口，等表單提交的時候，將其餘表單信息以及圖片的base64 字符串 一塊兒提交
var uploadLeader = upload.render({
elem: '#upMan' //綁定元素
,accept:'images'
,auto:'false'
,size:'1024' //限制 kb
,choose:function (obj) {
//將每次選擇的文件追加到文件隊列
var files = obj.pushFile();
//預讀本地文件，若是是多文件，則會遍歷。(不支持ie8/9)
obj.preview(function(index, file, result) {
// console.log(index); //獲得文件索引
// console.log(file); //獲得文件對象
// console.log(result); //獲得文件base64編碼，好比圖片
//下面這個只是爲了操做畫面 並無上傳 應該上傳成功之後 執行 done中執行
$('#upMan').parents('.add-img-box ').find('img').attr('src',result)
})
}
});
6.layer.open 彈框 出現 object object
layer.open({
title: '添加團隊團員'
,area: ['400px','520px']
,btn: []
,content: $('#form-box')
當content爲一個 dom元素的時候，彈出框出現異常
解決辦法： 將type設置爲 1,內容就正常了
layer.open({
title: '添加團隊團員'
,type:1
,area: ['400px','520px']
,btn: []
,content: $('#form-box')
});
7.彈出框 不居中問題
正常狀況下，彈出框 默認是居中的位置（在沒有offset的狀況下），如今 遇到一個問題，彈出框 水平居中，高度偏下，解決辦法
1.動態改變位置
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模塊，此時 直接調用會報錯
<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 屬性 英文區分大小寫的問題
<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>. 當圖片是異步上傳 能夠在選擇上傳完 對文件隊列 進行刪除
, 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進行提交
var imgUpload=upload.render({
elem: '#upMan' //綁定元素
,accept:'file'
,auto:false
// ,size:'1024' //限制 kb
,choose:function (obj) {
//將每次選擇的文件追加到文件隊列
var files = obj.pushFile();
//預讀本地文件，若是是多文件，則會遍歷。(不支持ie8/9)
obj.preview(function(index, file, result) {
common.clearError('headImg')
if(common.isImg(file.name)){
//新增 圖片裁剪
if(file.size<common.imgSzieMax && file.size>common.imgSzieMin ){
//新增 圖片裁剪
$(".dialog").show();
$('#image').cropper('destroy').attr('src', result).cropper({
aspectRatio: 377/472, // 縱橫比
viewMode: 1,
guides: false,
});
$(".finish").on('click', function () {
//肯定裁剪
crop();
$(".dialog").hide();
});
$(".cancle").on('click', function () {
//裁剪取消
crop_cancle();
$(".dialog").hide();
});
// $('#headImg').val(result);
// $('#upMan').parents('.add-img-box ').find('img').attr('src',result)
//新增 圖片裁剪
}else{
common.nameEroor($('#headImg'),'文件大小必須在50k和350k之間!',)
common.errorAlert('文件大小必須在50k和350k之間!')
}
//新增 圖片裁剪
}else{
common.nameEroor($('#headImg'),'僅支持jpg圖片格式!')
common.errorAlert('僅支持jpg圖片格式!')
}
})
imgUpload.config.elem.next()[0].value = ''
}
});
提供一個博客 寫過相關解決辦法 以供參考 地址
11.日期範圍 動態切換問題
laydate 提供了 日期範圍 能夠選擇，不過正常需求中，日期範圍通常都是 動態可變的 ，因此 來寫一下實現這個的方法
//兩個時間綁定
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
};
}
- 1. 關於layui踩過的坑
- 2. 關於Kotlin踩過的一些坑
- 3. 關於安裝sql踩過的坑
- 4. 踩過的坑
- 5. 《踩過的坑》
- 6. layui,iframe高度設置踩的坑
- 7. 踩過的python坑
- 8. Mysql8.0.11踩過的坑
- 9. pyinstaller踩過的坑
- 10. kafka踩過的坑
- 更多相關文章...
- • Spring基於Annotation裝配Bean - Spring教程
- • Spring基於XML裝配Bean - Spring教程
- • ☆基於Java Instrument的Agent實現
- • NewSQL-TiDB相關
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. js中 charCodeAt
- 2. Android中通過ViewHelper.setTranslationY實現View移動控制（NineOldAndroids開源項目）
- 3. 【Android】日常記錄：BottomNavigationView自定義樣式，修改點擊後圖片
- 4. maya 文件檢查 ui和數據分離 （一）
- 5. eclipse 修改項目的jdk版本
- 6. Android InputMethod設置
- 7. Simulink中Bus Selector出現很多? ? ?
- 8. 【Openfire筆記】啓動Mac版Openfire時提示「系統偏好設置錯誤」
- 9. AutoPLP在偏好標籤中的生產與應用
- 10. 數據庫關閉的四種方式
- 1. 關於layui踩過的坑
- 2. 關於Kotlin踩過的一些坑
- 3. 關於安裝sql踩過的坑
- 4. 踩過的坑
- 5. 《踩過的坑》
- 6. layui,iframe高度設置踩的坑
- 7. 踩過的python坑
- 8. Mysql8.0.11踩過的坑
- 9. pyinstaller踩過的坑
- 10. kafka踩過的坑