部分代码如下:
index = layui.layer.open({
title: title,
type: 2,
area: ['98%', '96%'],
content: '/Test/Test/TestForm',
success: function (layero, index) {
var body = layui.layer.getChildFrame('body', index);
//编辑
if (key) {
$.ajax({
type: 'get',
url: '/Test/Test/TestDan?key=' + key.ID,
//async: false,
success: function (res) {
//console.log(res.data);
body.find('.layui-form').formSerialize(res.data);
//获取iframe并进行render
//var iframeWin = window[layero.find('iframe')[0]['name']]//与下面写法一样的值
var iframeWindow = layero.find('iframe')[0].contentWindow;
iframeWindow.layui.form.render();
通过上面的栗子实践
readerArchivesManage.html(读者列表html)
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="common/fragment_head :: common-head('图书管理系统')"></head>
<link th:href="@{/plugins/layui/css/layui.css}" rel="stylesheet" type="text/css">
<link th:href="@{/css/public.css}" rel="stylesheet" type="text/css">
<body class="childrenBody">
<form class="layui-form">
<blockquote class="layui-elem-quote quoteBox">
<div class="layui-inline">
<a class="layui-btn layui-btn-normal addReaderArchives_btn">添加读者</a>
</div>
</blockquote>
<table id="readerArchivesList" lay-filter="readerArchivesListTable"></table>
<!--操作-->
<script type="text/html" id="readerArchivesListBar">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
</script>
</form>
<div th:include="common/fragment_js :: common-js"></div>
<script th:src="@{/plugins/layui/layui.js}" type="text/javascript"></script>
<script th:src="@{/js/readerManage/readerArchivesManage.js}" type="text/javascript"></script>
</body>
</html>
readerArchivesManage.js (列表js)
/**
* 读者管理
*/
layui.use(['form','layer','table','laytpl'],function(){
var form = layui.form,
layer = parent.layer === undefined ? layui.layer : top.layer,
$ = layui.jquery,
laytpl = layui.laytpl,
table = layui.table;
//初始化列表
var tableIns = table.render({
elem: '#readerArchivesList',
url : ctx+'/readerManage/getReaderArchivesList',
cellMinWidth : 95,
page : true,
height : "full-125",
limit : 10,
limits : [10,20],
id : "readerArchivesListTable",
cols : [[
{field: 'barcode', title: '条形码', width:200, align:"center"},
{field: 'name', title: '姓名', width:200, align:"center"},
{field: 'typename', title: '读者类型', width:200, align:"center"},
{field: 'paperType', title: '证件类型', width:200, align:"center"},
{field: 'paperNO', title: '证件号码', width:200, align:"center"},
{field: 'tel', title: '电话', width:200, align:"center"},
{field: 'email', title: 'Email', width:200, align:"center"},
{title: '操作', width:236, templet:'#readerArchivesListBar',fixed:"right",align:"center"}
]]
});
//添加读者
function addReaderArchives(edit){
var index = layui.layer.open({
title : "添加读者",
type : 2,
area: ['400px', '460px'],
content : ctx+"/readerManage/toAddReaderArchives",
success : function(layero, index){
var body = layui.layer.getChildFrame('body', index);
//var childForm = layui.layer.getChildFrame('form', index);
if(edit){
body.find("#readerName").val(edit.name);
//body.find("input[name='sex']").removeAttr('checked');
//body.find("input[value="+edit.sex+"]").attr("checked","checked");//性别
body.find("input[name='sex'][value='男']").attr("checked", edit.sex == '男' ? true : false);
body.find("input[name='sex'][value='女']").attr("checked", edit.sex == '女' ? true : false);
body.find("#barcode").val(edit.barcode);
body.find("#typeid").val(edit.typeid);//读者类型
//body.find("#typeid").find("option[value="+edit.typeid+"]").attr("selected",true);
body.find("#vocation").val(edit.vocation);
body.find("#birthday").val(edit.birthday);
body.find("#paperType").val(edit.paperType);
//body.find("#paperType").find("option[value="+edit.paperType+"]").attr("selected",true);//有效证件
body.find("#paperNO").val(edit.paperNO);
body.find("#tel").val(edit.tel);
body.find("#email").val(edit.email);
body.find("#introduce").val(edit.remark);
body.find("#id").val(edit.id);
form.render();//刷新全部
//childForm.render();
//刷新弹窗(子iframe)的form
var iframeWindow = layero.find('iframe')[0].contentWindow;
iframeWindow.layui.form.render();
}
setTimeout(function(){
layui.layer.tips('点击此处返回列表', '.layui-layer-setwin .layui-layer-close', {
tips: 3
});
},500)
}
})
}
$(".addReaderArchives_btn").click(function(){
addReaderArchives();
})
//批量删除
/*$(".delAll_btn").click(function(){
var checkStatus = table.checkStatus('userListTable'),
data = checkStatus.data,
newsId = [];
if(data.length > 0) {
for (var i in data) {
newsId.push(data[i].newsId);
}
layer.confirm('确定删除选中的用户?', {icon: 3, title: '提示信息'}, function (index) {
// $.get("删除文章接口",{
// newsId : newsId //将需要删除的newsId作为参数传入
// },function(data){
tableIns.reload();
layer.close(index);
// })
})
}else{
layer.msg("请选择需要删除的用户");
}
})*/
//列表操作
table.on('tool(readerArchivesListTable)', function(obj){
var layEvent = obj.event,
data = obj.data;
if(layEvent === 'edit'){ //编辑
addReaderArchives(data);
}else if(layEvent === 'del'){ //删除
layer.confirm('确定删除?',{icon:3, title:'提示信息'},function(index){
$.get(ctx+"/readerManage/delReaderArchivesById",{id : data.id },function(data){
tableIns.reload();
layer.close(index);
})
});
}
});
})
addReaderArchives.html (添加页面,iframe子页面)
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="common/fragment_head :: common-head('图书管理系统')"></head>
<link th:href="@{/plugins/layui/css/layui.css}" rel="stylesheet" type="text/css">
<link th:href="@{/css/public.css}" rel="stylesheet" type="text/css">
<style>
.layui-layer-iframe iframe{height: 100%!important;}
</style>
<body class="childrenBody">
<form class="layui-form" style="width:80%;">
<div class="layui-form-item layui-row layui-col-xs12">
<label class="layui-form-label">姓名</label>
<div class="layui-input-block">
<input type="text" name="readerName" id="readerName" class="layui-input" lay-verify="required" placeholder="请输入姓名">
</div>
</div>
<div class="layui-form-item layui-row layui-col-xs12">
<label class="layui-form-label">性别</label>
<div class="layui-input-block">
<!--<input type="text" name="sex" id="sex" class="layui-input" lay-verify="required" placeholder="请输入性别">-->
<input type="radio" name="sex" value="男" title="男" checked="">
<input type="radio" name="sex" value="女" title="女">
</div>
</div>
<div class="layui-form-item layui-row layui-col-xs12">
<label class="layui-form-label">条形码</label>
<div class="layui-input-block">
<input type="text" name="barcode" id="barcode" class="layui-input" lay-verify="required" placeholder="请输入条形码">
</div>
</div>
<div class="layui-form-item layui-row layui-col-xs12">
<label class="layui-form-label">读者类型</label>
<div class="layui-input-block">
<!--<input type="text" name="typeid" id="typeid" class="layui-input" lay-verify="required" placeholder="请输入读者类型">-->
<select name="typeid" id="typeid" lay-verify="required">
<option value="">请选择</option>
<option th:each="ro: ${readerTypeNameList}" th:value="${ro.id}" th:text="${ro.name}" ></option>
</select>
</div>
</div>
<div class="layui-form-item layui-row layui-col-xs12">
<label class="layui-form-label">职业</label>
<div class="layui-input-block">
<input type="text" name="vocation" id="vocation" class="layui-input" lay-verify="required" placeholder="请输入职业">
</div>
</div>
<div class="layui-form-item layui-row layui-col-xs12">
<label class="layui-form-label">出生日期</label>
<div class="layui-input-block">
<!--<input type="text" name="birthday" id="birthday" class="layui-input" lay-verify="required" placeholder="请输入出生日期">-->
<input type="text" name="birthday" id="birthday" class="layui-input" lay-verify="required" placeholder="yyyy-MM-dd" autocomplete="off">
</div>
</div>
<div class="layui-form-item layui-row layui-col-xs12">
<label class="layui-form-label">有效证件</label>
<div class="layui-input-block">
<!--<input type="text" name="paperType" id="paperType" class="layui-input" lay-verify="required" placeholder="请输入有效证件">-->
<select name="paperType" id="paperType" lay-verify="required">
<option value="身份证">身份证</option>
<option value="学生证">学生证</option>
<option value="军官证">军官证</option>
<option value="工作证">工作证</option>
</select>
</div>
</div>
<div class="layui-form-item layui-row layui-col-xs12">
<label class="layui-form-label">证件号码</label>
<div class="layui-input-block">
<input type="text" name="paperNO" id="paperNO" class="layui-input" lay-verify="required" placeholder="请输入证件号码">
</div>
</div>
<div class="layui-form-item layui-row layui-col-xs12">
<label class="layui-form-label">电话</label>
<div class="layui-input-block">
<input type="text" name="tel" id="tel" class="layui-input" lay-verify="required" placeholder="请输入电话">
</div>
</div>
<div class="layui-form-item layui-row layui-col-xs12">
<label class="layui-form-label">Email</label>
<div class="layui-input-block">
<input type="text" name="email" id="email" class="layui-input" lay-verify="required" placeholder="请输入Email">
</div>
</div>
<div class="layui-form-item layui-row layui-col-xs12">
<label class="layui-form-label">备注</label>
<div class="layui-input-block">
<textarea name="introduce" id="introduce" placeholder="请输入备注" class="layui-textarea userDesc"></textarea>
</div>
</div>
<div class="layui-form-item layui-row layui-col-xs12">
<div class="layui-input-block">
<button class="layui-btn layui-btn-sm" lay-submit="" lay-filter="addReaderArchives">确定</button>
</div>
</div>
<input type="hidden" name="id" id="id" />
</form>
<div th:include="common/fragment_js :: common-js"></div>
<script th:src="@{/plugins/layui/layui.js}" type="text/javascript"></script>
<script th:src="@{/js/readerManage/addReaderArchives.js}" type="text/javascript"></script>
</body>
</html>
addReaderArchives.js(添加页面js,iframe子页面js)
layui.use(['form','layer','laydate'],function(){
var form = layui.form
layer = parent.layer === undefined ? layui.layer : top.layer,
$ = layui.jquery,
laydate = layui.laydate;
//日期
laydate.render({
elem: '#birthday'
});
form.on("submit(addReaderArchives)",function(data){
//弹出loading
var index = top.layer.msg('数据提交中,请稍候',{icon: 16,time:false,shade:0.8});
var field = data.field;
var params = {
name:field.readerName,
sex:field.sex,
barcode:field.barcode,
typeid:field.typeid,
vocation:field.vocation,
birthday:field.birthday,
paperType:field.paperType,
paperNO:field.paperNO,
tel:field.tel,
email:field.email,
remark:field.introduce,
}
if(field.id==""){
// 实际提交信息
$.post(ctx+"/readerManage/addReaderArchives",params,function(res){
top.layer.close(index);
top.layer.msg("添加成功!");
layer.closeAll("iframe");
top.location.reload();
})
}else{
params.id = field.id;
// 实际提交信息
$.post(ctx+"/readerManage/updateReaderArchives",params,function(res){
top.layer.close(index);
top.layer.msg("修改成功!");
layer.closeAll("iframe");
top.location.reload();
})
}
return false;
})
//格式化时间
function filterTime(val){
if(val < 10){
return "0" + val;
}else{
return val;
}
}
//定时发布
var time = new Date();
var submitTime = time.getFullYear()+'-'+filterTime(time.getMonth()+1)+'-'+filterTime(time.getDate())+' '+filterTime(time.getHours())+':'+filterTime(time.getMinutes())+':'+filterTime(time.getSeconds());
})