bootstrap table 實現父子表
阿新 • • 發佈：2018-12-26
在進行專案時，用到了bootstrap table的父子表，現在記錄下使用過程中遇到的坑。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>BootStrap Table使用</title> <!-- 1、Jquery元件引用 --> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <!-- 2、bootstrap元件引用 --> <script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> <!-- 3、bootstrap table元件以及中文包的引用 --> <script src="js/bootstrap-table.js"></script> <link href="css/bootstrap-table.css" rel="stylesheet" /> <script src="js/bootstrap-table-zh-CN.js"></script> <!-- 匯出 --> <script src="js/bootstrap-table-export.min.js"></script> <script src="js/tableExport.js"></script> </head> <body> <div class="panel-body" style="padding-bottom:0px;"> <div class="panel panel-default"> <div class="panel-heading">查詢條件</div> <div class="panel-body"> <form id="formSearch" class="form-horizontal"> <div class="form-group" style="margin-top:15px"> <label class="control-label col-sm-1" for="txt_search_departmentname">部門名稱</label> <div class="col-sm-3"> <input type="text" class="form-control" id="txt_search_departmentname"> </div> <label class="control-label col-sm-1" for="txt_search_statu">狀態</label> <div class="col-sm-3"> <input type="text" class="form-control" id="txt_search_statu"> </div> <div class="col-sm-4" style="text-align:left;"> <button type="button" style="margin-left:50px" id="btn_query" class="btn btn-primary">查詢</button> </div> </div> </form> </div> </div> <div id="toolbar" class="btn-group"> <button id="btn_add" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增 </button> <button id="btn_edit" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改 </button> <button id="btn_delete" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>刪除 </button> </div> <table id="tb_departments"></table> </div> </body> <script> $(function () { //1.初始化Table var oTable = new TableInit(); oTable.Init(); //2.初始化Button的點選事件 var oButtonInit = new ButtonInit(); oButtonInit.Init(); }); var TableInit = function () { var oTableInit = new Object(); //初始化Table oTableInit.Init = function () { $('#tb_departments').bootstrapTable({ url: '/zph/getZphInfo', //請求後臺的URL（*） method: 'get', //請求方式（*） toolbar: '#toolbar', //工具按鈕用哪個容器 striped: true, //是否顯示行間隔色 cache: false, //是否使用快取，預設為true，所以一般情況下需要設定一下這個屬性（*） pagination: true, //是否顯示分頁（*） sortable: false, //是否啟用排序 sortOrder: "asc", //排序方式 //queryParams: oTableInit.queryParams,//傳遞引數（*） sidePagination: "server", //分頁方式：client客戶端分頁，server服務端分頁（*） pageNumber:1, //初始化載入第一頁，預設第一頁 pageSize: 10, //每頁的記錄行數（*） pageList: [10, 25, 50, 100], //可供選擇的每頁的行數（*） search: true, //是否顯示錶格搜尋，此搜尋是客戶端搜尋，不會進服務端，所以，個人感覺意義不大 strictSearch: true, showColumns: true, //是否顯示所有的列 showRefresh: true, //是否顯示重新整理按鈕 minimumCountColumns: 2, //最少允許的列數 clickToSelect: true, //是否啟用點選選中行 //height: 500, //行高，如果沒有設定height屬性，表格自動根據記錄條數覺得表格高度 uniqueId: "id", //每一行的唯一標識，一般為主鍵列 showToggle:true, //是否顯示詳細檢視和列表檢視的切換按鈕 cardView: false, //是否顯示詳細檢視 detailView: true, //是否顯示父子表 showExport: true, //是否顯示匯出 exportDataType: "basic", //basic', 'all', 'selected'. columns: [{ checkbox: true }, { field: 'id', title: '部門名稱' }, { field: 'title', title: '上級部門' }, { field: 'time', title: '部門級別' } ], //註冊載入子表的事件。注意下這裡的三個引數！ onExpandRow: function (index, row, $detail) { oTableInit.InitSubTable(index, row, $detail); } }); }; //初始化子表格(無線迴圈) oTableInit.InitSubTable = function (index, row, $detail) { var parentid = row.id; var cur_table = $detail.html('<table></table>').find('table'); $(cur_table).bootstrapTable({ url: '/zph/getZphInfobyid', method: 'get', contentType: 'application/json;charset=UTF-8',//這裡我就加了個utf-8 dataType: 'json', queryParams: { id: parentid }, ajaxOptions: { id: parentid }, clickToSelect: true, //height: 500, detailView: false,//父子表 uniqueId: "id", pageSize: 10, pageList: [10, 25], columns: [{ checkbox: true }, { field: 'id', title: '選單名稱' }, { field: 'title', title: '選單URL' }, { field: 'time', title: '父級選單' } ], //無線迴圈取子表，直到子表裡面沒有記錄 onExpandRow: function (index, row, $Subdetail) { oInit.InitSubTable(index, row, $Subdetail); } }); }; //得到查詢的引數 /* oTableInit.queryParams = function (params) { var temp = { //這裡的鍵的名字和控制器的變數名必須一直，這邊改動，控制器也需要改成一樣的 limit: params.limit, //頁面大小 offset: params.offset, //頁碼 departmentname: $("#txt_search_departmentname").val(), statu: $("#txt_search_statu").val() }; return temp; }; */ return oTableInit; }; var ButtonInit = function () { var oInit = new Object(); var postdata = {}; oInit.Init = function () { //初始化頁面上面的按鈕事件 }; return oInit; }; </script> </html>
在進行url後臺取值的時候，記住返回值必須得是：json陣列！json陣列！json陣列！（重要的事情說三遍！）
後臺部分程式碼：
@RequestMapping("getZphInfo") @ResponseBody public List<ZphInfo> getZphInfo(Model model) { List<ZphInfo> zphinfolist = new ArrayList<ZphInfo>(); zphinfolist = zphservice.getZphInfoList(); model.addAttribute("zphinfolist", zphinfolist); for (ZphInfo zphInfo : zphinfolist) { logger.info(zphInfo.toString()); } return zphinfolist; } @RequestMapping("getZphInfobyid") @ResponseBody public List<ZphInfo> getZphInfoById(int id) { //int zphid = Integer.parseInt(id); ZphInfo zphinfo = new ZphInfo(); if(null == zphservice.getZphInfoById(id)) { logger.info("未查詢到資訊！"); return null; } List<ZphInfo> zpList = new ArrayList<ZphInfo>(); zphinfo = zphservice.getZphInfoById(id); zpList.add(zphinfo); return zpList; }
效果圖：