layui表單提交

 

一、layui.form事件監聽

語法：form.on('event(過濾器值)', callback);

form模塊在 layui 事件機制中注冊了專屬事件，所以當你使用layui.onevent()自定義模塊事件時，請勿占用form名。form支持的事件如下:

event	描述
select	監聽select下拉選擇事件
checkbox	監聽checkbox復選框勾選事件
switch	監聽checkbox復選框開關事件
radio	監聽radio單選框事件
submit	監聽表單提交事件

具體詳解：http://www.layui.com/doc/modules/form.html

在項目中暫時用到的為監聽submit提交

基本用法細節如下:

按鈕點擊或者表單被執行提交時觸發，其中回調函數只有在驗證全部通過后才會進入，回調返回三個成員：

form.on('submit(*)', function(data){
  console.log(data.elem) //被執行事件的元素DOM對象，一般為button對象
  console.log(data.form) //被執行提交的form對象，一般在存在form標簽時才會返回
  console.log(data.field) //當前容器的全部表單字段，名值對形式：{name: value}
  return false; //阻止表單跳轉。如果需要表單跳轉，去掉這段即可。
});

再次溫馨提示：上述的submit(*)中的 * 號為事件過濾器的值，是在你綁定執行提交的元素時設定的，如：

<button lay-submit lay-filter="*">提交</button>     

你可以把*號換成任意的值，如：lay-filter="go"，但監聽事件時也要改成 form.on('submit(go)', callback);

此處還需要注意：

console.log(data.field) //當前容器的全部表單字段，名值對形式：{name: value}

二、實踐

別人的簡單實踐（重在思路）

0、要使用layui的模塊時，需先加載所需模塊

layui.use(['form'], function(){
    var form = layui.form; //只有執行了這一步，部分表單元素才會自動修飾成功
    var $ = layui.$;

    //但是，如果你的HTML是動態生成的，自動渲染就會失效
    //因此你需要在相應的地方，執行下述方法來手動渲染，跟這類似的還有 element.init();
    //form.render();
});

1、在使用layui的submit 異步提交監聽時，一定要在最后加return false

//提交
    form.on('submit(submitButton)',function (data) {
        var maintenancePlace = JSON.stringify(data.field);
        $.ajax({
            url : '../../baseManage/place/create.action',
            type : 'post',
            dataType : 'json',
            contentType :"application/json",
            data : maintenancePlace,
            success : function (data1) {
                alert(11111111)
            }
        })
        return false;
    })

3、再次溫馨提示：上述的submit(*)中的 * 號為事件過濾器的值，是在你綁定執行提交的元素時設定的，如：

<button lay-submit lay-filter="submitButton">提交</button>

三、自己的實踐 
前端代碼輸入form框:

<form class="layui-form " action="">
    <div class="layui-form-item">
        <label class="layui-form-label">用戶名:</label>
        <div class="layui-input-inline">
            <input type="text" name="username" placeholder="請輸入用戶名" class="layui-input">
        </div>
        <label class="layui-form-label">手機號:</label>
        <div class="layui-input-inline">
            <input type="text" name="mobile" placeholder="請輸入手機號" class="layui-input">
        </div>
        <div class="layui-input-inline">
            <button class="layui-btn search-btn" table-id="userTable" lay-submit="" lay-filter="search"><i class="fa fa-search">&nbsp;</i>查詢
            </button>
            <button type="reset" class="layui-btn layui-btn-primary"><i class="fa fa-refresh">&nbsp;</i>重置</button>
        </div>
    </div>
</form>

前端table展示:

<div class="layui-form ">
    <table class="layui-table" id="userTable" cyType="pageGrid"
           cyProps="url:'/sys/user/list',checkbox:'true',pageColor:'#2991d9'">
        <thead>
        <tr>
            <!--復選框-->
            <th width="1%" param="{type:'checkbox'}">
                <input type="checkbox" lay-skin="primary" lay-filter="allChoose">
            </th>
            <!--isPrimary：是否是主鍵-->
            <th width="10%" param="{name:'userId',isPrimary:'true',hide:'true'}">用戶ID</th>
            <th width="8%" param="{name:'username',sort:'true'}">用戶名</th>
            <th width="8%" param="{name:'nickname'}">姓名</th>
            <th width="8%" param="{name:'roleId'}">所屬角色</th>
            <th width="8%" param="{name:'orgId'}">所屬部門</th>
            <th width="8%" param="{name:'email'}">郵箱</th>
            <th width="6%" param="{name:'mobile'}">手機號</th>
            <th width="12%" param="{name:'createTime',sort:'true'}">創建時間</th>
            <th width="5%" param="{name:'status',render:'Render.customState'}">狀態</th>
        </tr>
        </thead>
    </table>
</div>

Layui中js主方法代碼：

      searchForm: function () {
            layui.use(['form'], function () {
                var form = layui.form();
                //監聽提交
                form.on('submit(search)', function (data) {
                    //獲取對應的表格對象
                    var table_id = $(this).attr("table-id");// table_id=userTable
                    var _table = $("#" + table_id);         // 是id
                    //獲取表格參數
                    var props = _table.attr("cyProps");     // cyProps="url:'/sys/user/list',checkbox:'true',pageColor:'#2991d9'"
                    if (!props) {
                        return
                    }
                    props = props ? props : "";
                    //將表格參數轉為json
                    props = eval("({" + props + "})");
                    var conditions = data.field;
                    $.extend(defaultParam, conditions);     // conditions 合並到defaultParam 中 
                    var R = PageGrid.getData(props.url);    //*獲取數據props.url='/sys/user/list'
                    alert("defaultParam=" + defaultParam.username);//defaultParam是對象
                    defaultParam.init=true;
                    PageGrid.setPage(R, _table, props.url); //設置分頁
                    return false;
                });

            });
        },

getData方法：

        getData: function (url) {
            var data;
            $.ajax({
                url: url,
                async: false,
                data: defaultParam,
                dataType: "json",
                success: function (R) {
                    if (R.code == 0) {
                        data = R;
                    } else {
                        data = {page: null};
                        alert(R.msg);
                    }
                }
            });
            return data;
        },

設置setPage分頁

 setPage: function (R, $grid, url) {

            var pageId = $grid.attr("id") + "_page";
            $("#" + pageId).remove();
            //創建分頁div
            $grid.after('<div id="' + pageId + '"></div>');
            layui.use(['laypage', 'layer'], function () {
                var laypage = layui.laypage;
                laypage.render({
                    elem: pageId
                    , count: R.page ? R.page.totalCount : 0
                    , layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
                    , jump: function (obj) {
                        var index=Loading.open(1,false);
                        PageGrid.toPage(R,obj, $grid, url);
                        Loading.close(index);
                    }
                });
            });

        },

效果：