關於Select等Form表單元素使用介紹

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

如select自帶的Search功能：

其實在使用Form表單元素的時候，你如果需要layui自帶的一些功能（搜索，驗證等），請用

標籤括起來，並且需要初始化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外。

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=&#39;&#39;>全部选项</option>";
                       for (var index in result.Data) {
                           if (result.Data[index].LineId == data.value) {
                               template1 += "<option value=&#39;" + result.Data[index].TimesId + "&#39;>" + result.Data[index].TimesName + "</option>";
                           }
                       }
                       $("#selTimes").html(template1);
                       form.render(&#39;select&#39;,&#39;selLlocation&#39;);
                   })

資料列表自增列的實作（兩種）

#1.使用模板引擎的

模板：
<script type="text/html" id="indexTpl">
    {{d.LAY_TABLE_INDEX+1}}
</script>
table的col参数：
cols: [[
            { title: &#39;序号&#39;, templet: &#39;#indexTpl&#39;, 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之間還是影響挺大，就是元素之前嵌套，所以一定要看清楚規則。對我們後台人員來說，會這幾點就差不多夠了，已經能應付大部分應用。

更多layui知識請關注layui使用教學欄。

以上是關於Select等Form表單元素使用介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！