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

Posted 2021-01-31 newrohlzy

在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

（页面弹出层）

  1 <script>
  2         layui.use([‘table‘, ‘layer‘], function () {
  3             var table = layui.table
  4                 , layer = parent.layer
  5                 , $ = layui.jquery;
  6 
  7             //在tab页点击收缩菜单面板
  8             
  9 
 10             /*
 11              初始化表格
 12              */
 13             function initTable(queryStr) {
 14                 table.render({
 15                     elem: ‘#SysSampleIndexTable‘
 16                     , url: ‘/SysSample/GetList‘
 17                     , method: "post"
 18                     //, cellMinWidth: 55 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
 19                     , cols: [[
 20                         { type: ‘checkbox‘ }
 21                         , { field: ‘id‘, title: ‘ID‘, sort: true, hide: true }
 22                         , { field: ‘Name‘, title: ‘用户名‘ }
 23                         , { field: ‘Age‘, title: ‘年龄‘, sort: true }
 24                         , { field: ‘Bir‘, title: ‘生日‘, hide: true }
 25                         , { field: ‘Note‘, title: ‘简介‘ } //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
 26                         , { field: ‘Photo‘, title: ‘图片‘, sort: true, hide: true }
 27                         , { field: ‘CreateTime‘, title: ‘创建时间‘ }
 28                         , { fixed: ‘right‘, title: ‘操作‘, toolbar: ‘#barDemo‘, minWidth: 160 }
 29                     ]]
 30                     , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
 31                         layout: [‘limit‘, ‘count‘, ‘prev‘, ‘page‘, ‘next‘, ‘skip‘] //自定义分页布局
 32                         //,curr: 5 //设定初始在第 5 页
 33                         , groups: 3 //只显示 1 个连续页码
 34                         , first: ‘首页‘ //不显示首页
 35                         , last: ‘尾页‘ //不显示尾页
 36 
 37                     }
 38                     , limit: 10
 39                     , limits: [6, 10, 20, 30, 50, 100]
 40                     , where: {//条件
 41                         id: queryStr
 42                         //,sort:‘CreateTime‘//排序字段
 43                     }
 44                     //, request: {//请求参数
 45                     //    pageName: ‘page‘ //页码的参数名称，默认：page
 46                     //    , limitName: ‘limit‘ //每页数据量的参数名，默认：limit
 47                     //}
 48                     //, response: {//返回参数
 49                     //statusName: ‘status‘ //规定数据状态的字段名称，默认：code
 50                     //, statusCode: 200 //规定成功的状态码，默认：0
 51                     //, msgName: ‘hint‘ //规定状态信息的字段名称，默认：msg
 52                     //, countName: ‘total‘ //规定数据总数的字段名称，默认：count
 53                     //, dataName: ‘rows‘ //规定数据列表的字段名称，默认：data
 54                     //}
 55                     //,initSort: {
 56                     //    field: ‘id‘ //排序字段，对应 cols 设定的各字段名
 57                     //    , type: ‘desc‘ //排序方式  asc: 升序、desc: 降序、null: 默认排序
 58                     //}
 59                 })
 60             }
 61 
 62             initTable("");
 63             table.on(‘tool(SysSampleIndexTable)‘, function (obj) {
 64                 //调试  ->  console.log(obj)
 65                 var id = obj.data.id;
 66 
 67                 if (obj.event === ‘del‘) {
 68                     layer.confirm(‘确认删除‘, function (index) {
 69                         //obj.del();
 70 
 71                         //post请求删除
 72                         $.post(‘/SysSample/Delete‘, { "id": id }, function (Result) {
 73                             //提示成功或失败
 74                             if (Result.type = 1) {
 75                                 layer.msg(‘删除成功‘, {
 76                                     offset: ‘rb‘,
 77                                     icon: 1,
 78                                 })
 79                             }
 80                             else {
 81                                 layer.msg(‘删除失败‘, {
 82                                     offset: ‘rb‘,
 83                                     icon: 1,
 84                                 })
 85                             }
 86                             initTable("");
 87 
 88 
 89                         }, ‘json‘);
 90 
 91                         layer.close(index);
 92                     });
 93                 } else if (obj.event === ‘edit‘) {
 94                     layer.open({
 95                         type: 2,
 96                         title: ‘编辑‘,
 97                         maxmin: true,
 98                         shade: 0.8,
 99                         area: [‘450px‘, ‘90%‘],
100                         content: ‘/SysSample/Edit?id=‘ + encodeURI(id) //iframe的url});
101                     })
102                 }
103                 else if (obj.event === "details") {//详情页
104                     layer.open({
105                         type: 2,
106                         title: ‘详情‘,
107                         maxmin: true,
108                         shade: 0.8,
109                         area: [‘450px‘, ‘90%‘],
110                         btn: [‘按钮1‘],
111                         yes:function(index, layero) {
112                             layer.close(index);
113                             //dom对象
114                             //console.log(layero);
115                         },
116                         content: ‘/SysSample/Details?id=‘ + id //iframe的url});
117                     })
118                 }
119             });
120 
121             //查询
122             $("#btnSearch").on("click", function () {
123                 initTable($("#textSearch").val())
124             })
125 
126             //新增
127             $("#btnCreate").on("click", function () {
128                 var url = "/SysSample/Create";
129                 layer.open({
130                     type: 2,
131                     title: ‘添加‘,
132                     shade: 0.3,
133                     resize: false,
134                     area: [‘700px‘, ‘80%‘],
135                     content: ‘/SysSample/Create‘
136                 })
137                 //layer.open({
138                 //    title: ‘新增‘,
139                 //    type: 1,
140                 //    id: "SysSamplePage",
141                 //    shadeClose: true,
142                 //    maxmin: true,
143                 //    skin: ‘layui-layer-rim‘,
144                 //    area: [‘500px‘, ‘380px‘],
145                 //    content: $(‘#modalwindow‘).html("<iframe width=‘100%‘ height=‘380‘ scrolling=‘yes‘ frameborder=‘0‘‘ src=‘"+encodeURI(url)+"‘></iframe>")
146                 //});
147             })
148 
149         })
150 </script>

View Code

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