layui 彈窗中 分頁展示table
阿新 • • 發佈：2020-07-29
1. 需求：點選檢視更多，展示該類別 所有資料，並分頁
2. 參考文件：
（1）https://www.jianshu.com/p/40da11ebae66
（2）https://blog.csdn.net/coderbruis/article/details/82424862
（3）https://blog.csdn.net/qq_43303896/article/details/105820439
3. 效果圖：
4. 前端程式碼：
<!DOCTYPE html><html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html"><head th:include="layout/head ::com-style"></head><body class="body-iframe"> <!-- 表單模組 --> <div class="layui-card shadow"> <div class="layui-card-header"> 查詢表單 </div> <div class="layui-card-body layui-fluid" id="queryForm"> <form class="layui-form"> <div class="layui-row"> <div class="layui-form-item"> <!-- 型別 S--> <div class="layui-inline"> <label class="layui-form-label">型別</label> <div class="layui-input-inline" style="width: 280px"> <select name="type" id="selectKey"> <option value="">請選擇</option> <option value="1">歡迎頁</option> <option value="2">首頁浮窗</option> <option value="3">好物推薦</option> <option value="4">身體報告頁底部</option> <option value="5">知識頁頭部</option> <option value="6">首頁彈窗</option> <option value="7">服務頁頭部</option> </select> </div> </div> <div class="layui-inline" style="padding-top: 20px;padding-left: 300px"> <label class="layui-form-label">機構</label> <div class="layui-input-inline" style="width: 280px"> <input type="text" placeholder="搜尋" value="" class="layui-input" name="institutionName"> <i class="layui-edge"></i> </div> </div> <!-- 機構 E--> </div> </div> </form> <!-- <div class="layui-form-item layui-row" style="padding-left: 450px;padding-bottom: 20px">--> <div class="layui-row" style="padding-left: 492px;padding-bottom: 20px"> <button class="layui-btn layui-btn-sm" data-type="reload">立即查詢</button> <button class="layui-btn layui-btn-sm layui-btn-primary" type="reset" id="resetTab"> 重置 </button> </div> <!-- </div>--> </div> </div> <!-- 表格模組 --> <div class="layui-card shadow"> <div class="layui-card-header">表格</div> <div class="layui-card-body"> <!-- 按鈕欄 --> <div class="layui-btnbar"> <button class="layui-btn layui-btn-sm"> <i class="layui-icon"></i>新增 </button> </div> <!-- 資料表格例項 --> <table class="layui-table" id="tableId" lay-filter="tableFilter" lay-data="{method: 'post', page: true, url:'/appbanner/queryListSingle/'}"> <thead> <tr> <th lay-data="{field:'id', width:60, sort: true, fixed: true,templet: '#titleTpl'}">ID</th> <th lay-data="{field:'typeDesc'}">型別</th> <th lay-data="{field:'institutionName',width:108, fixed: false}">所屬機構</th> <th lay-data="{field:'url'}">跳轉地址</th> <th lay-data="{field:'validDesc'}">是否有效</th> <th lay-data="{field:'typeDesc'}">標籤</th> <th lay-data="{field:'startTime'}">開始時間</th> <th lay-data="{field:'endTime'}">結束時間</th> <th lay-data="{field:'showTime'}">展示時間</th> <th lay-data="{field:'modifyTime'}">更新時間</th> <th lay-data="{fixed: 'right', width:200, align:'center', toolbar: '#demoToolbar'}">操作</th> </tr> </thead> </table> </div> </div> <!--列表操作按鈕--> <script type="text/html" id="demoToolbar"> <a class="layui-btn layui-btn-xs" lay-event="show_more">檢視更多</a> </script> <!--頁面方法--> <script> layui.use('table', function () { var table = layui.table; var $ = layui.$, active = { reload: function () { from = $("#queryForm"); var data = getFormData(from); //執行過載 table.reload('tableId', { page: { curr: 1 //重新從第 1 頁開始 } , where: data }); }, }; // 新增查詢按鈕事件 $('.layui-card-body .layui-btn').on('click', function () { var type = $(this).data('type'); if (type === 'reload') { active[type] ? active[type].call(this) : ''; } else { from = $("#queryForm"); resetFormData(from); } }); // 新增新增按鈕事件 $('.layui-btnbar .layui-btn').on('click', function () { layer.open({ type: 2, title: '新增', shadeClose: true, area: ['85%', '85%'], fixed: false, maxmin: true, content: "/abc/detail", btn: ['儲存', '取消'], yes: function (index) { // 儲存表單 var body = layer.getChildFrame('body', index); var from = body.find('#detailForm'); saveForm(from, index, '', '/appbanner/save'); }, btn1: function (index) { layer.close(index); } }); }); //監聽工具條 -- 彈窗程式碼 S table.on('tool(tableFilter)', function (obj) { var data = obj.data; if (obj.event === 'show_more') { // 檢視更多 var type = data.type; layer.open({ type: 1, area: ['95%', '95%'], //寬高 btn: ["確定"], btn1: function (index) { layer.close(index); window.location.reload(); }, maxmin: false, content: '<div><table id="openProductBox" lay-filter="openProductTable"></table></div>', //先定義一個數據表格的div框 success: function () { table.render({ elem: '#openProductBox', type: 'get', url: "/abc/queryList?type=" + type, height: 'full-130' , page: true //使用分頁 , limits: [10, 20, 30] //動態設定每頁顯示資料的條數 , pageSize: 10, //預設每頁多少條 cols: [[ //表頭 {field: 'id', title: 'ID', width: '6%', align: 'center'}, {field: 'institutionName', title: '所屬機構', sort: true, align: 'center'}, {field: 'url', title: '跳轉地址', sort: true, align: 'center'}, {field: 'validDesc', title: '是否有效', width: '8%', align: 'center'}, {field: 'typeDesc', title: '標籤', width: '11%', align: 'center'}, {field: 'startTime', title: '開始時間', sort: true, align: 'center'}, {field: 'showTime', title: '展示時間', width: '11%', align: 'center'}, {field: 'modifyTime', title: '更新時間', sort: true, align: 'center'}, { title: '操作', minWidth: 135, templet: '#toolbar', sort: true, align: "center" } ]] }) } }) } }); // 彈窗程式碼 E //監聽彈框內部 table 工具條 table.on('tool(openProductTable)', function (obj) { var data = obj.data; if (obj.event === 'del') { layer.confirm('真的刪除行麼', function (index) { $.ajax({ url: '/abc/deleteById', type: 'post', data: {'id': data.id}, dataType: "json", success: function (data) { layer.close(index); if (data.code == 0) { $(".layui-laypage-btn")[0].click(); layer.msg("刪除成功", {icon: 6}); } else { layer.msg("刪除失敗", {icon: 5}); } } }) }); } else if (obj.event === 'edit') { layer.open({ type: 2, id: 'editDiv', title: '編輯', shadeClose: true, area: ['90%', '90%'], fixed: false, maxmin: true, content: "/abc/detail?id=" + data.id, btn: ['儲存', '取消'], yes: function (index) { //儲存表單 var body = layer.getChildFrame('body', index); var from = body.find('#detailForm'); saveForm(from, index, data.id, '/appbanner/save') }, btn1: function (index) { layer.close(index); } }); } }); // 重置 select 框 $('#resetTab').on('click', function () { var form = layui.form; $("#selectKey").val(""); $("#selectKey1").val(""); form.render(); }); });
5. 後端程式碼（隱私起見，內部包 已刪除，介面字首已改）：
package com.abc.controller; import org.apache.commons.lang.StringUtils; import org.springframework.beans.BeanUtils; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import javax.annotation.Resource; import javax.servlet.http.HttpServletRequest; import java.util.ArrayList; import java.util.Comparator; import java.util.List; @Controller @RequestMapping("/abc") public class AppBannerController { @Resource private AppBannerService appBannerService; /** * 根據條件分頁查詢 * * @param query * @return */ @RequestMapping(value = "/queryList") @ResponseBody public WebResult queryList(AppBannerQuery query) { WebResult webResult = new WebResult(); PageInfo<AppBannerSo> pageInfo = appBannerService.queryPageInfo(query); List<AppBannerVo> vos = new ArrayList<>(); for (AppBannerSo so : pageInfo.getList()) { AppBannerVo vo = new AppBannerVo(); BeanUtils.copyProperties(so, vo); vo.setStartTime(DateUtils.format(so.getStartTime())); vo.setEndTime(DateUtils.format(so.getEndTime())); vo.setModifyTime(DateUtils.format(so.getModifyTime())); vo.setTypeDesc(BannerTypeEnum.getDescByKey(so.getType())); vo.setValidDesc(ValidEnum.getDescByKey(so.getValid())); vo.setPixel(BannerTypeEnum.getPixelByKey(so.getType())); vo.setShowLogoDesc(ShowLogoEnum.getDescByKey(so.getShowLogo())); vos.add(vo); } // 按 id 正序 vos.sort(Comparator.comparingLong(AppBannerVo::getId)); webResult.setCode(WebResultCodeEnum.SUCCEED.getKey()); webResult.setCount(pageInfo.getTotal()); webResult.setData(vos); return webResult; } /** * 根據條件分頁查詢 - 單型別展示 * * @param query * @return */ @RequestMapping(value = "/queryListSingle") @ResponseBody public WebResult queryListSingle(AppBannerQuery query) { WebResult webResult = new WebResult(); PageInfo<AppBannerSo> pageInfo = appBannerService.queryListSingle(query); List<AppBannerVo> vos = new ArrayList<>(); for (AppBannerSo so : pageInfo.getList()) { AppBannerVo vo = new AppBannerVo(); BeanUtils.copyProperties(so, vo); vo.setStartTime(DateUtils.format(so.getStartTime())); vo.setEndTime(DateUtils.format(so.getEndTime())); vo.setModifyTime(DateUtils.format(so.getModifyTime())); vo.setTypeDesc(BannerTypeEnum.getDescByKey(so.getType())); vo.setValidDesc(ValidEnum.getDescByKey(so.getValid())); vo.setPixel(BannerTypeEnum.getPixelByKey(so.getType())); vo.setShowLogoDesc(ShowLogoEnum.getDescByKey(so.getShowLogo())); vos.add(vo); } webResult.setCode(WebResultCodeEnum.SUCCEED.getKey()); webResult.setCount(pageInfo.getTotal()); webResult.setData(vos); return webResult; } }