Bootstrap表格插件bootstrap-table配置与应用小结
- 1. 测试环境
win7
JQuery-3.2.1.min.js
下载地址：
https://gitee.com/ishouke/front_end_plugin/blob/master/jquery-3.2.1.min.js
Bootstrap-3.3.7-dist
下载地址：
https://gitee.com/ishouke/front_end_plugin/blob/master/bootstrap-3.3.7.zip
bootstrap-table-develop-v1.12.1.zip
下载地址：
https://github.com/wenzhixin/bootstrap-table
https://gitee.com/ishouke/front_end_plugin/blob/master/bootstrap-table-develop-v1.12.1.zip
- 2. 配置与应用
效果展示
HTML代码片段
head设置
html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
{% load staticfiles %}
<script type="text/javascript" src="{% static 'website/jquery-3.2.1.min.js' %}" defer>script>
<link rel="stylesheet" type="text/css" href="{% static 'website/bootstrap-3.3.7-dist/css/bootstrap.min.css' %}" />
<script type="text/javascript" src="{% static 'website/bootstrap-3.3.7-dist/js/bootstrap.min.js' %}" defer>script>
<link rel="stylesheet" type="text/css" href="{% static 'website/bootstrap-table-1.12.1-dist/bootstrap-table.min.css' %}" />
<script type="text/javascript" src="{% static 'website/bootstrap-table-1.12.1-dist/bootstrap-table.min.js' %}" defer>script>
<script type="text/javascript" src="{% static 'website/bootstrap-table-1.12.1-dist/locale/bootstrap-table-zh-CN.min.js' %}" defer>script>
……略
head>
table及toolbar工具条
新增
修改
删除
角色名称
开始时间
结束时间
查询
JS代码片段
数据表初始化配置
/**
* 获取角色表数据
*/
function loadTableData () {
$('#' + roleTableID).bootstrapTable({
url: roleTableDataURL, // 服务器数据的加载地址。
method:'get', // 服务器数据的请求方式 'get' 或 'post'。
pagination:true,// 在表格底部显示分页信息(显示第 x 到第 x 条记录，总共 x 条记录)，翻页条 // 注意：数据页页数超过1页会才展示翻页条
paginationVAlign:'bottom', // 指定分页条在垂直方向的位置。'top'，'bottom' 或 'both'。
sidePagination:'server', // 设置在哪里进行分页，可选值为 'client' 或者 'server'。注意：设置 'server'时，必须设置服务器数据地址（url）或者重写ajax方法。
responseHandler:responseHandler, // 加载服务器数据之前的处理程序，可以用来格式化数据。
pageSize:10, // 如果启用分页，设置初始化界面时，默认的每页显示数据条数
pageList:[10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 'All'], // 如果设置了分页，设置可供选择的页面记录数。设置为 All 或者 Unlimited，则显示所有记录
smartDisplay:false, // 设置为 true 是程序自动判断显示分页信息和 card 视图。这会导致自定义的 pageList不起作用
silentSort:true, // 设置为true将在点击分页按钮时，自动记住排序项。仅在 sidePagination设置为 server时生效
showColumns:true, // 展示内容列下拉框，方便设置展示那些列
showRefresh:true, // 显示刷新按钮
idField:'id', // 指定主键列
//dataField: "data", //返回的json数组记录(表格数据)的key.默认是"rows", 数据格式： {"total": 0, "rows": []}
checkboxHeader:true, // 如果设置 false，将在列头隐藏全选复选框，反之则显示，设置为ture时，必须设置singleSelect=false 才有效
clickToSelect:true, // 如果设置 true，则在点击行时，自动选中 rediobox 、 checkbox。
singleSelect:false, //如果设置为true - 禁止多选，否则不禁止多选
striped:true, // 设置为 true 会有隔行变色效果
toolbar:'#toolbar', // 一个jQuery 选择器，形如#toolbar, .toolbar，指明自定义的 toolbar
toolbarAlign:'left', // 指定 toolbar 水平方向的位置。'left' 或 'right'。
columns: [{
field: 'checkbox',
align: 'center', // 设置数据对齐方式可选项： 'left', 'right', 'center'
halign: 'center', // 设置表头标题对齐方式可选项： 'left', 'right', 'center'
valign: 'middle', // 设置单元格数据的垂直方向上的对齐方式，有：top（靠上）、middle（居中）、bottom（靠下）针对checkbox似乎不起作用
checkbox:true, // 显示为复选框
width: '1%',// 设置列宽度
},{
field: 'id',
title: '角色ID',
align: 'center',
halign: 'center',
valign:'middle',
sortable:true, // 允许排序列
order:'desc', // 默认排序方式升序-asc 降序-desc
width: '2%',
}, {
field: 'name',
title: '角色名称',
align: 'center',
valign: 'middle',
halign: 'center',
width: '14%'
}, {
field: 'remark',
title: '角色描述',
valign: 'middle',
align: 'center',
halign: 'center',
width: '20%'
}, {
field: 'is_enable',
title: '是否启用',
valign: 'middle',
align: 'center',
halign: 'center',
width:'4%'
}, {
field: 'creater',
title: '创建人',
valign: 'middle',
align: 'center',
halign: 'center',
width:'7%'
}, {
field: 'create_time',
title: '创建时间',
valign: 'middle',
align: 'center',
halign: 'center',
width:'11%'
}, {
field: 'modifier',
title: '修改人',
valign: 'middle',
align: 'center',
halign: 'center',
width:'7%'
},{
field: 'modify_time',
title: '修改时间',
valign: 'middle',
align: 'center',
halign: 'center',
width:'11%'
},{
field:'operate',
title:'操作',
algin:'left',
halgin:'center',
width:'23%',
events: operateEvents,
formatter:operateFormatter
} ]
});
}
// 加载表格数据
loadTableData();
加载服务器数据之前的数据处理(responseHandler)
/**
* 加载服务器数据之前的处理程序，可以用来格式化数据。
* 参数：result为从服务器请求到的数据
* @param result
*/
function responseHandler(result){
if (result.success == 'false') {
alert('获取角色信息失败');
return;
}
// 返回数据，渲染表格
return {
total: result.data.total, //总页数, key名称固定为"total"
rows: result.data.rows //行数据，key名称必须和bootstrapTable函数中dataField的值保持一致，默认为rows.
};
};
