一、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"> </i>查询 </button> <button type="reset" class="layui-btn layui-btn-primary"><i class="fa fa-refresh"> </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); } }); }); },
效果: