layui使用小記(持續更新)


關於Select等Form表單元素,在使用的時候部分特性會失效

如select自帶的Search功能:

 

其實在使用Form表單元素的時候,你如果需要layui自帶的一些功能(搜索,驗證等),請用<Form>標簽括起來,並且需要初始化form對象,這樣才能渲染生效。類似的還有選項卡的需要初始化element對象

//注意:選項卡 依賴 element 模塊,否則無法進行功能性操作
layui.config({
    base: '/Resources/Script/'
})
.use(['element', 'common', 'form'], function () {
    var element = layui.element;//tab選項卡類的功能才能實現
    var form = layui.form;//部分表單元素功能才能實現
});

 


 

關於取消按鈕自動提交事件

layui在使用按鈕的時候,會自動提交表單,無論你的button類型是不是submit。

解決辦法:

  1.只要你放到了<Form>標簽內,他都會自動提交,一般使用的時候,請放Form外。

  2.按鈕的點擊事件的返回值,一定要返回false,同樣可以組織表單提交。

注意這里有個小細節,就是用Form表單括起來的表單元素,你可以用Jquery的Seriliaze方法去快速封裝表單結果集:(我封裝一個JSON對象)

 

 var formData = $("#infoForm").serializeArray();
            var data = {};
            $.each(formData, function (index, item) {
                data[item.name] = item.value;
            });

  又或者生成一個key=value&key1=value2的字符串(用Serialize())

但是這里如果在獲取layui的表單時的select選項時,他會將你的原始select隱藏,重新渲染一個select,這時你無法通過上述方法拿到select的value,還是老老實實用$().value,默認選項的option一定要賦值value='',否則value在渲染時,默認復制text()值。

laydate的默認值初始化:

請開啟isInitValue,個人覺得文檔寫的不准確,這樣配置好雞肋的感覺。反正必須明確指出isInitValue,才能初始化默認值。


 

關於DataTable數據表格的異步加載參數:

關於request的是layui請求時,參數默認有pageIndex和pageSize,你可以通過request參數去配置你自己的pageIndex和pageSize名。額外的request參數需要封裝到where中,最后layui會將他們組裝到一起發送到后台。

關於response的參數配置,畫線的四項時必須指出的。其他的參數你可以后台隨便傳輸,在done的時候都可以拿到。


 

關於省市區聯動(控件級別的局部渲染)

這里因為layui沒有雙向綁定的概念,所以這里所做的只能每次重新獲取數據,然后進行render渲染,刷新控件。所以一般采取的都是通過:form監聽事件+form的局部渲染

這里如果你的select比較多的話,而且下拉框的數據量比較大的話,你可以用一個div(class需要包含layui-form和lay-filter屬性)把select括起來,然后進行form.select('select',包含select的div:filter屬性值),這樣你就不用刷新所有的form的select,而是渲染某一個select,但是事件監聽可以到控件級別(即lay-filter是標注在控件上的)。

<div class="layui-form" lay-filter="selLocation">
                            <label class="text_label">出發站:</label>
                            <div class="layui-input-inline">
                                <select id="selLocation" name="selLocation" class="text_input" lay-filter="selLocation" lay-verify="" lay-search></select>
                            </div>
                        </div>

 

 form.on("select(selLine)", function (data) {
                        var template1 = "<option value=''>全部選項</option>";
                        for (var index in result.Data) {
                            if (result.Data[index].LineId == data.value) {
                                template1 += "<option value='" + result.Data[index].TimesId + "'>" + result.Data[index].TimesName + "</option>";
                            }
                        }
                        $("#selTimes").html(template1);
                        form.render('select','selLlocation');
                    })

數據列表自增列的實現(兩種)

1.使用模板引擎的

模板:
<script type="text/html" id="indexTpl">
    {{d.LAY_TABLE_INDEX+1}}
</script>
table的col參數:
cols: [[
            { title: '序號', templet: '#indexTpl', width: "6%" }
]]

2.使用col中的參數type:numbers(注意該參數是layui2.2.0新增)

 cols: [[
            { title: '序號', type:'numbers', width: "6%" }
]]

 我推薦第二種,第二種方式是帶分頁的排序,第二頁是從上一頁遞增的index,並且sort的時候 序號不會變,第一種在sort時,序號會從10-1

 


 

最后對於后台人員如何寫前端的代碼,就是稍微能看的頁面的一點而建議(咱大部分都是表單)

 

  我的建議是:1.先弄懂柵格布局,基本一些容易上手的框架,都有布局。

        2.通過chrome去修改元素style,然后把修改后的style自己cp下來,然后封裝成一個css.

        3.使用組件的時候,認真看清結構,不要破壞原有結構,很容易失效。

        4.不要完全照抄demo,因為demo之間還是影響挺大,就是元素之前嵌套,所以一定要看清楚規則。對於我們后台人員來說,會這幾點就差不多夠了,已經能可以應付大部分應用勒

      之前一直想慢慢寫點東西,慢慢積累下來,進如公司,感覺能學的東西很多,繼續努力。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM