Layui弹出层 修改删除
班级修改和删除(修改用到了弹出层)弹出层页面<div class="layui-input-block layui-form" id="modifyClass"lay-filter="updateClass" style="margin-top: 30px""><form class="layui-form" action="" lay-filter="ex...
·
班级修改和删除(修改用到了弹出层)
- 弹出层页面
<div class="layui-input-block layui-form" id="modifyClass"
lay-filter="updateClass" style="margin-top: 30px"">
<form class="layui-form" action="" lay-filter="example">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">年级</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" name="grade1" id="grade1"
placeholder="例:2016" readonly="true">
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">班级编号</label>
<div class="layui-input-inline">
<input type="text" name="classid1" required lay-verify="required" readonly="true"
placeholder="请输入班级编号" autocomplete="off" class="layui-input"
id="classid1">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">班级名称</label>
<div class="layui-input-inline">
<input type="text" name="classname1" id="classname1" required
lay-verify="required" placeholder="请输入班级名称" autocomplete="off"
class="layui-input">
</div>
<!-- <div class="layui-form-mid layui-word-aux">辅助文字</div> -->
</div>
<div class="layui-form-item">
<label class="layui-form-label">专业</label>
<div class="layui-input-inline">
<select name="majorid" lay-verify="required" id="majorid1"
lay-filter="majorid1">
<option value="">请选择</option>
</select>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit="" lay-filter="enmodify">确认修改</button>
</div>
</div>
</form>
</div>
- 主页面的js(其中content: ‘./displayClass.html’, 即为引入弹出层页面;success: function(layero, index){…} …即为给弹出层页面内容赋值)
//监听 修改、删除行事件
table.on('tool(table1)',function(obj){
var data1 = obj.data;
if(obj.event === 'del'){
layer.confirm('想好要删除了么?', function(index){
$.ajax({
url:"../../ClassesDeleteServlet",
data:{"classid": data1.classid},
type:"post",
dataType:"json",
success:function (data) {
if (data == 0) {
layer.msg('删除失败!',{icon:5,offset:"auto",time:2000});//提示框
}else{
layer.msg('删除成功!',{icon:6,offset:"auto",time:2000});//提示框
}
}
});
return false;
});
} else if(obj.event === 'edit'){
layer.open({
type: 2
,title: "修改班级信息"
,area: ['45%', '70%']
,content: './displayClass.html',
success: function(layero, index){
var body = layer.getChildFrame('body', index);
var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象
body.find('#classid1').val(data1.classid);
body.find('#classname1').val(data1.classname);
body.find('#grade1').val(data1.grade);
//为弹框页面专业下拉框赋值
$.ajax({
url : '../../MajorFindAllServlet?deptid=5',
dataType : 'json',
data : {
'state' : 0
}, //查询状态为正常的所有机构类型
type : 'post',
success : function(data) {
$.each(data, function(index, item) {
if (item.majorid == data1.majorid) {
body.find('#majorid1').append($("<option>").attr("value",item.majorid).attr("selected","selected").text(item.majorname));
}else {
body.find('#majorid1').append($("<option>").attr("value",item.majorid).text(item.majorname));
}
});
iframeWin.layui.form.render("select");
}
});
}
});
};
})
- 弹出层提交表单监听(layer.msg(‘修改成功!’,{icon:6,offset:“auto”,time:2000});//提示框2秒自动消失)
form.on('submit(enmodify)',function(data){
$.ajax({
url:'../../ClassUpdateServlet',
data:{
classid:$("#classid1").val(),
classname:$("#classname1").val(),
grade:$("#grade1").val(),
majorid:$("#majorid1").val()
},
success:function(data){
if (data == 0) {
layer.msg('修改失败!',{icon:5,offset:"auto",time:2000});//提示框
}else {
layer.msg('修改成功!',{icon:6,offset:"auto",time:2000});//提示框
}
setTimeout(function(){
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);//关闭弹出层
parent.location.reload();//重新加载父页面表格
}, 2100);
}
})
return false;
});
更多推荐
所有评论(0)