BootStrapTable获取数据和点击事件

项目中遇到，记录一下。

获取数据

var myTable = $('#assetsBank_table').bootstrapTable({
        url : url, // AJAX获取表格数据的url
		striped : true, // 是否显示行间隔色(斑马线)
		method:'post',//post请求需要配置contentType，默认是get请求不需要配置
		pagination : true, // 是否显示分页（*）
		sidePagination : "client", // 分页方式：client客户端分页，server服务端分页（*）
		paginationLoop : true, // 当前页是边界时是否可以继续按
		queryParams : function(params) { // 请求服务器数据时发送的参数，可以在这里添加额外的查询参数，返回false则终止请求
			return {
				id: assetTypeId//传给接口的参数
			}
		},// 传递参数（*）
		pageNumber : 1, // 初始化加载第一页，默认第一页
		pageSize : 3, // 每页的记录行数（*）
		pageList : [ 10, 25, 50, 100, 'all' ], // 可供选择的每页的行数（*）
		contentType : "application/x-www-form-urlencoded",// 一种编码。在post请求的时候需要用到。这里用的get请求，注释掉这句话也能拿到数据
		search : true, // 是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
		strictSearch : false, // 是否全局匹配,false模糊匹配
		showColumns : true, // 是否显示选择展示那一列的哪个按钮
		toolbar : '#toolbar',
		showRefresh : false, // 是否显示刷新按钮
		minimumCountColumns : 2, // 最少允许的列数
		clickToSelect : true, // 是否启用点击选中行
		height: 500,
		// //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
		uniqueId : "atrrId", // 每一行的唯一标识，一般为主键列
		showToggle : false, // 是否显示详细视图和列表视图的切换按钮
		cardView : false, // 是否显示详细视图
		detailView : false, // 是否显示父子表
		cache : true, // 设置为 false 禁用 AJAX
		sortable : false, // 是否启用排序
		sortOrder : "asc", // 排序方式
		sortName : 'atrrId', // 要排序的字段
        columns : [
         {
            checkbox: true,//复选框
            singleSelect:true//这个好像是可不可以获取选中数据，如果需要获取选中行数据的话这个要设置成true
         },{
			field : 'assetsId', // 返回json数据中的name
			title : 'id',  // 表格表头显示文字
			align : 'center',  // 左右居中
			valign : 'middle',  // 上下居中
			visible : false //是否显示，true为显示
		 }, {
			field : 'assetsName',
			title : '资产名称',
			align : 'center',
			valign : 'middle'
		 }, {
			field : 'ip',
			title : 'IP地址',
			align : 'center',
			valign : 'middle'
		 }, {
			field : 'mac',
			title : 'MAC地址',
			align : 'center',
			valign : 'middle'
		 }, {
			field : 'inServiceTime',
			title : '过保时间',
			align : 'center',
			valign : 'middle',
			formatter:function(value){//过滤，value是返回的对象中这个属性的值
				if(value == null){
					return '已过保'
				}
			}
		 },{//每条数据后加操作按钮
			title: '操作',
			width: '80px',
			align : 'center',
			events: operateEvents,//给按钮注册事件
	        formatter: addFunctionAlty//表格中增加按钮  
		 }],
         onLoadSuccess: function () {
         	//加载成功执行
         },
         onLoadError: function () {
             //加载失败执行
         },
         onClickRow: function (row, $element) {//bootstrapTable行点击事件
        	//点击某行时执行 
         },
    });

不发送请求按指定的数据初始化表格

$("myTable").bootstrapTable('load',data); 

每条数据后的按钮或标签

return[
这里可以根据需求写a标签或者按钮都可以，需要单引号引起来，需要多个按钮拼接多个标签就可以
]

//每条指标数据后面的修改按钮
function addFunctionAlty(value, row, index) {
	return [
		'<a id="update_btn" href="#" class="glyphicon glyphicon-edit" title="修改"></a>',
	].join('');
}

window.operateEvents={
	"click #update_btn":function (e, value, row, index) {
		//这里写需要执行的代码
		//删除
		var uid = $(this).parent().parent().attr("data-uniqueid");
	    $('#myTable').bootstrapTable('removeByUniqueId',uid);
	    //删除之后刷新一下表格
	    $("#myTable").bootstrapTable('refresh');
	}
}

上面两个方法必须写在初始化 table之前， table中columns ：最后一项需要配置events 和 formatter

{//每条数据后加操作按钮
	title: '操作', // 表格表头显示文字
	width: '80px',// 高度，可以不设置，会根据需要显示的内容决定高度
	align : 'center',//居中
	events: operateEvents,//给按钮注册事件
    formatter: addFunctionAlty//表格中增加按钮  
}

刷新和销毁表格

myTable.bootstrapTable();//加载 table
myTable.bootstrapTable('destroy');//销毁 table
myTable.bootstrapTable("refresh");//重新加载 table

获取复选框选中数据

必须配置 checkbox : true 和 singleSelect : true

$("#myTable").bootstrapTable('getSelections');//获取选中所有
$("#myTable").bootstrapTable('getSelections')[0];//获取选中的一条，因为返回获取到的数据的是一个数组
$('#myTable').bootstrapTable('getData');//获取表格中所有数据

在指定位置更新数据

index 和 row 可以在点击事件中获取

$('#myTable').bootstrapTable('updateRow', {index: rowIndex, row: rowData});