BootStrap Table使用记录

一、官方文档手册

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;
}