在父页面进行新增修改
//新增按钮
var active = {
add: function(){
layer.open({
type: 2
,title: '添加用户'
,content: '/userform' //接口
,maxmin: true
,area: ['500px', '450px']
,btn: ['确定', '取消']
,yes: function(index, layero){//确定btn回调
var res = layero.find('iframe')[0].contentWindow.callbackdata(); //弹窗新增页面userform中定义callbackdata()获取新增页面数据
//打印返回的值,看是否有我们想返回的值。
console.log(res);
$.ajax({
type: 'POST',
url: "/sysuser/addUser", // 新增接口
// dataType: 'json', // 服务器返回数据类型
contentType: "application/json",
data: JSON.stringify(res), //将res转成json
success: function (data) {
if (data === "true") {
layer.msg("添加成功", {icon: 6});
layer.close(index);
//修改成功后刷新父界面
table.reload('tableId') //tableId要和table.render渲染时的id一致
return false;//false:阻止表单跳转 true:表单跳转
} else {
layer.msg("添加失败");
}
}
});
}
});
}
};
//编辑事件
table.on('tool(tableId)', function(obj){
var data = obj.data;
console.log(data)
if(obj.event === 'edit'){
layer.open({
type: 2
,title: '编辑'
,content: '/userform'//和新增共用一个页面
,maxmin: true
,area: ['500px', '450px']
,btn: ['确定', '取消']
,success:function (layero, index) {
var body = layer.getChildFrame('body', index); // body.html() body里面的内容
layui.form.render();
var iframe = layero.find('iframe')[0].contentWindow;//获取弹出窗口
//将待编辑数据回显到页面中
body.find("#username").val(data.userName); // 方式一
body.find("input[name='passWord']").val(data.passWord);
body.find("input[name='realName']").val(data.realName);
body.find("select[name='status']").val(data.status); //给下拉框赋
iframe.layui.form.render('select');//在弹窗中渲染下拉框
}
,yes: function(index, layero){//确定btn回调
//在弹出的编辑页面中设定callbackdata()函数获取页面值
var res = layero.find('iframe')[0].contentWindow.callbackdata();
$.ajax({
type: 'POST',
url: "/sysuser/modifyUser", // 编辑接口
// dataType: 'json', // 服务器返回数据类型
contentType: "application/json",
data: JSON.stringify(res), //获取提交的表单字段
success: function (data) {
if (data == "true") {
layer.msg("修改成功", {icon: 6});
layer.close(index);//关闭弹窗
//修改成功后刷新父界面
table.reload('tableId')
return false;//false:阻止表单跳转 true:表单跳转
} else {
layer.msg("修改失败:"+data);
layer.close(index);
}
}
});
}
});
}
});
子页面中的callbackdata()函数
<script>
var callbackdata = function () {
var data = {
userName: $("#username").val(),
passWord: $("input[name='passWord']").val(),
realName: $("input[name='realName']").val(),
status: $("select[name='status']").val()
};
return data;
}
</script>
在弹窗子页面中进行新增修改。。。待续