<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                一、遇到的問題及解決方案(心得) 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> <!--<div class="layui-form-item btns"> <div class="layui-input-block"> <button class="layui-btn layui-btn-radius" lay-submit lay-filter="layerForm">確定</button> <button class="layui-btn layui-btn-radius layui-btn-primary cancel" type="button">取消</button> </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,當用戶僅在點擊該復選框的時候才會被選中或取消。
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看