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