bootstrap · TUNA-daily

## bootstrap-table ### 1.1 test.html ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>bootStrap-test</title>  <link href="../static/css/bootstrap.min.css" rel="stylesheet">  <link href="../static/css/bootstrap-table.min.css" rel="stylesheet"> <script src="../static/js/jquery-3.3.1.js"></script> <script src="../static/js/bootstrap.min.js"></script> <script src="../static/js/bootstrap-table.min.js"></script> <script src="../static/js/bootstrap-table-zh-CN.js"></script> </head> <body>  <table id="FeedbackTable"/>  <script src="../static/js/bootstrap-table-object.js"></script> <script src="../static/js/feedback.js"></script> </body> </html> ~~~ 頁面做了三件事 1. 引入相關js和css 引入bootstrap-table樣式 BootstrapTable基于Bootstrap，Bootstrap基于jquery，所以需要引入jquery后再引入bootstrap。引入中文語言包 2. 聲明一個表格（一定要指明id，后面根據這個id將數據和table標簽關聯） ~~~ <table id="FeedbackTable"/> ~~~ 4. 使用js進行數據的獲取和表格數據填充 ~~~ <script src="../static/js/bootstrap-table-object.js"></script> <script src="../static/js/feedback.js"></script> ~~~ ### 1.2 bootstrap-table-object.js 封裝始化 BootStrap Table ，傳入tableID，獲取數據的url，初始化的表頭，http請求方法。使用`$("#table").bootstrapTable`去獲取數據，填充表格 ~~~ (function () { var BSTable = function (bstableId, url, columns,method) { this.btInstance = null; //jquery和BootStrapTable綁定的對象 this.bstableId = bstableId; this.url = url; this.method = method; this.paginationType = "server"; //默認分頁方式是服務器分頁,可選項"client" this.toolbarId = bstableId + "Toolbar"; this.columns = columns; this.height = 665; //默認表格高度665 this.data = {}; this.queryParams = {}; // 向后臺傳遞的自定義參數 this.pagination = true; //是否顯示分頁 this.showRefresh = true; // ***示刷新按鈕*** this.showColumns = true; // ***顯示選擇列按鈕*** }; BSTable.prototype = { /** * 初始化bootstrap table */ init: function () { var tableId = this.bstableId; this.btInstance = $('#' + tableId).bootstrapTable({ contentType: "application/x-www-form-urlencoded", url: this.url, //請求地址 method: this.method, //ajax方式,post還是get ajaxOptions: { //ajax請求的附帶參數 data: this.data }, toolbar: "#" + this.toolbarId,//頂部工具條 striped: true, //是否顯示行間隔色 cache: false, //是否使用緩存,默認為true pagination: this.pagination, //是否顯示分頁（*） sortable: true, //是否啟用排序 sortOrder: "desc", //排序方式 pageNumber: 1, //初始化加載第一頁，默認第一頁 pageSize: 14, //每頁的記錄行數（*） pageList: [14, 50, 100], //可供選擇的每頁的行數（*） queryParamsType: 'limit', //默認值為 'limit' ,在默認情況下傳給服務端的參數為：offset,limit,sort queryParams: function (param) { return $.extend(this.queryParams, param); }, // 向后臺傳遞的自定義參數 sidePagination: this.paginationType, //分頁方式：client客戶端分頁，server服務端分頁（*） search: false, //是否顯示表格搜索，此搜索是客戶端搜索，不會進服務端 strictSearch: true, //設置為 true啟用全匹配搜索，否則為模糊搜索 showColumns: this.showColumns, //是否顯示所有的列 showRefresh: this.showRefresh, //是否顯示刷新按鈕 minimumCountColumns: 2, //最少允許的列數 clickToSelect: true, //是否啟用點擊選中行 searchOnEnterKey: true, //設置為 true時，按回車觸發搜索方法，否則自動觸發搜索方法 columns: this.columns, //列數組 //height: this.height, icons: { refresh: 'glyphicon-repeat', toggle: 'glyphicon-list-alt', columns: 'glyphicon-list' }, iconSize: 'outline' }); return this; }, /** * 向后臺傳遞的自定義參數 * @param param */ setQueryParams: function (param) { this.queryParams = param; }, /** * 是否顯示刷新按鈕 * @param param */ setShowRefresh: function (param) { this.showRefresh = param; }, /** * 是否顯示刷新按鈕 * @param param */ setShowColumns: function (param) { this.showColumns = param; }, /** * 設置分頁方式：server 或者 client */ setPaginationType: function (type) { this.paginationType = type; }, /** * 設置是否顯示分頁 */ setPagination: function (param) { this.pagination = param; }, /** * 設置ajax post請求時候附帶的參數 */ set: function (key, value) { if (typeof key == "object") { for (var i in key) { if (typeof i == "function") continue; this.data[i] = key[i]; } } else { this.data[key] = (typeof value == "undefined") ? $("#" + key).val() : value; } return this; }, /** * 設置ajax post請求時候附帶的參數 */ setData: function (data) { this.data = data; return this; }, /** * 清空ajax post請求參數 */ clear: function () { this.data = {}; return this; }, /** * 刷新 bootstrap 表格 * Refresh the remote server data, * you can set {silent: true} to refresh the data silently, * and set {url: newUrl} to change the url. * To supply query params specific to this request, set {query: {foo: 'bar'}} */ refresh: function (parms) { if (typeof parms != "undefined") { this.btInstance.bootstrapTable('refresh', parms); } else { this.btInstance.bootstrapTable('refresh'); } } }; window.BSTable = BSTable; }()); ~~~ 1. 首先這是一個匿名函數，在導入這個js文件時會被立即的執行(最后邊有一個括號) ~~~ (function () { var BSTable = function (bstableId, url, columns,method) { ....... }()); ~~~ 2. 這個匿名函數在執行的最后，將可以初始化table的BSTable放入了window對象當中，使得我們可以在其他js中使用這個BSTable ### 1.3 調用上邊的工具類 ~~~ /** * 意見反饋管理初始化 */ var Feedback = { id: "FeedbackTable", //表格id，對應<table id="FeedbackTable"/> seItem: null, //選中的條目 table: null, layerIndex: -1 }; /** * 初始化表格的列 */ Feedback.initColumn = function () { return [ {field: 'selectItem', radio: true}, {title: 'id', field: 'id', visible: false, align: 'center', valign: 'middle'}, {title:'稱呼', field:'roleName', align: 'center', valign: 'middle', sortable: true}, {title:'角色編號', field:'roleId', align: 'center', valign: 'middle', sortable: true}, ]; }; /** * 檢查是否選中 */ Feedback.check = function () { var selected = $('#' + this.id).bootstrapTable('getSelections'); if(selected.length == 0){ return false; }else{ Feedback.seItem = selected[0]; return true; } }; $(function () { var defaultColunms = Feedback.initColumn(); var table = new BSTable(Feedback.id, "/role/list_all", defaultColunms); //調用工具類 table.setPaginationType("client"); Feedback.table = table.init(); //初始化表格（請求數據，填充表格） }); ~~~ ### 1.4 controller ~~~ @Controller @RequestMapping("/role") public class RloleController { @Resource RoleService roleService; @RequestMapping("list_all") @ResponseBody public List<SysRole> getAll(){ return roleService.getAll(); } @RequestMapping("test") public String test(){ return "test"; } } ~~~ ![](https://box.kancloud.cn/1454080086f0a1c7e6f6ff29dfe2f399_1912x360.png) #### 刷新圖標不能正常顯示 ![](https://box.kancloud.cn/0744ae3b0914f5c454b01e69e0f134f3_530x458.png) fonts和css在同一級目錄下新版版本這樣引用fonts（跳了兩層目錄，跳出了static目錄） ![](https://box.kancloud.cn/2b50efd0cb759fc18f3a81f95c223745_817x37.png) 所以請求fonts是這樣的 http://127.0.0.1:8888/fonts/glyphicons-halflings-regular.woff2 因為font在static目錄下，所以請求肯定失敗解決辦法，換bootstrap.min.css（跳一層目錄） ![](https://box.kancloud.cn/9adc09dd0d30df3ad1dee97b81e90bdd_605x66.png) 正常顯示 ![](https://box.kancloud.cn/4dc670880a6bdd0c9d6722a8511f69e9_1910x231.png)