組件 layui 表單抓取數據四步走

注意事項：

1. layui 中提交按鈕是基於「監聽」機制實現的。
2. form.on() 的調用需置於 layui.use 的回調函數中。
3. 末尾的 'return false' 不可或缺，以確保不會觸發頁面刷新。注意必須是 'return false'，而不能簡單寫成 'return'。

抓取表單數據可按四步來實現：

1. 禁用按鈕。防止用戶連續點擊，需注意，在 Ajax 請求結束後（complete）再次顯式啓用按鈕。
2. 整合表單數據。不少時候，除了要獲取正式表單的數據，還須要額外追加一些數據。
3. 肯定路徑。有時候，同一個按鈕能夠表達多種操做，好比新增或修改。
4. 發起請求。發起 Ajax 請求，向服務器傳遞參數，並在回調函數中對返回值作處理。
5. return false。

重要代碼列舉

1. HTML 聲明

<form class="layui-form">
    <input type="hidden" name="id" />
    <button class="layui-btn layui-btn-sto" id="btnSave" lay-filter="btnSave" lay-submit>保存</button>
</form>

若是僅須要監聽效果（單擊事件），則只需上述一個 button 以及 lay-filter 和 lay-submit。
若是須要收集表單元素的值，則還須要 form 以及其樣式 layui-form。

1. js 事件監聽

// 保存
form.on('submit(btnSave)', function (data) {
    console.info('開始保存');
 
    // * 按鈕禁用
    var isDisabled = $("#btnSave").hasClass('layui-btn-disabled');
    if (isDisabled) {
        return false;
    }
 
    // * 整合表單數據
    var formData = data.field;
    $.extend(formData, { Id: $("#hiddenId").val() });
    console.info(formData);
 
    // * 肯定路徑
    var url = "";
    if (editMode == "add") {
        url = urlEnum.Add;
    } else if (editMode == "update") {
        url = urlEnum.Update;
    } else {
        alert('編輯模型不肯定, add / update');
        return;
    }
 
    // * 發起請求
    $.ajax({
        data: formData,
        type: "POST",
        dataType: "JSON",
        url: url,
        beforeSend: function () {
            // 禁用
            $("#btnSave").addClass('layui-btn-disabled');
        },
        complete: function () {
            // 啓用
            $("#btnSave").removeClass('layui-btn-disabled');
        },
        success: function (result) {
            console.info("保存數據成功，返回的數據爲：↓ ");
            console.info(result);
 
            if (result.Status) {                            
                // 刷新列表
                parent.$("#mainGrid").bootstrapTable("selectPage", 1);
 
                // 確保在最後關閉窗體
                parent.layer.close(parent.layer.getFrameIndex(window.name));
            } else {
                // 提示失敗
                layer.alert(result.StatusMessage, { title: '提示信息', icon: 5 });
            }
        }
    }); // end ajax
 
    return false;
});