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