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