bootstrapTable

bootstrap样式比较好看，现项目中使用，做一下记录，备忘。

引入文件：

<link rel="stylesheet" type="text/css" href="/js/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="/js/bootstrap/css/bootstrap-table.min.css" />
<script type="text/javascript" src="/js/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/js/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/bootstrap/js/bootstrap-table.min.js"></script>
<script type="text/javascript" src="/js/bootstrap/js/bootstrap-table-zh-CN.js"></script>

html代码

<table id="gravidaTable">
    <thead>
        <tr>
            <th data-field="id" data-checkbox="true">ID</th>
            <th data-field="name">姓名</th>
            <th data-field="phoneNo">手机号</th>
            <th data-field="dueDate">预产期</th>
            <th data-field="assess" data-formatter="assessColumn">风险等级</th>
            <th data-field="infection" data-formatter="infectionColumn">有无传染病</th>
        </tr>
    </thead>
</table>

JS代码

$('#gravidaTable').bootstrapTable({
		contentType: "application/x-www-form-urlencoded",
		method: 'post',
	    dataType: "json",
		url: "/gravida/list",
		striped: true,
		pagination: true,
		singleSelect: false,
		clickToSelect:true,
		showColumns: false,
		search: false, 
		silent: true,
		pageSize: 10,
		pageNumber:1,
		sidePagination: "server",
		queryParamsType:"limit",
		pageList:[10, 25, 50, 100],
		queryParams: gravidaTableParams,
		onDblClickRow:onDblClickRow
	});
	
	function onDblClickRow(row)
	{
		$('#myModal').modal('show')
	}

//表格查询条件
function gravidaTableParams(params) {
     return {
        pageSize: params.limit,
        pageNumber: params.pageNumber
     };
}

bootstrapTable自定义条件查询。

//风险颜色点击
function assessColor()
{
	var color=this.title;
	$('#gravidaTable').bootstrapTable('refresh',{
		query:{
			'assess':color
		}
	});
}