bootstrapTable

来源：互联网发布：电脑动画制作软件编辑：程序博客网时间：2024/04/30 06:25

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

0 0