adminlte+layui框架搭建3 - layui弹出层

在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>

注：本人觉得layui的layer使用体验很棒。