layer.open中select失效，表格中插入圖片，checkbox是否選中，檢視大圖
阿新 • • 發佈：2018-12-24
彈窗官網地址：http://layer.layui.com/
1.在使用layui時layer.open的彈窗使用十分方便，普通彈窗可以滿足普通需求，prompt可以滿足一個input框的需求，但如果有兩個輸入框或者有select時，就需要用到自定義彈窗了；
2.select失效，失效原因是.layui-layer-page .layui-layer-content{overflow: auto;}，將其改為.layui-layer-page .layui-layer-content{overflow: visible;}同時在success函式中執行form.render('select');，這個可能是layui不希望在彈窗中使用select吧，相信以後會完善的；
3.表格中插入圖片
3.1效果
3.2說明
插入圖片有兩種方式：①通過HTML中迴圈渲染表格時插入img標籤；②在js中通過templet方式；
4.checkbox判斷是否選中
須在容器上新增lay-filter，然後再checkbox是使用
5.檢視大圖（//0-6的選擇，指定彈出圖片動畫型別，預設隨機（請注意，3.0之前的版本用shift引數））
6.程式碼部分：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>黑名單管理</title> <link rel="stylesheet" href="../frame/layui/css/layui.css"> <link rel="stylesheet" href="http://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css"> <link rel="stylesheet" href="../frame/static/css/style.css"> <link rel="icon" href="../frame/static/image/code.png"> <style type="text/css"> .lh38{ line-height: 38px; } .bold{ font-weight: bold; } .f20{ font-size: 20px; } .mr20{ margin-right: 20px; } .w182{ width: 182px; } .mt20{ margin-top: 20px; } .myself .layui-table-cell{ white-space:normal; height: auto; } .myself .layui-form-label{ padding-left: 0; text-align: left; width: auto; } .myself .layui-input-block{ margin-left: 80px; } .myself .layui-layer-page .layui-layer-content{ overflow: visible; } </style> </head> <body class="body myself"> <div class="my-btn-box layui-row"> <div class="fl lh38 bold f20">黑名單管理</div> </div> <!-- 工具集 --> <div class="layui-row layui-form"> <div class="fl mr20"> <div class="layui-form"> <span class="layui-form-label">資料來源:</span> <div class="layui-input-block"> <select> <option value="">APP</option> <option value="0">觸屏</option> <option value="1">Web</option> </select> </div> </div> </div> <div class="fl mr20"> <span class="layui-form-label">使用者：</span> <div class="layui-input-inline"> <input type="text" placeholder="請輸入手機號或ID" class="layui-input"> </div> </div> <button class="layui-btn mgl-20 fl">搜尋</button> </div> <!-- 表格 --> <div id="dateTable" lay-filter="myLayFilter"></div> <script type="text/javascript" src="../frame/layui/layui.js"></script> <script type="text/javascript" src="../js/index.js"></script> <script type="text/javascript"> // layui方法 layui.use(['table', 'form', 'layer', 'vip_table'], function() { // 操作物件 var form = layui.form, table = layui.table, layer = layui.layer, vipTable = layui.vip_table, $ = layui.jquery; // 表格渲染 var tableIns = table.render({ elem: '#dateTable' //指定原始表格元素選擇器（推薦id選擇器） , height: vipTable.getFullHeight() //容器高度 , cols: [ [ {checkbox: true, sort: true, fixed: true, space: true}, { field: 'id', title: '序號', width: 80 }, { field: 'auth_group_name', title: '使用者賬號', width: 120 }, { field: 'last_login_time', title: '使用者ID', width: 105 }, { field: 'last_login_ip', title: '封禁型別', width: 180 }, { field: 'create_time', title: '封禁時間', width: 180 }, { field: 'status', title: '剩餘時間', width: 90 }, { field: 'create_time', title: '頭像', width: 180 , templet:'<div><img class="layer-photos-demo" layer-src="//img-ads.csdn.net/2018/201812111201044213.png" src="//img-ads.csdn.net/2018/201812111201044213.png"/></div>' }, { field: 'account', title: '操作人', width: 180 }, { title: '操作', width: 150, align: 'center', toolbar: '#barOption' } //這裡的toolbar值是模板元素的選擇器 ] ], id: 'dataCheck', url: './../json/data_table.json', method: 'get', page: true, limits: [10,20,30,40,50,60,70,80,90], limit: 10 //預設採用30 , loading: false, done: function(res, curr, count) { //如果是非同步請求資料方式，res即為你介面返回的資訊。 //如果是直接賦值的方式，res即為：{data: [], count: 99} data為當前頁資料、count為資料總長度 console.log(res); //得到當前頁碼 console.log(curr); //得到資料總量 console.log(count); //檢視大圖 $("body").on("click",".layer-photos-demo",function(e){ layer.photos({ photos: { "data": [{"src": e.target.src},{"src": e.target.src},{"src": e.target.src}] } ,anim: 3 }); }); } }); // 獲取選中行 table.on('checkbox(myLayFilter)', function(obj) { console.log("obj",obj) layer.msg('123'); console.log(obj.checked); //當前是否選中狀態 console.log(obj.data); //選中行的相關資料 console.log(obj.type); //如果觸發的是全選，則為：all，如果觸發的是單選，則為：one }); //監聽行工具事件 table.on('tool(test)', function(obj) { //注：tool 是工具條事件名，test 是 table 原始容器的屬性 lay-filter="對應的值" var data = obj.data //獲得當前行資料 ,layEvent = obj.event; //獲得 lay-event 對應的值 if(layEvent === 'addTime') { //示範一個公告層 layer.open({ type: 1, title: "增加封禁時間" //不顯示標題欄 , area: '500px;', shade: 0.8, id: 'addTime' //設定一個id，防止重複彈出 , resize: false, btn: ['確認', '取消'], btnAlign: 'r', content: '<div style="padding: 10px; background-color: #fff; color: #000; font-weight: 300;">'+ '<div>此操作將延長使用者的封禁時間，請選擇增加時長：</div>'+ '<div style="width: 350px;margin-top:20px">'+ '<div class="layui-form">'+ '<span class="layui-form-label">方式:</span>'+ '<div class="layui-input-block">'+ '<select>'+ '<option value="">全部</option>'+ '<option value="0">未稽核</option>'+ '<option value="1">已通過</option>'+ '<option value="0">未稽核</option>'+ '<option value="1">已通過</option>'+ '<option value="0">未稽核</option>'+ '<option value="1">已通過</option>'+ '<option value="0">未稽核</option>'+ '<option value="1">已通過</option>'+ '<option value="0">未稽核</option>'+ '<option value="1">已通過</option>'+ '</select>'+ '</div>'+ '</div>'+ '</div>'+ '<div style="width: 350px;margin-top:20px">'+ '<div class="layui-form">'+ '<span class="layui-form-label">方式:</span>'+ '<div class="layui-input-block">'+ '<select>'+ '<option value="">全部</option>'+ '<option value="0">未稽核</option>'+ '<option value="1">已通過</option>'+ '<option value="0">未稽核</option>'+ '<option value="1">已通過</option>'+ '<option value="0">未稽核</option>'+ '<option value="1">已通過</option>'+ '<option value="0">未稽核</option>'+ '<option value="1">已通過</option>'+ '<option value="0">未稽核</option>'+ '<option value="1">已通過</option>'+ '</select>'+ '</div>'+ '</div>'+ '</div>'+ '</div>', success: function(layero) { form.render('select'); var btn = layero.find('.layui-layer-btn'); btn.find('.layui-layer-btn0').on("click",function(){ console.log("確認") }); } }); }else if(layEvent ==='Unsealing') { layer.open({ type: 1, title: "解除封禁" //不顯示標題欄 , area: '300px;', shade: 0.8, id: 'Unsealing' //設定一個id，防止重複彈出 , resize: false, btn: ['確認', '取消'], btnAlign: 'r', content: '<div style="padding: 10px; background-color: #fff; color: #000; font-weight: 300;">'+ '<div>你正在進行解除封禁操作，是否繼續？</div>'+ '</div>', success: function(layero) { var btn = layero.find('.layui-layer-btn'); btn.find('.layui-layer-btn0').on("click",function(){ console.log("確認") }); } }); } }); }); </script> <!-- 表格操作按鈕集 --> <script type="text/html" id="barOption"> <a class="layui-btn layui-btn-mini" lay-event="addTime">增加時間</a> <a class="layui-btn layui-btn-mini layui-btn-danger" lay-event="Unsealing">解封</a> </script> </body> </html>
7.推薦：
①官網：https://www.layui.com/demo/layer.html
②部落格：https://blog.csdn.net/QYHuiiQ/article/details/82079361
③部落格：https://www.cnblogs.com/thirteen-zxh/p/9529938.html