layui框架中元素的使用

select自帶的Search功能：

其實(shí)在使用Form表單元素的時(shí)候，你如果需要layui自帶的一些功能（搜索，驗(yàn)證等），請用<Form>標(biāo)簽括起來，并且需要初始化form對(duì)象，這樣才能渲染生效。類似的還有選項(xiàng)卡的需要初始化element對(duì)象

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

關(guān)于取消按鈕自動(dòng)提交事件

layui在使用按鈕的時(shí)候，會(huì)自動(dòng)提交表單，無論你的button類型是不是submit。

解決辦法：

1、只要你放到了<Form>標(biāo)簽內(nèi),他都會(huì)自動(dòng)提交，一般使用的時(shí)候，請放Form外。

2、按鈕的點(diǎn)擊事件的返回值，一定要返回false,同樣可以組織表單提交。

注意這里有個(gè)小細(xì)節(jié)，就是用Form表單括起來的表單元素，你可以用Jquery的Seriliaze方法去快速封裝表單結(jié)果集：（我封裝一個(gè)JSON對(duì)象）

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

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

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

laydate的默認(rèn)值初始化：

請開啟isInitValue，個(gè)人覺得文檔寫的不準(zhǔn)確，這樣配置好雞肋的感覺。反正必須明確指出isInitValue，才能初始化默認(rèn)值。

關(guān)于DataTable數(shù)據(jù)表格的異步加載參數(shù)：

關(guān)于request的是layui請求時(shí)，參數(shù)默認(rèn)有pageIndex和pageSize，你可以通過request參數(shù)去配置你自己的pageIndex和pageSize名。額外的request參數(shù)需要封裝到where中，最后layui會(huì)將他們組裝到一起發(fā)送到后臺(tái)。

關(guān)于response的參數(shù)配置，畫線的四項(xiàng)時(shí)必須指出的。其他的參數(shù)你可以后臺(tái)隨便傳輸，在done的時(shí)候都可以拿到。

關(guān)于省市區(qū)聯(lián)動(dòng)(控件級(jí)別的局部渲染)

這里因?yàn)閘ayui沒有雙向綁定的概念，所以這里所做的只能每次重新獲取數(shù)據(jù)，然后進(jìn)行render渲染，刷新控件。所以一般采取的都是通過:form監(jiān)聽事件+form的局部渲染

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

<div class="layui-form" lay-filter="selLocation">
                            <label class="text_label">出發(fā)站:</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=''>全部選項(xiàng)</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');
                   })

數(shù)據(jù)列表自增列的實(shí)現(xiàn)（兩種）

1.使用模板引擎的

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

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

cols: [[
            { title: '序號(hào)', type:'numbers', width: "6%" }
]]

我推薦第二種，第二種方式是帶分頁的排序，第二頁是從上一頁遞增的index，并且sort的時(shí)候 序號(hào)不會(huì)變，第一種在sort時(shí)，序號(hào)會(huì)從10-1

最后對(duì)于后臺(tái)人員如何寫前端的代碼，就是稍微能看的頁面的一點(diǎn)而建議（咱大部分都是表單）

我的建議是：

1、先弄懂柵格布局，基本一些容易上手的框架，都有布局。

2、通過chrome去修改元素style，然后把修改后的style自己cp下來，然后封裝成一個(gè)css.

3、使用組件的時(shí)候，認(rèn)真看清結(jié)構(gòu)，不要破壞原有結(jié)構(gòu)，很容易失效。

4、不要完全照抄demo，因?yàn)閐emo之間還是影響挺大，就是元素之前嵌套，所以一定要看清楚規(guī)則。對(duì)于我們后臺(tái)人員來說，會(huì)這幾點(diǎn)就差不多夠了，已經(jīng)能可以應(yīng)付大部分應(yīng)用。

以上就是關(guān)于Select等Form表單元素使用介紹的詳細(xì)內(nèi)容，更多請關(guān)注億速云其它相關(guān)文章！