Bootstrap table初探

前端代碼：

<table id="subTab" class="table">   <!--data-toggle="table"-->
	<thead>
		<tr style='height: 15px;' >
			<th>方案編碼</th>
			<th>方案名稱</th>
			<th>方案描述</th>
			<th>預計工時(小時)</th>
			<th>可用</th>
		</tr>
	</thead>
</table>

JS代碼：

function initTable(id) {
	//先銷燬表格,必須先銷燬才能實現動態加載數據
	$('#subTab').bootstrapTable('destroy');
	//初始化表格
	$("#subTab").bootstrapTable({
		method: "post",  //向服務器請求數據的方式
		url:"/shfw/solution/list?id="+id, //向服務器請求數據的地址
		striped: true,  //表格顯示條紋
		pagination: false, //不啓動分頁
		pageSize: 1,  //每頁顯示的記錄數
		pageNumber:1, //當前第幾頁
		pageList: [5, 10, 15, 20, 25],  //記錄數可選列表
		striped: true, //顯示行間隔色
		search: true,  //啓用查詢
		showColumns: true,  //顯示下拉框勾選要顯示的列
		showRefresh: true,  //顯示刷新按鈕
        showToggle:true,   //顯示切換視圖模式按鈕
        sortOrder: "asc", //排序方式
		sidePagination: "server", //分頁方式：client客戶端分頁，server服務端分頁
		//設置爲undefined可以獲取pageNumber，pageSize，searchText，sortName，sortOrder
		//設置爲limit可以獲取limit, offset, search, sort, order
		queryParamsType : "undefined",
		columns: [
			{
			 title: '',
			 width: 20,
			 formatter: function (value, row, index) {
				// 顯示行號
				var options = $('#subTab').bootstrapTable('getOptions');
				return options.pageSize * (options.pageNumber - 1) + index + 1;
			 }
			},
			{
				field : 'id',
				title : '編號',
				visible: false
			},
			{
				field : 'solutionCode',
				title : '方案編碼'
			},
			{
				field : 'solutionName',
				title : '方案名稱'
			},
			{
				field : 'description',
				title : '方案描述'
			},
			{
				field : 'requireTime',
				title : '預計工時'
			},
			{
				field : 'isEnabled',
				title : '可用',
				formatter: function(value, row, index) {
					return $.table.selectDictLabel(isEnabledDatas, value);
				}
			}],
		  onLoadSuccess: function(){  //加載成功時執行
			layer.msg("加載成功");
		},
		onLoadError: function(){  //加載失敗時執行
			layer.msg("加載數據失敗", {time : 1500, icon : 2});
		}
	});
}

頁面效果圖：

要顯示行號，需要在columns節點中添加以下代碼：

{
	title: '',
	width: 20,
	formatter: function (value, row, index) {
		// 顯示行號
		var options = $('#subTab').bootstrapTable('getOptions');
		return options.pageSize * (options.pageNumber - 1) + index + 1;
	}
}