Layui 弹框的 实现,可以利用弹框的确定取消按钮,来实现对form表单的提交动作!
2018-01-23 09:58
816 查看
第一步,先把html考到页面底部,好吧。
第二步,js
第三步,考入封装的方法,可以放在公共的JS文件中
<!-- 编辑的内容 --> <div id="bjnr" style="display: none;"> <form class="layui-form" action="" id="saveupdateform"> <input id="isNew" name="isNew" type="hidden"/> <table class="layui-table layui-xs" lay-skin="nob"> <tbody> <colgroup> <col width="80"> <col> <col width="70"> <col> </colgroup> <tr> <td align="right" class="bianjibd"><span class="necessary">*</span>用户帐号</td> <td> <input type="text" id="yhdh" name="yhdh" lay-verify="required" autocomplete="off" class="layui-input" readonly="true"> </td> <td align="right" class="bianjibd"><span class="necessary">*</span>用户姓名</td> <td> <input type="text" id="xm" name="xm" lay-verify="required" autocomplete="off" class="layui-input"> </td> </tr> <tr> <td align="right" class="bianjibd"><span class="necessary">*</span>登录密码</td> <td> <input type="password" id="mm" name="mm" lay-verify="required" autocomplete="off" class="layui-input"> </td> <td align="right" class="bianjibd"><span class="necessary">*</span>角色类型</td> <td> <select name="rid" lay-filter="bigarea" id="rid"> <option value="">请选择</option> </select> </td> </tr> <tr> <td align="right" class="bianjibd">身份证号</td> <td> <input type="text" id="sfzmhm" lay-verify="identity" name="sfzmhm" autocomplete="off" class="layui-input"> </td> <td align="right" class="bianjibd">帐号状态</td> <td> <select name="zt" lay-filter="zhzhuang" id="zt"> <option value="">请选择角色状态</option> <option value="1">启用</option> <option value="2">锁定</option> <option value="3">停用</option> </select> </td> </tr> <tr> <td align="right" class="bianjibd">帐号期限</td> <td> <input type="text" id="zhyxqStr" name="zhyxqStr" class="layui-input"> </td> <td align="right" class="bianjibd">密码期限</td> <td> <input type="text" id="mmyxqStr" name="mmyxqStr" class="layui-input"> </td> </tr> <tr> <td align="right" class="bianjibd">所属部门</td> <td> <select name="glbm" lay-filter="glbms" id="glbm"> <option value="">请选择</option> </select> </td> <td align="right" class="bianjibd"></td> <td> </td> </tr> </tbody> </table> <div class="layui-input-block" style="display:none"> <button class="layui-btn tj" lay-submit="" lay-filter="tjbtn">立即提交</button> </div> </form> </div>把class="layui-input-block"用display:none隐藏,是为了弹框外的按钮可以实现提交动作。
第二步,js
function addtk(isNew){ $("#isNew").val(isNew);//这个是为了判断是编辑还是添加,不需要的可以删掉 debugger; //弹出框开始 var _funbtnxs = { yesxs1: function(index,layero){ //单击提交的回调 var mm = $("#mm").val(); $("#mm").val(mm == "" ? undefined : hex_md5(mm)); //绑定提交事件到弹出框的提交按钮 $('.tj').click(); } ,xs2: function(index,layero){ //单击取消的回调 layer.close(index); },success:function(layero){ //弹出前回调 layui.use(['form'], function(){ var form = layui.form; //各种基于事件的操作,下面会有进一步介绍 form.on('submit(tjbtn)', function(data){ ajaxSubmitForm('saveupdateform','/save_or_update_user'); //return false; //阻止表单跳转。如果需要表单跳转,去掉这段即可。 }); }); }} tk("编辑",['600px', '350px'],'userbj',$("#bjnr"),['确定', '取消'],_funbtnxs); //弹出框结束 }
第三步,考入封装的方法,可以放在公共的JS文件中
//弹出框 _title抬头标题,_area_arr弹出框宽高数组,_id唯一性,_content弹出框内容,_btn_arr按钮数组,_funbtnxs点击按钮对象函数 function tk(_title,_area_arr,_id,_content,_btn_arr,_funbtnxs){ layer.open({ type: 1 ,title: _title//标题 ,area: _area_arr//['600px', '450px'] ,shade: 0.1 ,id: _id //设定一个id,防止重复弹出'LAY_layuipro' ,btn: _btn_arr//['确定', '取消'] ,btnAlign: 'r' ,moveType: 1 //拖拽模式,0或者1 ,content:_content //html内容 ,yes:_funbtnxs.yesxs1 ,btn2:_funbtnxs.xs2 ,success:_funbtnxs.success }); }
相关文章推荐
- JavaScript基础 submit按钮配合form的onsubmit实现表单的提交与验证
- JavaScript基础 submit按钮配合form的onsubmit实现表单的提交与验证
- 只有一个form表单,实现多个提交按钮
- 异步提交form的时候利用jQuery validate实现表单验证
- 利用ajaxSubmit()方法实现Form提交表单后回调
- 如何利用Axis2+Spring实现文件上传(支持jsp页面的form表单提交),Android客户端调用
- 利用jQuery Form插件实现表单的ajax提交(原创)
- 一个form表单实现多个提交按钮
- 利用jquery form 实现ajax 提交form表单
- 一个form表单需要多个提交按钮的实现 (两种方式)
- jQuery实现ajax提交form表单(可以是提交json),用springmvc接收。图文详解
- 利用jquery.form.js的ajaxSubmit实现不跳转提交表单数据
- 按钮在form外如果实现提交表单
- JavaScript在form表单中使用button按钮实现submit提交方法
- struts中一个form表单实现多个按钮的提交
- 异步提交form的时候利用jQuery validate实现表单验证
- javascript在form表单中使用button按钮实现submit提交方法
- android利用httpclient实现post、get请求restful接口进行json和form表单数据提交等公共方法类
- 用图片实现form表单的提交按钮
- 利用AjaxSubmit()方法实现Form提交表单后回调功能