Layui 弹框的 实现,可以利用弹框的确定取消按钮,来实现对form表单的提交动作!

第一步,先把html考到页面底部,好吧。

[html]  view plain  copy
  1. <!-- 编辑的内容 -->  
  2. <div id="bjnr" style="display: none;">  
  3.     <form class="layui-form" action="" id="saveupdateform">  
  4.                     <input id="isNew" name="isNew" type="hidden"/>  
  5.                     <table class="layui-table layui-xs" lay-skin="nob">  
  6.                           <tbody>  
  7.                             <colgroup>  
  8.                                 <col width="80">  
  9.                                 <col>  
  10.                                 <col width="70">  
  11.                                 <col>  
  12.                             </colgroup>  
  13.                             <tr>  
  14.                               <td align="right" class="bianjibd"><span class="necessary">*</span>用户帐号</td>  
  15.                               <td>  
  16.                                     <input type="text" id="yhdh" name="yhdh" lay-verify="required" autocomplete="off" class="layui-input" readonly="true">  
  17.                               </td>  
  18.                               <td align="right" class="bianjibd"><span class="necessary">*</span>用户姓名</td>  
  19.                               <td>  
  20.                                     <input type="text" id="xm" name="xm" lay-verify="required" autocomplete="off" class="layui-input">  
  21.                             </td>  
  22.                             </tr>  
  23.                             <tr>  
  24.                               <td align="right" class="bianjibd"><span class="necessary">*</span>登录密码</td>  
  25.                               <td>  
  26.                                     <input type="password" id="mm" name="mm" lay-verify="required"  autocomplete="off" class="layui-input">  
  27.                               </td>  
  28.                               <td align="right" class="bianjibd"><span class="necessary">*</span>角色类型</td>  
  29.                               <td>  
  30.                                       <select name="rid" lay-filter="bigarea" id="rid">  
  31.                                                 <option value="">请选择</option>  
  32.                                      </select>  
  33.                             </td>  
  34.                             </tr>  
  35.                              <tr>  
  36.                                   <td align="right" class="bianjibd">身份证号</td>  
  37.                                   <td>  
  38.                                         <input type="text" id="sfzmhm" lay-verify="identity" name="sfzmhm" autocomplete="off" class="layui-input">  
  39.                                   </td>  
  40.                                   <td align="right" class="bianjibd">帐号状态</td>  
  41.                                   <td>  
  42.                                           <select name="zt" lay-filter="zhzhuang" id="zt">  
  43.                                                  <option value="">请选择角色状态</option>  
  44.                                                       <option value="1">启用</option>  
  45.                                                       <option value="2">锁定</option>  
  46.                                                       <option value="3">停用</option>  
  47.                                          </select>  
  48.                                 </td>  
  49.                             </tr>  
  50.                              <tr>  
  51.                                   <td align="right" class="bianjibd">帐号期限</td>  
  52.                                   <td>  
  53.                                         <input type="text" id="zhyxqStr" name="zhyxqStr" class="layui-input">  
  54.                                   </td>  
  55.                                   <td align="right" class="bianjibd">密码期限</td>  
  56.                                   <td>  
  57.                                          <input type="text" id="mmyxqStr" name="mmyxqStr" class="layui-input">  
  58.                                 </td>  
  59.                             </tr>  
  60.                             <tr>  
  61.                                   <td align="right" class="bianjibd">所属部门</td>  
  62.                                   <td>  
  63.                                         <select name="glbm" lay-filter="glbms" id="glbm">  
  64.                                             <option value="">请选择</option>  
  65.                                          </select>  
  66.                                   </td>  
  67.                                   <td align="right" class="bianjibd"></td>  
  68.                                   <td>  
  69.                                 </td>  
  70.                             </tr>  
  71.                           </tbody>  
  72.                         </table>  
  73.                         <div class="layui-input-block" style="display:none">  
  74.                          <button class="layui-btn tj" lay-submit="" lay-filter="tjbtn">立即提交</button>  
  75.                         </div>  
  76.     </form>  
  77. </div>  
把class="layui-input-block"用display:none隐藏,是为了弹框外的按钮可以实现提交动作。



第二步,js

[javascript]  view plain  copy
  1. function addtk(isNew){  
  2.      $("#isNew").val(isNew);//这个是为了判断是编辑还是添加,不需要的可以删掉  
  3.      debugger;  
  4.     //弹出框开始  
  5.     var _funbtnxs = {  
  6.             yesxs1: function(index,layero){  
  7.                 //单击提交的回调  
  8.                  var mm = $("#mm").val();  
  9.                  $("#mm").val(mm == "" ? undefined : hex_md5(mm));  
  10.                 //绑定提交事件到弹出框的提交按钮  
  11.                  $('.tj').click();  
  12.               }  
  13.             ,xs2: function(index,layero){  
  14.                 //单击取消的回调  
  15.                 layer.close(index);  
  16.             },success:function(layero){  
  17.                 //弹出前回调  
  18.                 layui.use(['form'], function(){  
  19.                       var form = layui.form;  
  20.                       //各种基于事件的操作,下面会有进一步介绍  
  21.                       form.on('submit(tjbtn)'function(data){  
  22.                           ajaxSubmitForm('saveupdateform','/save_or_update_user');  
  23.                           //return false; //阻止表单跳转。如果需要表单跳转,去掉这段即可。  
  24.                         });  
  25.                     });  
  26.                    
  27.             }}  
  28.     tk("编辑",['600px''350px'],'userbj',$("#bjnr"),['确定''取消'],_funbtnxs);  
  29.     //弹出框结束  
  30. }  


第三步,考入封装的方法,可以放在公共的JS文件中

[javascript]  view plain  copy
  1. //弹出框 _title抬头标题,_area_arr弹出框宽高数组,_id唯一性,_content弹出框内容,_btn_arr按钮数组,_funbtnxs点击按钮对象函数  
  2. function tk(_title,_area_arr,_id,_content,_btn_arr,_funbtnxs){  
  3.       layer.open({  
  4.             type: 1  
  5.             ,title: _title//标题  
  6.             ,area: _area_arr//['600px', '450px']  
  7.             ,shade: 0.1  
  8.             ,id: _id //设定一个id,防止重复弹出'LAY_layuipro'  
  9.             ,btn: _btn_arr//['确定', '取消']  
  10.             ,btnAlign: 'r'  
  11.             ,moveType: 1 //拖拽模式,0或者1  
  12.             ,content:_content //html内容  
  13.             ,yes:_funbtnxs.yesxs1  
  14.             ,btn2:_funbtnxs.xs2  
  15.             ,success:_funbtnxs.success  
  16.           });  
  17. }  
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页