GIthub 开源项目地址 leave_approval_management_sys，遵循 Apache 2.0 开源协议。
注: 所有学生数据纯属虚构, 如有雷同, 纯属巧合.
JQuery BootstrapTable 插件
- JQuery BootstrapTable 插件
- 一、效果预览
- 二、使用 BootstrapTable
- Ⅰ、使用 BootstrapTable CDN
- Ⅱ、下载 BootstrapTable
- Ⅲ、本地化（设置语言）
- ①、所有语言：bootstrap-table-locale-all.min.js
- ②、简体中文：bootstrap-table-zh-CN.min.js
- 三、HTML 代码
- 四、JS 代码
- 五、怎么使用初始化参数 ？
JQuery BootstrapTable 插件
Bootstrap 中文网 -> www.bootstrap-table.com.cn
本文叙述了如何使用 JQuery 插件 BootstrapTable 创建漂亮的 HTML 表格。
一、效果预览
先看示例图，管理员端 — 学生管理表：
二、使用 BootstrapTable
首先，你得在网页的正确地方引入 BootstrapTable 的 CSS 和 JavaScript 文件
Ⅰ、使用 BootstrapTable CDN
<link rel="stylesheet"href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">
<script src="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.js"></script>
Ⅱ、下载 BootstrapTable
BootstrapTable 中文网：https://www.bootstrap-table.com.cn/doc/getting-started/download/
Github：https://github.com/wenzhixin/bootstrap-table
Ⅲ、本地化（设置语言）
额外 导入 BootstrapTable 语言包 并在初始化时设置 locale 参数。
①、所有语言：bootstrap-table-locale-all.min.js
②、简体中文：bootstrap-table-zh-CN.min.js
三、HTML 代码
HTML 代码极其简单，仅需如下一行代码，甚至还可以省略 class。
<table id="studentTable" class="col"></table>
四、JS 代码
数据源(部分):
{
"data": [
{
"class": "10",
"department": "信息与工程科学部",
"faculty": "软件与微电子学院",
"gender": "男",
"grade": "2020",
"id": 1,
"major": "集成电路设计与集成系统",
"name": "席器树",
"on": 1,
"sid": "2000000000",
"tid": "100000",
"tname": "程孝旭"
},
{
"class": "2",
"department": "理学部",
"faculty": "化学与分子工程学院",
"gender": "女",
"grade": "2020",
"id": 2,
"major": "数理基础科学",
"name": "席中婉",
"on": 2,
"sid": "2000000001",
"tid": "100000",
"tname": "程孝旭"
},
// ...
// ...
],
"length": 1000,
"msg": "查询成功",
"state": "ok"
}
通过 css 选择器初始化 id 为 studentTable 的 table 标签：
$('#studentTable').bootstrapTable({
locale: 'zh-CN', // 设置语言
toolbar: '#studentToolbar', // 自定义工具栏 (将自己写的元素移动到表格中，实例中为“删除、修改、添加”按钮)
toolbarAlign: 'left', // 工具栏对齐方式
buttonsOrder: ['paginationSwitch', 'toggle', 'fullscreen', 'refresh', 'columns'], // 菜单中按钮的顺序 (自定义工具栏右边那部分)
showPaginationSwitch: true, // 是否显示 分页开关按钮
showToggle: true, // 是否显示 切换按钮以切换表格/卡片视图
showFullscreen: true, // 是否显示 全屏按钮
showRefresh: true, // 是否显示 刷新按钮
showColumns: true, // 是否显示 列下拉列表。我们可以将 switchable选项设置false为隐藏下拉列表中项目
showButtonText: false, // 设置true 为在搜索输入后面显示搜索按钮。仅在按下按钮时才会执行搜索（例如，以防止交通或加载时间）。
showHeader: true, // 是否显示 表格标题
showFooter: false, // 是否显示 摘要页脚行
pagination: true, // 是否在表格底部显示 分页工具栏
search: true, // 是否启用 搜索功能
searchTimeOut: 300, // 设置搜索触发超时, 设置 0 为实时显示搜索结果
minimumCountColumns: 6, // 设置表格最少显示的列数
clickToSelect: true, // 设置是否在单击行时选择复选框或单选框
multipleSelectRow: true, // 设置是否启用多选行。可以使用ctrl键单击以选择一行，或使用shift键单击以选择一系列行
detailView: true, // 是否显示 切换详细视图表按钮
detailViewIcon: true, // 是否显示 显示详细信息视图列（加/减图标）
detailFormatter: function(index, row, element) {
return `${row.name} (${row.sid}) ${row.department} ${row.faculty} ${row.major} ${row.class}班`;
}, // 返回值为字符串, 用于自定义格式化详细视图的内容
sortable: true, // 是否启用全局排序功能
url: '/admin/students?query=all', // 表格数据获取源 (json)
columns: [{ // 自定义表格列 (Array -> Object)
field: 'select', // 数据源中的字段 ('select' 为特殊字段, 配合 checkbox 用于在列前显示复选按钮)
title: '复选',
checkbox: true, // 显示复选按钮
}, {
field: 'on', // 数据源中对应的字段 key
title: '序号', // 显示的标题
sortable: true, // 是否启用 排序
align: 'center', // 设置 水平对齐方式
width: 1, // 设置宽度 (设置为 1 则在显示完所有数据后, 尽可能窄的显示)
}, {
field: 'id',
title: 'id',
sortable: true,
align: 'center',
visible: false, // 默认是否显示 (可在 "列下拉列表" 中选择要显示的字段)
}, {
field: 'sid',
title: '学号',
sortable: true,
align: 'center',
}, {
field: 'name',
title: '姓名',
sortable: true,
}, {
field: 'gender',
title: '性别',
sortable: true,
}, {
field: 'tid',
title: '辅导员 ID',
sortable: true,
align: 'center',
visible: false,
}, {
field: 'tname',
title: '辅导员',
sortable: true,
}, {
field: 'department',
title: '学部',
sortable: true,
}, {
field: 'faculty',
title: '系别',
sortable: true,
}, {
field: 'major',
title: '专业',
sortable: true,
}, {
field: 'grade',
title: '年级',
sortable: true,
align: 'center',
}, {
field: 'class',
title: '班级',
sortable: true,
align: 'center',
}],
totalField: 'length', // 数据源中表示数据长度的 key
dataField: 'data', // 数据源中表示表格数据的 key
idField: 'sid', // 表格数据的 主索引 key
uniqueId: 'sid', // 表格数据的 唯一索引 key
});
五、怎么使用初始化参数 ？
所有初始化参数都可以在在 中文网文档 查到。
注：需要注意的是：①中文网中的例子在博主这无法访问，推荐直接查看 Github 示例；②中文网的数据或许不是最新的，比如中文网中 getAllSelections 方法实际并不支持，请参考 Github 示例。
以 locale 参数为例：
解释：
locale：JS 初始化使用的参数名
属性：HTML 初始化使用的属性值
类型：期望接受的参数类型
默认：若忽略该参数，默认使用的值
详情：文档对此参数的解释
例子：示例，若无法显示请参考请参考 Github 示例
若使用 JS 初始化：
$('#studentTable').bootstrapTable({
locale: 'zh-CN',
});
若直接在 HTML 标签初始化：
<table id="studentTable" class="col" data-locale="zh-CN"></table>
【如果觉得本文不错 “点赞、收藏、关注”，是对作者最大的鼓励。】
