layui經驗總結 · 基于thinkphp5小功能設計與實現

一、遇到的問題及解決方案（心得） 1.讓select下拉列表項目中的文字居中 ~~~ .layui-form-select dl dd{ text-align: center; } ~~~ 2.讓表單label標簽的寬度自動取其自身寬度 ~~~ .layui-form-pane .layui-form-label { width: auto; } ~~~ 3.數據表格行背景色設置數據表格中有開啟隔行變色的效果，設置隔行變色的背景如下： ~~~ .layui-table[lay-even] tr:nth-child(even){ background-color: #fafafa; } ~~~ 設置鼠標懸浮的行背景色： ~~~ .layui-table tbody tr:hover,.layui-table-hover{ background-color: #e4efff!important; } ~~~ 設置鼠標點擊（或選擇）某行后的背景色： ~~~ .layui-table-click{ background-color:#f2f2f2!important; } ~~~ 4.讓彈出層信息框寬度自動取其自身寬度 ~~~ .layui-layer-msg{ min-width: auto!important; } ~~~ 5.讓彈出層按鈕分散居中對齊，并讓其中表單元素寬度自動調整這個稍稍有些復雜，直接上代碼 CSS： ~~~ .layui-form-pane .layui-form-label { width: auto; } .layui-form-radio{ padding-right: 0; margin-right:0; } .layui-form-select dl dd{ text-align: center; } .layui-form-pane .layui-input-inline, .layui-form-pane .layui-inline,.layui-form-pane .layui-form-mid { margin-right: 0; } .layui-form-item .layui-input-block{ float:left; margin-left: 0!important; } ~~~ HTML/JS ~~~ <form class="layui-form layui-form-pane" id="layerform" style="display: none;padding:5px"> <input type="hidden" name="id"> <div class="layui-form-item" widthoffset="15"> <div class="layui-inline"> <label class="layui-form-label">姓名</label> <div class="layui-input-inline col12"> <input type="text" name="name" autocomplete="off" placeholder="請輸入姓名" class="layui-input" lay-verify="required" lay-verType="tips"> </div> </div> <div class="layui-inline"> <label class="layui-form-label">年齡</label> <div class="layui-input-inline" width="45"> <input type="text" name="age" autocomplete="off" class="layui-input" lay-verify="positiveInteger" lay-verType="tips"> </div> </div> <div class="layui-inline"> <label class="layui-form-label">性別</label> <div class="layui-input-inline" width="70"> <select name="sex"> <option value="-1">保密</option> <option value="1">男</option> <option value="0">女</option> </select> </div> </div> <div class="layui-inline"> <label class="layui-form-label">是否飲酒</label> <div class="layui-input-inline" width="132"> <input type="radio" name="drink" value="1" title="是"> <input type="radio" name="drink" value="0" title="否" checked> </div> </div> </div> <div class="layui-form-item" widthoffset="15"> <div class="layui-inline"> <label class="layui-form-label">身高（cm）</label> <div class="layui-input-inline" width="45"> <input type="text" name="height" autocomplete="off" class="layui-input" lay-verify="positiveInteger" lay-verType="tips"> </div> </div> <div class="layui-inline"> <label class="layui-form-label">體重（kg）</label> <div class="layui-input-inline" width="45"> <input type="text" name="weight" autocomplete="off" class="layui-input" lay-verify="positiveInteger" lay-verType="tips"> </div> </div> <div class="layui-inline"> <label class="layui-form-label">電話</label> <div class="layui-input-inline col12"> <input type="text" name="telphone" autocomplete="off" placeholder="手機或電話" class="layui-input"> </div> </div> <div class="layui-inline"> <label class="layui-form-label">是否吸煙</label> <div class="layui-input-inline" width="132"> <input type="radio" name="smoke" value="1" title="是"> <input type="radio" name="smoke" value="0" title="否" checked> </div> </div> </div> <div class="layui-form-item" widthoffset="10"> <div class="layui-inline"> <label class="layui-form-label">微信</label> <div class="layui-input-inline col4"> <input type="text" name="wechat" autocomplete="off" placeholder="請輸入微信" class="layui-input"> </div> </div> <div class="layui-inline"> <label class="layui-form-label">QQ</label> <div class="layui-input-inline col4"> <input type="text" name="qq" autocomplete="off" placeholder="請輸入QQ" class="layui-input"> </div> </div> <div class="layui-inline"> <label class="layui-form-label">電子郵箱</label> <div class="layui-input-inline col4"> <input type="text" name="email" autocomplete="off" placeholder="請輸入Email" class="layui-input" lay-verify="email" lay-verType="tips"> </div> </div> </div> <div class="layui-form-item" widthoffset="4"> <label class="layui-form-label">地址</label> <div class="layui-input-block col12"> <input type="text" name="address" autocomplete="off" placeholder="請輸入地址" class="layui-input"> </div> </div> <div class="layui-form-item" widthoffset="4"> <label class="layui-form-label">備注</label> <div class="layui-input-block col12"> <input type="text" name="comment" autocomplete="off" class="layui-input"> </div> </div>  </form> <script> //按鈕分散對齊 function locateBtns(layero, $) { var layerBtns = layero.find(".layui-layer-btn a"); var btns = layero.find(".btns .layui-btn"); var sumWidth = 0; layui.each(layerBtns, function (i, e) { sumWidth += $(e).outerWidth(); }); var gap = (layero.width() - sumWidth) / (layerBtns.length + 1); layui.each(layerBtns, function (i, e) { $(e).css({ position: "relative", left: gap * (i + 1) }); }); sumWidth = 0; layui.each(btns, function (i, e) { sumWidth += $(e).outerWidth(); }); var pLeft = parseInt(layero.find(".layui-layer-wrap").css("padding-left")); var pRight = parseInt(layero.find(".layui-layer-wrap").css("padding-right")); gap = (layero.width() - pLeft - pRight - sumWidth) / (btns.length + 1); layui.each(btns, function (i, e) { $(e).css({ position: "relative", left: gap * (i + 1) }); }); } //表單元素寬度自適應 function resizeForm(layero, $) { var items=layero.find(".layui-form-item"); layui.each(items,function (i,e) { var widthoffset=$(e).attr("widthoffset"); var widthSum=0; layui.each($(e).find(".layui-form-label"),function (i,e) { widthSum+=$(e).outerWidth(true); }); layui.each($(e).find(".layui-input-inline[width]"),function (i,e) { var jdom=$(e); jdom.width(jdom.attr("width")); widthSum+=jdom.outerWidth(true); }); var totalWidth=$(e).width()-widthSum; if(widthoffset){ totalWidth-=widthoffset; } for (var i = 0; i < 12; i++) { var cells=$(e).find(".col"+(i+1)); cells.width(totalWidth*(i+1)/12); } }); locateBtns(layero, $); } //入口函數，綁定事件并調用彈出層 function layerForm(layer,jquery,options){ var resizing=options.resizing; var full=options.full; var restore=options.restore; var success=options.success; var $=jquery; options.btnAlign="l"; options.resizing=function(layero){ resizeForm(layero, $); resizing && resizing(layero); } options.full=function(layero){ resizeForm(layero, $); full && full(layero); } options.restore=function(layero){ resizeForm(layero, $); restore && restore(layero); } options.success=function(layero, index){ resizeForm(layero, $); success && success(layero, index); } return layer.open(options); } //彈出層調用 var index=layerForm(layer,$,{ title:"查看", content:$("#layerform"), type:1, area: "710px", maxmin: true, btn:['確定','取消'] }); </script> ~~~ 6.讓加載層文字居中，寬度自適應不會換行 ~~~ .layui-layer-loading .layui-layer-content{ padding-top: 40px!important; width: auto!important; height: auto!important; background-position-x: 50%!important; color:#FF5722; } ~~~ 7.修復數據表格初始化時不會顯示加載提示BUG 版本layui-v2.2.5 layui table首次加載沒有顯示loading，通過修改源碼可以實現方法：在layui.all.js文件中的下面位置添加js代碼 ~~~ if(n.url){i=i||a.loading();} ~~~ 8.表單增強插件，主要使用表單自動填充功能首先這里須要修改幾行代碼，否則無法在同一個頁面使用該插件同時操作多個表單（多個EnhanceForm對象）！代碼中原有前10行內容如下： ~~~ layui.define(['jquery', 'form'], function(exports) { var $ = layui.jquery, form = layui.form, formObj, hint = layui.hint(); var EnhanceForm = function(options) { this.options = options; formObj = $(options.elem); }; ~~~ 將其替換為如下內容： ~~~ layui.define(['jquery', 'form'], function(exports) { var $ = layui.jquery, form = layui.form, hint = layui.hint(); var EnhanceForm = function(options) { this.options = options; this.formObj = $(options.elem); }; ~~~ 并且將后續代碼中出現的所有formObj變量改為this.formObj 同時我在其基礎上添加了幾個功能： ~~~ //將表單轉化為json對象 EnhanceForm.prototype.serializeJson = function() { var serializeObj={}; var array=this.formObj.serializeArray(); var str=this.formObj.serialize(); layui.each(array,function(i,e){ if(serializeObj[e.name]){ if($.isArray(serializeObj[e.name])){ serializeObj[e.name].push(e.value); }else{ serializeObj[e.name]=[serializeObj[e.name],e.value]; } }else{ serializeObj[e.name]=e.value; } }); return serializeObj; }; //禁用所有表單元素 EnhanceForm.prototype.disableAll = function() { var eles=this.formObj.find("input,select,textarea"); eles.attr("disabled","disabled"); form.render(); }; //啟用所有表單元素 EnhanceForm.prototype.enableAll = function() { var eles=this.formObj.find("input,select,textarea"); eles.removeAttr("disabled"); form.render(); }; ~~~ 9.form表單提交事件bug 表單綁定提交事件如下： ~~~ form.on('submit(filterName)', function(data){ }); ~~~ 其中參數data.field包含當前表單容器的全部表單字段，名值對形式：{name: value} 但是如果表單中含有checkbox則會出現bug，如：表單中含有如下3個checkbox： ~~~ <input type="checkbox" name="interest" title="寫作" value="writing"> <input type="checkbox" name="interest" title="音樂" value="music"> <input type="checkbox" name="interest" title="電影" value="movie"> ~~~ 用戶同時選中“寫作”、“電影”兩項此時data.field中只有{interest:"movie"}這一項。解決方案：修改layui的form模塊源碼form.js 原來477-478行代碼如下： ~~~ if(/^checkbox|radio$/.test(item.type) && !item.checked) return; field[item.name] = item.value; 將其修改為： if(/^checkbox|radio$/.test(item.type) && !item.checked) return; if(field[item.name]){ if(!(field[item.name] instanceof Array)){ field[item.name]=[field[item.name]]; } field[item.name].push(item.value); }else{ field[item.name] = item.value; } ~~~ 這是data.field中為{interest:["writing","movie"]} PS：如果你的表單中有多個name相同的其他類型表單元素也同理！同時不會影響類似于下面這種數組name表單： ~~~ <input type="text" name="test[0]"> <input type="text" name="test[1]"> <input type="text" name="test[2]"> ~~~ 10.關于laydate控件首先，用一個頁面綁定多個laydate控件bug，這個問題貌似有很多人提出過，其中有人已經給出了解決方案：http://fly.layui.com/jie/14329/。不過貌似版本升級后源碼已經發生了變化，現在需要做如下修改，原來的laydate.js的1802-1806行代碼如下： ~~~ if(e.target === options.elem[0] || e.target === options.eventElem[0] || e.target === lay(options.closeStop)[0]){ return; } ~~~ 修改后如下： ~~~ var elem=options.elem.some(function (el) { return e.target === el }); var eventElem=options.eventElem.some(function (el) { return e.target === el }); var closeStop=lay(options.closeStop).some(function (el) { return e.target === el }); if(elem||eventElem||closeStop){ return; } ~~~ 有時還會報如下錯誤： ~~~ laydate.js:797 Uncaught TypeError: Cannot read property 'appendChild' of undefined at Class.hint (VM13097 laydate.js:797) at Class.checkDate (VM13097 laydate.js:922) at Class.remove (VM13097 laydate.js:742) at HTMLDocument.<anonymous> (VM13097 laydate.js:1809) ~~~ 可以修改源碼修復，源碼834-837行如下： ~~~ Class.prototype.checkDate = function(fn){ var that = this ,thisDate = new Date() ,options = that.config ~~~ 添加一個非空判斷，修改如下： ~~~ Class.prototype.checkDate = function(fn){ if(!this.elem){ return ; } var that = this ,thisDate = new Date() ,options = that.config ~~~ 另外，我還在原有done、change回調基礎上添加了一個參數 ~~~ done: function(dom,value, date, endDate){ console.log(dom);//觸發當前時期選擇事件的dom對象 console.log(value); //得到日期生成的值，如：2017-08-18 console.log(date); //得到日期時間對象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0} console.log(endDate); //得結束的日期時間對象，開啟范圍選擇（range: true）才會返回。對象成員同上。 } ~~~ 源碼1473行如下： ~~~ param = param || 【that.parse(), start, end】;//（這里貌似是社區編輯器的一個bug，源碼中【】符號為英文中括號[]） ~~~ 修改如下： ~~~ param = param || 【that.bindElem,that.parse(), start, end】;//（這里貌似是社區編輯器的一個bug，源碼中【】符號為英文中括號[]） ~~~ 11.調整layui-btn按鈕之間的間距 ~~~ .layui-btn+.layui-btn{ margin-left: 1px; } ~~~ 12.關于數據表格修改行數據后模版渲染的BUG 數據表格可以定義模板以便以自己的方式顯示數據，模板有三種方式：綁定模版選擇器、函數轉義、直接賦值模版字符如果使用函數轉義如： ~~~ {field:'sex', title: '性別',width:60,align:'center' , templet:function(d){ if(d.sex==1){ return "男"; }else if(d.sex==0){ return "女"; }else{ return "保密"; } } } ~~~ 并且此時再修改行數據時就會出現BUG，修改后性別直接顯示1、0、-1，而不會經過函數轉義了。使用綁定模版選擇器或直接賦值模版字符不會出現此BUG 修改table.js源碼如下：源碼1140行如下： templet ? laytpl($(templet).html() || value).render(data) : value 將其修改為： templet ?(typeof templet === 'function'?templet(data):laytpl($(templet).html() || value).render(data)):value 13.關于數據表格排序目前數據表格排序功能最多只能針對某一列做排序，但是有時可能需要同時對多列排序，并且需要根據排序參數重新請求后臺，為了實現這個功能，我對table.js源碼修改如下：源碼403-405行如下： ~~~ if(typeof options.initSort === 'object'){ that.sort(options.initSort.field, options.initSort.type); } ~~~ 修改如下： ~~~ if(options.initSort instanceof Array){ layui.each(options.initSort,function (i,e) { that.sort(e.field, e.sort); }) } ~~~ 源碼416行如下： `params[request.limitName] = options.limit;` 在其后插入如下代碼： ~~~ if(options.initSort!=null && options.initSort.length>0){ params["sorts"]=JSON.stringify(options.initSort); } ~~~ 源碼694行如下： `that.layHeader.find('th').find(ELEM_SORT).removeAttr('lay-sort'); //清除其它標題排序狀態` 將其刪除或注釋源碼702-705行如下： ~~~ that.sortKey = { field: field ,sort: type }; ~~~ 在其后插入如下代碼： ~~~ var sortIndex=-1; if(options.initSort instanceof Array){ layui.each(options.initSort,function (i,e) { if(e.field==field){ sortIndex=i; return false; } }); }else{ options.initSort=[]; } if(sortIndex==-1){ options.initSort.push(that.sortKey); sortIndex=options.initSort.length-1; } if(type){ options.initSort[sortIndex].sort=type; }else{ options.initSort.splice(sortIndex,1); } ~~~ 源碼719-724行如下： ~~~ if(formEvent){ layui.event.call(th, MOD_NAME, 'sort('+ filter +')', { field: field ,type: type }); } ~~~ 修改如下： ~~~ if(formEvent){ layui.event.call(th, MOD_NAME, 'sort('+ filter +')', { field: field ,type: type ,sorts: options.initSort }); } }; ~~~ 修改后數據表格可以同時對多列排序，并結合排序事件監聽實現后臺排序。同時數據表格在翻頁或重載時，會自動以sorts為鍵值自動向后臺傳遞排序請求參數，形如：{sorts:[{"field":"height","sort":"asc"},{"field":"age","sort":"desc"}]} 并且排序事件的參數obj會增加一個屬性sorts，內容與排序請求參數一致，如： ~~~ table.on('sort(test)', function(obj){ //注：tool是工具條事件名，test是table原始容器的屬性 lay-filter="對應的值" console.log(obj.field); //當前排序的字段名 console.log(obj.type); //當前排序類型：desc（降序）、asc（升序）、null（空對象，默認排序） console.log(this); //當前排序的 th 對象 console.log(obj.sorts)//排序參數 //盡管我們的 table 自帶排序功能，但并沒有請求服務端。 //有些時候，你可能需要根據當前排序的字段，重新向服務端發送請求，從而實現服務端排序，如： table.reload('idTest'); }); ~~~ 二、建議我原來是使用EasyUI的，所以初次使用layui時很多思路還是和原來一樣，但是有時候layui很多功能沒有EasyUI完善，用起來就很不爽，希望心姐多多借鑒一下EasyUI的做法 1.為什么不把表單元素設計成類似于下面的形式 ~~~ <div class="layui-form-item"> <div class="layui-input-block"> <label class="layui-form-label">地址 <input type="text" name="address" autocomplete="off" placeholder="請輸入地址" class="layui-input"> </label> </div> </div> ~~~ 這樣用戶直接點擊標簽的文字光標就能直接定位到相應的文本框，用戶體驗更好 2.添加一個類似于如下的日歷控件 3.關于form表單 EasyUI中有個form模塊可以直接以ajax方式提交表單及自動填充表單（自動渲染），非常簡單兩行代碼就搞定了，現在layui實現相同功能需要自己手動寫代碼或依賴大量插件輔助，很麻煩！我在EnhanceForm插件中已經實現了簡單的ajax提交表單，不過沒有充分測試，心姐可以完善后整合到layui中！現在表單驗證只能在點擊提交按鈕時提交表單時才會觸發，但是有時候項目中表單驗證并不是通過表單提交觸發的，程序員希望自己手動調用js方法觸發驗證效果，所以建議為form添加一個validate方法，用于在表單驗證框架基礎上做表單驗證，返回true、false表示驗證是否通過，同時如果驗證不通過自動顯示提示等。 4.建議為數據表格增加一個添加行的方法（類似于EasyUI的appendRow、insertRow方法） 5.為數據表格增加獲取所有行數據的方法（類似于EasyUI的getRows方法） 6.數據表格列寬度權重建議為數據表格增加一個列寬度設置為權重的功能，假設數據表格共A、B、C、D四列，其中A、C列為固定寬度50px，B列寬度權重為1，D列寬度權重為2，則渲染效果為，B列寬度=（數據表格總寬度-100px）*1/3，D列寬度=（數據表格總寬度-100px）*2/3 7.添加功能：數據表格數據行區域也能實現類似于復雜表頭跨行跨列的功能 8.單元格編輯類型目前只支持：text（輸入框），建議添加下拉列表、日期選擇、文件上傳等類型，或者開發接口可以讓用戶自定義編輯器，同時可以添加驗證規則，添加進入編輯狀態前的觸發事件，添加讓單元格進入編輯狀態的方法 9.添加功能：彈出層左上角標題文字旁也可以設置一個可愛的小圖標^_^ 10.添加類似于EasyUI中ComboTree（樹形下拉框）和ComboGrid（數據表格下拉框）控件 11.添加屬性：數據表格開啟復選框時，可以設置singleSelect模式，即只允許選擇一行 12.添加屬性：數據表格開啟復選框時，可以設置checkOnSelect，如果為true，當用戶點擊行的時候該復選框就會被選中或取消選中。如果為false，當用戶僅在點擊該復選框的時候才會被選中或取消。