初始化
方案一、从零使用Bootstrap Table, 利用node.js下载依赖
Bootstrap
npm install bootstrap
Bootstrap Table
npm install bootstrap-table
jquery.js
npm install jquery
Font Awesome 字体图标
npm install font-awesome
popper.js
npm install popper.js --save
方案二、使用npm install安装依赖
package.json
{
"name": "bootstrap-table-example-study",
"version": "1.0.0",
"description": "Bootstrap Table 学习笔记+示例演示",
"main": "index.html",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"Bootstrap",
"Table"
],
"author": "lizhun",
"license": "ISC",
"dependencies": {
"bootstrap": "^4.4.1",
"bootstrap-table": "^1.15.5",
"font-awesome": "^4.7.0",
"jquery": "^3.4.1",
"popper.js": "^1.16.0"
}
}
相关材料
自定义全局配置文件
./js/bootstrap-table-custom.js
/**
* @author 飘逸
* @email lzhuany@163.com
* @date 2019/12/31.
* @description 全局配置
*/
(function ($) {
'use strict';
$.fn.bootstrapTable.custom = {
// 请求相关
method: 'GET', //请求方式(*)
contentType : "application/x-www-form-urlencoded",
responseHandler: function(r) {
return {
total: r.page.total,
rows: r.data
};
},
cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
// 排序相关
sortable: true, // 是否启用排序
sortOrder: "asc", // 初始化列排序方式
sortName: 'id', // 初始化排序列
// rememberOrder: false, // ??
// 分页相关
pagination: true, //是否显示分页(*)
sidePagination: "client", //分页方式:client客户端分页,server服务端分页(*)
pageNumber: 1, //初始化加载第一页,默认第一页,并记录
pageSize: 15, //每页的记录行数(*)
pageList: [10, 25, 50, 100], //可供选择的每页的行数(*)
// showExtendedPagination: false, // ??
// 显示相关
search: true, // 是否显示表格搜索
strictSearch: false, // 设置为 true启用全匹配搜索,否则为模糊搜索。
showRefresh: true, // 是否显示刷新按钮
showColumns: true, // 是否显示所有的列(选择显示的列)
showToggle: true, // 是否显示详细视图和列表视图的切换按钮
cardView: false, // 是否显示详细视图
detailView: false, // 是否显示父子表
showFullscreen: true, // 是否显示全屏按钮。
minimumCountColumns: 2, // 最少允许的列数
showButtonText: false, // 是否显示按钮文字
striped: true, //是否隔行变色显示
toolbar: '#toolbar', //工具按钮用哪个容器
icons: {
paginationSwitchDown: 'fa-caret-square-down',
paginationSwitchUp: 'fa-caret-square-up',
refresh: 'fa-refresh', // 默认fa-sync图标不存在
toggleOff: 'fa-toggle-off',
toggleOn: 'fa-toggle-on',
columns: 'fa-th-list',
detailOpen: 'fa-plus',
detailClose: 'fa-minus',
fullscreen: 'fa-arrows-alt',
search: 'fa-search',
clearSearch: 'fa-trash'
},
buttonsPrefix: 'btn btn-outline',
buttonClass: 'primary',
// 选择相关
singleSelect: false, // 设置 true 将禁止多选
clickToSelect: true, // 是否启用点击选中行
// ignoreClickToSelectOn: // 忽略点击选中
uniqueId: "id", // 每一行的唯一标识,一般为主键列
idField: 'id', // 指定主键列
selectItemName: 'id', // radio 或者 checkbox 的字段 name 名。
checkboxHeader: true, // 设置 false 将在列头隐藏全选复选框。
multipleSelectRow: true, // 选择行,支持 ctrl+click、 shift+click
// 其他
//height: 500, //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
};
$.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.custom);
$.fn.bootstrapTable.custom_column = {
sortable: false, //是否启用排序
align: 'center',
valign: 'middle',
formatter: function (value, row, index) {
var that = this;
var type = that.type;
if (type) {
switch(type) {
case 'no':
// 序号
return index + 1;
break;
case 'isEnable':
// 状态
var type_0 = that.type_0 ? that.type_0 : '冻结';
var type_1 = that.type_1 ? that.type_1 : '正常';
if (value == '0') {
return '<span class="label label-danger">'+ type_0 +'</span>';
} else if (value == '1') {
return '<span class="label label-primary">'+ type_1 +'</span>';
}
break;
default:
break;
}
} else {
return value;
}
}
};
$.extend($.fn.bootstrapTable.columnDefaults, $.fn.bootstrapTable.custom_column);
})(jQuery);
创建Bootstrap模板文件
./bootstrap-table-template.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Hello, Bootstrap Table!</title>
<link rel="stylesheet" type="text/css" href="./node_modules/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="./node_modules/bootstrap-table/dist/bootstrap-table.min.css">
<link rel="stylesheet" type="text/css" href="./node_modules/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content">
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-lg-12">
<div class="ibox">
<div class="ibox-title">
<h5>Bootstrap Table</h5>
</div>
<div class="ibox-content">
<!-- table内容 -->
<table id="table"></table>
</div>
</div>
</div>
</div>
</div>
<div class="footer fixed_full text-center">
<div>
<strong>Copyright</strong> 飘逸 © 2019-2020
</div>
</div>
</div>
<script type="text/javascript" src="./node_modules/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="./node_modules/popper.js/dist/umd/popper.js"></script>
<script type="text/javascript" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="./node_modules/bootstrap-table/dist/bootstrap-table.min.js"></script>
<script type="text/javascript" src="./node_modules/bootstrap-table/dist/locale/bootstrap-table-zh-CN.js"></script>
<!-- 自定义js内容 -->
<script type="text/javascript" src="./js/bootstrap-table-custom.js"></script>
<script>
$('#table').bootstrapTable({});
</script>
</body>
</html>
知识展示
增加全局配置文件*./js/bootstrap-table-custom.js* (本人自定义的,仅供参考)
/**
* Created by think on 2019/12/31.
* 全局配置
*/
(function ($) {
'use strict';
$.fn.bootstrapTable.custom = {
method: 'GET', //请求方式(*)
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
pagination: true, //是否显示分页(*)
sortable: true, //是否启用排序
sortOrder: "asc", //排序方式
sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*)
pageNumber: 1, //初始化加载第一页,默认第一页,并记录
pageSize: 5, //每页的记录行数(*)
pageList: [10, 25, 50, 100], //可供选择的每页的行数(*)
search: false, //是否显示表格搜索
strictSearch: true,
showColumns: true, //是否显示所有的列(选择显示的列)
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
//height: 500, //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
uniqueId: "ID", //每一行的唯一标识,一般为主键列
showToggle: true, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
contentType : "application/x-www-form-urlencoded",
responseHandler: function(r) {
return {
total: r.page.total,
rows: r.data
};
}
};
$.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.custom);
$.fn.bootstrapTable.custom_column = {
sortable: false, //是否启用排序
align: 'center',
valign: 'middle',
formatter: function (value, row, index) {
var that = this;
var type = that.type;
if (type) {
switch(type) {
case 'no':
// 序号
return index + 1;
break;
case 'isEnable':
// 状态
var type_0 = that.type_0 ? that.type_0 : '冻结';
var type_1 = that.type_1 ? that.type_1 : '正常';
if (value == '0') {
return '<span class="label label-danger">'+ type_0 +'</span>';
} else if (value == '1') {
return '<span class="label label-primary">'+ type_1 +'</span>';
}
break;
default:
break;
}
} else {
return value;
}
}
};
$.extend($.fn.bootstrapTable.columnDefaults, $.fn.bootstrapTable.custom_column);
})(jQuery);
- 全部可自定义配置项(摘自源码、具体配置内容请到源码进行查询查找)
$.fn.bootstrapTable.Constructor = BootstrapTable;
$.fn.bootstrapTable.theme = Constants.THEME;
$.fn.bootstrapTable.VERSION = Constants.VERSION;
$.fn.bootstrapTable.defaults = BootstrapTable.DEFAULTS;
$.fn.bootstrapTable.columnDefaults = BootstrapTable.COLUMN_DEFAULTS;
$.fn.bootstrapTable.constants = BootstrapTable.CONSTANTS;
$.fn.bootstrapTable.events = BootstrapTable.EVENTS;
$.fn.bootstrapTable.locales = BootstrapTable.LOCALES;
$.fn.bootstrapTable.methods = BootstrapTable.METHODS;
$.fn.bootstrapTable.utils = Utils; // BOOTSTRAP TABLE INIT
更多学习请参考Github仓库 bootstrap-table-example-study
码云仓库 bootstrap-table-example-study