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; }
效果圖: