在 amdinlte 首页引入 layui.JS 和 layui.CSS 后添加代码
- <script>
- layui.use(['layer'], function () {
- var layer = layui.layer
- , $ = layui.jQuery;
- })
- </script>
so, 我 tab 层的 iframe 全部都是使用这个 layer 弹出 (layui 不推荐这样使用), 这样可以做是为了避免 tab 页中 iframe 的弹出层的嵌页效果, 当然也可以在子页面使用 layer=layui.layer
(页面弹出层)
- <script>
- layui.use(['table', 'layer'], function () {
- var table = layui.table
- , layer = parent.layer
- , $ = layui.jQuery;
- // 在 tab 页点击收缩菜单面板
- /*
- 初始化表格
- */
- function initTable(queryStr) {
- table.render({
- elem: '#SysSampleIndexTable'
- , url: '/SysSample/GetList'
- , method: "post"
- //, cellMinWidth: 55 // 全局定义常规单元格的最小宽度, layui 2.2.1 新增
- , cols: [[
- { type: 'checkbox' }
- , { field: 'id', title: 'ID', sort: true, hide: true }
- , { field: 'Name', title: '用户名' }
- , { field: 'Age', title: '年龄', sort: true }
- , { field: 'Bir', title: '生日', hide: true }
- , { field: 'Note', title: '简介' } //minWidth: 局部定义当前单元格的最小宽度, layui 2.2.1 新增
- , { field: 'Photo', title: '图片', sort: true, hide: true }
- , { field: 'CreateTime', title: '创建时间' }
- , { fixed: 'right', title: '操作', toolbar: '#barDemo', minWidth: 160 }
- ]]
- , page: { // 支持传入 laypage 组件的所有参数 (某些参数除外, 如: jump/elem) - 详见文档
- layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] // 自定义分页布局
- //,curr: 5 // 设定初始在第 5 页
- , groups: 3 // 只显示 1 个连续页码
- , first: '首页' // 不显示首页
- , last: '尾页' // 不显示尾页
- }
- , limit: 10
- , limits: [6, 10, 20, 30, 50, 100]
- , where: {// 条件
- id: queryStr
- //,sort:'CreateTime'// 排序字段
- }
- //, request: {// 请求参数
- // pageName: 'page' // 页码的参数名称, 默认: page
- // , limitName: 'limit' // 每页数据量的参数名, 默认: limit
- //}
- //, response: {// 返回参数
- //statusName: 'status' // 规定数据状态的字段名称, 默认: code
- //, statusCode: 200 // 规定成功的状态码, 默认: 0
- //, msgName: 'hint' // 规定状态信息的字段名称, 默认: msg
- //, countName: 'total' // 规定数据总数的字段名称, 默认: count
- //, dataName: 'rows' // 规定数据列表的字段名称, 默认: data
- //}
- //,initSort: {
- // field: 'id' // 排序字段, 对应 cols 设定的各字段名
- // , type: 'desc' // 排序方式 asc: 升序, desc: 降序, null: 默认排序
- //}
- })
- }
- initTable("");
- table.on('tool(SysSampleIndexTable)', function (obj) {
- // 调试 -> console.log(obj)
- var id = obj.data.id;
- if (obj.event === 'del') {
- layer.confirm('确认删除', function (index) {
- //obj.del();
- //post 请求删除
- $.post('/SysSample/Delete', { "id": id }, function (Result) {
- // 提示成功或失败
- if (Result.type = 1) {
- layer.msg('删除成功', {
- offset: 'rb',
- icon: 1,
- })
- }
- else {
- layer.msg('删除失败', {
- offset: 'rb',
- icon: 1,
- })
- }
- initTable("");
- }, 'json');
- layer.close(index);
- });
- } else if (obj.event === 'edit') {
- layer.open({
- type: 2,
- title: '编辑',
- maxmin: true,
- shade: 0.8,
- area: ['450px', '90%'],
- content: '/SysSample/Edit?id=' + encodeURI(id) //iframe 的 url});
- })
- }
- else if (obj.event === "details") {// 详情页
- layer.open({
- type: 2,
- title: '详情',
- maxmin: true,
- shade: 0.8,
- area: ['450px', '90%'],
- btn: ['按钮 1'],
- yes:function(index, layero) {
- layer.close(index);
- //dom 对象
- //console.log(layero);
- },
- content: '/SysSample/Details?id=' + id //iframe 的 url});
- })
- }
- });
- // 查询
- $("#btnSearch").on("click", function () {
- initTable($("#textSearch").val())
- })
- // 新增
- $("#btnCreate").on("click", function () {
- var url = "/SysSample/Create";
- layer.open({
- type: 2,
- title: '添加',
- shade: 0.3,
- resize: false,
- area: ['700px', '80%'],
- content: '/SysSample/Create'
- })
- //layer.open({
- // title: '新增',
- // type: 1,
- // id: "SysSamplePage",
- // shadeClose: true,
- // maxmin: true,
- // skin: 'layui-layer-rim',
- // area: ['500px', '380px'],
- // content: $('#modalwindow').html("<iframe width='100%'height='380'scrolling='yes'frameborder='0''src='"+encodeURI(url)+"'></iframe>")
- //});
- })
- })
- </script>
- View Code
注: 本人觉得 layui 的 layer 使用体验很棒.
来源: http://www.bubuko.com/infodetail-2905579.html