layui表单提交

一、layui.form事件监听

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

        },

效果：