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