首先简单介绍,bootstrapTable是基于bootstrap样式做的一款表格,方便我们组建表格使用。这里我们就不解释bootstrap怎么引入,使用问题。
1. 引入js,css
<link href="../bootstrap/css/bootstrap.css" type="text/css" rel="stylesheet">
<link href="css/playersPrivilegeName.css" type="text/css" rel="stylesheet">
<link href="css/bootstrap-table.min.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="../jquery/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="../bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="js/bootstrap-table.min.js"></script>
<script type="text/javascript" src="js/bootstrap-table-zh-CN.min.js"></script>
注意位置,引入顺序不对也会引起问题
2. html中编写表格
<table id="table"></table>
3.js中根据dom对象去生成
$('#table').bootstrapTable({
url: "/users",
method: "get",
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*)
toggle: "table",
pagination: true,//是否分页
pageSize: 10,//单页记录数
pageList: [10, 20, 30],//可选择单页记录数
smartDisplay: false,
search: false, //是否显示表格搜索
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
toolbar: "#toolbar",
queryParams: function (params) {
return {
ct: params.offset / params.limit + 1, //页码
size: params.limit, //页面大小
};
},
responseHandler: function (res) {
//这里注意,这里是后台接口返回的数据,需要把返回的数据分别对接rows和total 用于分页和展示
return {
"rows": res.records,
"total": res.total
};
},
columns: [{
field: 'content',
align: 'center',
title: '内容',
formatter:contentFormatter
},{
field: 'id',
title: '操作',
formatter: operationTable
}
]
});
/**
* 操作列
* @param value 传入的数据
* @param row 当前行
* @param index 当前列数
* @returns {string} 返回渲染数据
*/
function operationTable(value, row, index) {
return "<button class=\"btn btn-warning\" onclick=\"update('" + value + "')\"> 修改 </button>" +
" " +
"<button class=\"btn btn-danger\" onclick=\"delete('" + value + "')\"> 删除 </button>";
}
/**
* 表格中字段内容过长时采用缩略方式
*/
function contentFormatter(value, row, index) {
var content = value;
if(value && value.length >10){
content = value.substr(0,10)+"..."
}
return "<span data-toggle='tooltip' data-html='true' data-placement=\"top\" title=\""+value+"\">"+content+"</span>" ;
}
到这,页面基本就可以显示出我们需要的样子了
4添加toolbar 添加工具栏按钮
我们想实现上列表格中积分奖励的下拉和添加按钮
注意上面js中toolbar #toolbar 这里指的是某个id
<div id="toolbar">
<form class="form-inline">
<button type="button" class="btn btn-primary glyphicon glyphicon-plus" onclick="insertAwardMonth()">添加</button>
<select class="form-control" id="awardTypeSearch" onchange="awardConfigChange()">
<option value="1" selected>积分奖励</option>
<option value="2">数量奖励</option>
</select>
</form>
</div>
可以通过onchange来实现下拉后动态的刷新表格
表格刷新: $(’#table’).bootstrapTable(‘refresh’);
注意坑
bootstrap Table 动态更改后tooltip不会动态的重新生成需要手动去重新绑定
所以我们需要在表格渲染完成后重新执行tooltip函数
更改请看官网api
/**
* 刷新tooltip用于支持动态dom
*/
$('#table').on('post-body.bs.table', function () {
$("[data-toggle='tooltip']").tooltip();
});
版权声明:本文为qq_22327273原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。