root
/
Pear-Admin-Layui
mirror of https://gitee.com/zhang_1334717033/Pear-Admin-Layui
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

!2 增加弹窗案例 

Merge pull request !2 from SAssassin/layerdemo
develop
SAssassin 2020-06-20 11:44:12 +08:00 committed by Gitee
parent c5e197b80b 89a53389bf
commit dc978d98a8
6 changed files with 377 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
Pear Admin v 2.0/admin/data/layer.json Normal file
View File

@ -0,0 +1,51 @@
{
"createTime": null,
"createBy": null,
"updateTime": null,
"updateBy": null,
"remark": null,
"code": 0,
"msg": "...",
"count": 10,
"data": [{
"taskName": "登录任务",
"taskInfo": "任务描述",
"realName": "就眠仪式"
}, {
"taskName": "登录任务",
"taskInfo": "任务描述",
"realName": "就眠仪式"
}, {
"taskName": "登录任务",
"taskInfo": "任务描述",
"realName": "就眠仪式"
},{
"taskName": "登录任务",
"taskInfo": "任务描述",
"realName": "就眠仪式"
}, {
"taskName": "登录任务",
"taskInfo": "任务描述",
"realName": "就眠仪式"
}, {
"taskName": "登录任务",
"taskInfo": "任务描述",
"realName": "就眠仪式"
}, {
"taskName": "登录任务",
"taskInfo": "任务描述",
"realName": "就眠仪式"
}, {
"taskName": "登录任务",
"taskInfo": "任务描述",
"realName": "就眠仪式"
}, {
"taskName": "登录任务",
"taskInfo": "任务描述",
"realName": "就眠仪式"
}, {
"taskName": "登录任务",
"taskInfo": "任务描述",
"realName": "就眠仪式"
}]
}

8
Pear Admin v 2.0/admin/data/menu.json
View File

@ -119,6 +119,14 @@
"type": 1,
"openType": "_iframe",
"href": "view/common/basic/formSelects.html"
},
{
"id": 217,
"title": "弹出窗体",
"icon": "layui-icon layui-icon-face-smile",
"type": 1,
"openType": "_iframe",
"href": "view/common/basic/layer.html"
}
]
},

4
Pear Admin v 2.0/index.html
View File

@ -96,6 +96,10 @@
pearSocial.render(setting);
pearAdmin.render(config);
// 获取当前选中的tab
window.selectedWindow = function () {
return $(".layui-body .layui-tab-content .layui-show")[0].children[0].contentWindow;
}
})
</script>
<!-- 新 增 百 度 统 计 ( 可 移 除 )-->

108
Pear Admin v 2.0/view/common/basic/layer.html Normal file
View File

@ -0,0 +1,108 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="../../../component/layui/css/layui.css" rel="stylesheet" />
<link href="../../../admin/css/pearCommon.css" rel="stylesheet" />
</head>
<body class="pear-container">
<div class="layui-card">
<div class="layui-card-body">
<table id="task-table" lay-filter="task-table"></table>
</div>
</div>
<script type="text/html" id="task-toolbar">
<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="innerPageAdd">
<i class="layui-icon layui-icon-add-1"></i>
本页面新增
</button>
<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="outerPageAdd">
<i class="layui-icon layui-icon-add-1"></i>
父页面新增
</button>
</script>
<script src="../../../component/layui/layui.js"></script>
<script>
layui.use(['table', 'form', 'jquery', 'element'], function () {
let table = layui.table;
let form = layui.form;
let $ = layui.jquery;
let element = layui.element;
let cols = [
[
{
title: '任务名称',
field: 'taskName',
align: 'center',
width: 100
},
{
title: '任务描述',
field: 'taskInfo',
align: 'center'
},
{
title: '执行人',
field: 'realName',
align: 'center',
width: 150
}
]
]
table.render({
elem: '#task-table',
url: '../../../admin/data/layer.json',
page: true,
cols: cols,
skin: 'line',
toolbar: '#task-toolbar',
});
table.on('toolbar(task-table)', function (obj) {
if (obj.event === 'innerPageAdd') {
window.innerPageAdd();
} else if (obj.event === 'outerPageAdd') {
window.outerPageAdd();
}
});
window.innerPageAdd = function () {
layer.open({
type: 2,
title: '新增',
shade: 0.1,
area: ['500px', '400px'],
content: '../basic/operate/innerPageAdd.html'
});
}
window.innerPageAddCallBack = function(index){
console.log("innerPageAddCallBack:do anything...");
layer.close(index); //关闭弹窗
table.reload("task-table");//table重新加载
}
window.outerPageAdd = function () {
parent.layer.open({
type: 2,
title: '新增',
shade: 0.1,
area: ['500px', '400px'],
content: 'view/common/basic/operate/outerPageAdd.html'
});
}
window.outerPageAddCallBack = function(index){
console.log("outerPageAddCallBack:do anything...");
parent.layer.close(index); //关闭弹窗
table.reload("task-table");//table重新加载
}
})
</script>
</body>
</html>

100
Pear Admin v 2.0/view/common/basic/operate/innerPageAdd.html Normal file
View File

