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)