一、官方文档手册
http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
主要包括:表格参数、列参数、事件、方法等
二、使用记录
在sz12345市政热线项目 中使用了该框架。值得记录的点如下:
1、需要导入的包:
<!-- 引入bootstrap样式 -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<!-- 引入bootstrap-table样式 -->
<link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">
<!-- jquery -->
<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- bootstrap-table.min.js -->
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
<!-- 引入中文语言包 -->
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>
2、表格高度适应屏幕剩余高度
html中:
.search{
margin:10px 0px;
padding: 0 15px;
height:48px;
}
<div class="search">其他部分:比如搜索框</div>
<table id="table_demo1" style="min-width:1500px;"></table>
//这个宽度是测试多列滚动的、不要那么长,就把这个style删掉。
js中:
$(function() {
listusert();
});
function listusert() {
$("#table_demo1").bootstrapTable('destroy');
$("#table_demo1").bootstrapTable(
{ // 对应table标签的id
undefinedText : "-", // 查找的字段没有发现时的显示内容
height : $(document).height()- $("#search").outerHeight(true), // 表格的高度充满高度
data : [],//自定义对象数组作为表格数据
locale : 'zh-CN',// 中文支持
//请求获取数据
//dataType : "json",
//method : 'post',
// url: "https://www.easy-mock.com/mock/5bb038cd4c5da84425d32073/example/testTable",
//这里定义了三列,最后一列谁复选框
columns : [ {
field : 'id', //Json数据中的字段名
title : '话务编号', //显示标题
align : 'center',
width : 100,
valign : 'middle',
}, {
field : 'name',
title : '来源',
align : 'center',
width : '100px',
valign : 'middle',
},
{checkbox:true},//复选框
]
……其他表格配置,参照手册
});
}
3、每行记录添加一个button极其点击事件(以点击更改样式为例)
先在列属性中添加一列,凡是想显示自定义的元素的,都使用formatter列属性
columns:[
……
{
title: "操作",
width : 100,
align : 'center',
valign : 'middle',
formatter: AddButton, //为每一行添加button
events:operateCookie, //点击事件
}
……
]
这里需要注意,一定把AddButton和operateCookie的函数写在
$("#table_demo1").bootstrapTable(……)所在函数的前面。
//添加按钮
function AddButton(value,row,index) {
//根据一些信息返回不同的按钮样式
var btn = '<button type="button" id="changeBtn" class=" btn btn-default" >未标记</button>';
if(某些条件){
btn = '<button type="button" id="changeBtn" class=" btn btn-danger">已标记</button>'
}
return btn;
}
//按钮点击事件:这里是实现点击更改样式
window.operateCookie= {
//这里我用的id,但也可以用class,获得具体的button对象并不根据这个ID,而是event
"click #changeBtn":function(event,value,row,index){
var obj=$(event.target); //关键,根据事件event获得该元素
var caseNo = row.id; //row是数据,获得该行记录的id字段的值
if(obj.text() === "已标记"){
obj.removeClass("btn-danger");
obj.addClass("btn-default");
obj.text("未标记");
}else{
obj.removeClass("btn-default");
obj.addClass("btn-danger");
obj.text("已标记");
}
}
}
//这里是初始化的代码
function listusert() {
$("#table_demo1").bootstrapTable('destroy');
……
}
4、开启分页(这里是服务器端分页)
表格参数配置:
pagination: true,//是否开启分页(*)
pageNumber:1,//初始化加载第一页,默认第一页
pageSize: 5,//每页的记录行数(*)
pageList: [5,10,20,30],//可供选择的每页的行数(*)
paginationPreText: "上一页",
paginationNextText: "下一页",
5、方法的使用
//添加数据
$('#btn1').click(function(e) {
$('#table_demo1').bootstrapTable('append', data);
e.preventDefault(); //阻止冒泡,即阻止点击按钮刷新
});
6、事件的使用
function listusert(){
$("#table_demo1").bootstrapTable('destroy');
$("#table_demo1").bootstrapTable({
……
columns: [],
//双击某行执行
onDblClickRow: function (row) {
location.href = "itemDetail.jsp?rowId=" + row.id;
},
//加载成功时执行
onLoadSuccess: function(){
console.info("加载成功");
},
//加载失败时执行
onLoadError: function(){
console.info("加载数据失败");
}
})
7、超出列省略,鼠标悬停显示内容
利用title属性
{
field: 'detail',
title: '详情',
align: 'center',
width: '100px', //这个宽度可能并没用,内容多长,它就多宽
valign: 'middle',
formatter:function(value, row, index) {
return "<div title="+value+" class='colStyle'>"+value+"</div>"
},
},
.colStyle {
width: 100px; //防止列属性width无效
//单行省略
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}