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