組件 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。

2. 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;
});