@ -0,0 +1,100 @@
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../../../../admin/css/pearCommon.css" />
<link rel="stylesheet" href="../../../../component/layui/css/layui.css" />
</head>
<body>
<form class="layui-form" action="">
<div class="mainBox">
<div class="main-container">
<div class="main-container">
<div class="layui-form-item">
<label class="layui-form-label">任务名称</label>
<div class="layui-input-block">
<input type="text" name="taskName" lay-verify="title" autocomplete="off" placeholder="请输入任务名称" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">任务描述</label>
<div class="layui-input-block">
<input type="text" name="taskInfo" lay-verify="title" autocomplete="off" placeholder="请输入任务描述" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">执行人</label>
<div class="layui-input-block">
<input type="text" name="realName" lay-verify="title" autocomplete="off" placeholder="请输入执行人" class="layui-input">
</div>
</div>
</div>
</div>
</div>
<div class="bottom">
<div class="button-container">
<button type="submit" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit="" lay-filter="task-save">
<i class="layui-icon layui-icon-ok"></i>
提交
</button>
<button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">
<i class="layui-icon layui-icon-refresh"></i>
重置
</button>
</div>
</div>
</form>
<script src="../../../../component/layui/layui.js"></script>
<script>
layui.use(['form', 'jquery'], function () {
let form = layui.form;
let $ = layui.jquery;
form.on('submit(task-save)', function (data) {
// 以下仅做示例，实现方式及实现位置可多种
// 遮罩层
// $.ajax({
// url:'...',
// data:JSON.stringify(data.field),
// dataType:'json',
// contentType:'application/json',
// type:'post',
// success:function(result){
// if(result.success){
// layer.msg("successful", {
// icon: 1,
// time: 1000
// }, function () {
// //方式一：直接弹窗内完成操作
// // parent.layer.close(parent.layer.getFrameIndex(window.name)); //关闭当前页
// // parent.layui.table.reload("task-table");//原页面重新加载
// //方式二：调用原页面中的方法
// parent.innerPageAddCallBack(parent.layer.getFrameIndex(window.name));
// });
// } else{
// layer.msg(result.msg,{icon:2,time:1000});
// }
// }
// });
// 方便测试效果
layer.msg("successful", {
icon: 1,
time: 1000
}, function () {
//方式一：直接弹窗内完成操作
//parent.layer.close(parent.layer.getFrameIndex(window.name)); //关闭当前页
//parent.layui.table.reload("task-table");//原页面重新加载
//方式二：调用原页面中的方法(与方式一效果一样，但职责更明确)
parent.innerPageAddCallBack(parent.layer.getFrameIndex(window.name));
});
return false;
});
})
</script>
</body>
</html>

106
Pear Admin v 2.0/view/common/basic/operate/outerPageAdd.html Normal file
View File

@ -0,0 +1,106 @@
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../../../../admin/css/pearCommon.css" />
<link rel="stylesheet" href="../../../../component/layui/css/layui.css" />
</head>
<body>
<form class="layui-form" action="">
<div class="mainBox">
<div class="main-container">
<div class="main-container">
<div class="layui-form-item">
<label class="layui-form-label">任务名称</label>
<div class="layui-input-block">
<input type="text" name="taskName" lay-verify="title" autocomplete="off" placeholder="请输入任务名称" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">任务描述</label>
<div class="layui-input-block">
<input type="text" name="taskInfo" lay-verify="title" autocomplete="off" placeholder="请输入任务描述" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">执行人</label>
<div class="layui-input-block">
<input type="text" name="realName" lay-verify="title" autocomplete="off" placeholder="请输入执行人" class="layui-input">
</div>
</div>
</div>
</div>
</div>
<div class="bottom">
<div class="button-container">
<button type="submit" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit="" lay-filter="task-save">
<i class="layui-icon layui-icon-ok"></i>
提交
</button>
<button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">
<i class="layui-icon layui-icon-refresh"></i>
重置
</button>
</div>
</div>
</form>
<script src="../../../../component/layui/layui.js"></script>
<script>
layui.use(['form', 'jquery'], function () {
let form = layui.form;
let $ = layui.jquery;
form.on('submit(task-save)', function (data) {
// 以下仅做示例，实现方式及实现位置可多种
// 遮罩层
// $.ajax({
// url:'...',
// data:JSON.stringify(data.field),
// dataType:'json',
// contentType:'application/json',
// type:'post',
// success:function(result){
// if(result.success){
// layer.msg("successful", {
// icon: 1,
// time: 1000
// }, function () {
// var index = parent.layer.getFrameIndex(window.name);
// //方式一：直接弹窗内寻找源头页面完成操作
// //let parentWindow = parent.layui.$(".layui-body .layui-tab-content .layui-show")[0].children[0].contentWindow;
// //方式二：通过index.html页中window.selectedWindow()函数寻找源头页面
// let parentWindow = parent.selectedWindow().window;
// parentWindow.outerPageAddCallBack(index);
// });
// } else{
// layer.msg(result.msg,{icon:2,time:1000});
// }
// }
// });
// 方便测试效果
layer.msg("successful", {
icon: 1,
time: 1000
}, function () {
var index = parent.layer.getFrameIndex(window.name);
//方式一：直接弹窗内寻找源头页面完成操作
//let parentWindow = parent.layui.$(".layui-body .layui-tab-content .layui-show")[0].children[0].contentWindow;
//方式二：通过index.html页中window.selectedWindow()函数寻找源头页面
let parentWindow = parent.selectedWindow().window;
parentWindow.outerPageAddCallBack(index);
});
return false;
});
})
</script>
</body>
</html>