您的位置:首页 > 产品设计 > UI/UE

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

2018-01-23 09:58 816 查看
第一步,先把html考到页面底部,好吧。

<!-- 编辑的内容 -->
<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
});
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: