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
（页面弹出层）
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>
注：本人觉得layui的layer使用体验很棒。
