1、引入相关的css和js
<link type="text/css" href="/components/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <link type="text/css" href="/components/bootstrap-table/1.11.1/dist/bootstrap-table.min.css" rel="stylesheet" /> <script type="text/javascript" src="/components/bootstrap-table/1.11.1/dist/bootstrap-table.min.js"></script> <script type="text/javascript" src="/components/bootstrap/3.3.7/css/bootstrap.min.js"></script> <script type="text/javascript" src="/components/bootstrap-table/1.11.1/dist/bootstrap-table.min.js"></script> <script type="text/javascript" src="components/bootstrap-table/1.11.1/dist/bootstrap-table-zh-CN.js"></script>
2、写table表格并加入数据
<table id="tablewrap1" data-toggle="table" data-locale="zh-CN" data-ajax="ajaxRequest" data-icon-size="sm" data-single-select="false" data-click-to-select="true" data-side-pagination="server" data-striped="true" data-pagination="true" data-maintain-selected="true" data-detail-view="true" class="fline-show-when-ready table" > <thead> <tr> <!--<th data-field="state1" data-checkbox="true"></th>--> <th data-field="field">名称</th> <th data-field="fieldName">中文名称</th> <th data-field="identifier">标识符</th> <th data-field="affiliatedName">单位</th> <th data-field="typeName">分类</th> <th data-field="state1" data-checkbox="true"></th> </tr> </thead> </table>
data-detail-view="true" 显示前面的+号
3、js初始化
function ajaxRequest(params) { var pageSize = params.data.limit; var pageNum = params.data.offset / pageSize + 1; index = params.data.offset + 1; var sort = params.data.sort ? params.data.sort : "id"; var order = params.data.order ? params.data.order : "desc"; var datas; var dataElements; var affiliatedVal=$("#searchOrg option:selected").val() var dataStr ='&pageNum=' + pageNum + '&pageSize=' + pageSize; var count; $.ajax({ type : 'get', url : 'url地址', dataType : 'json', async : false, data : {'pageNum':pageNum, 'pageSize':pageSize, }, success : function(data) { var count = data.count, dataElements = data.data; params.success({ total : count, rows : dataElements }); } }); }
4、加入子表格
$("#tablewrap1").on('expand-row.bs.table', function (e, index, row, $detail) { InitSubTable(index, row, $detail); }) /* expand-row.bs.table 里面的三个主要的参数 index:父表当前行的行索引。 row:父表当前行的Json数据对象。 $detail:当前行下面创建的新行里面的td对象。 第三个参数尤其重要,因为生成的子表的table在装载在$detail对象里面的。bootstrap table为我们生成了$detail这个对象,然后我们只需要往它里面填充我们想要的table即可。 */ InitSubTable = function (index, row, $detail) { var cur_table = $detail.html('<table class="subTable"></table>').find("table"); $(cur_table).bootstrapTable({ url: 'url地址', method: 'get', clickToSelect: true, sidePagination : 'server', queryParams: function (params) { //url携带的参数 var temp = { "dataElements": row.identifier, } return temp }, columns: [ { field: 'field', title: '名称' }, { field: 'fieldName', title: '中文名称' }, { field: 'dataElementID', title: '标识符' }, { field: 'identifier', title: '部门' }, { field: 'typeName', title: '分类' }, { field: 'dataFormat', title: '数据格式' }, { field: 'state', title: '同步', checkbox: true }], responseHandler: function(res) { // url返回的数据,修改为rows和total的格式,不能为其他格式 var data = ''; data = { rows: res.data, total: res.data.length } return data; } }); };
5、最终的效果图
6、注:
3和4是两种不同的方式写表格,都可以达到目的
如果显示一直在加载中或者有数据但是没有加载出来, 则可能是0sidePagination分页方式没有设置