[TOC] 比较灵活的 是事先处理好数据合并成一行，然后自己去展示层设计怎么展示，而且不用考虑分页问题 这是竖排合并，还可以横排合并 ，横排的话就是增加一个formatter，然后在里面增加样式  ## 方式1 ``` <table data-toggle="table" id="table"></table> <script type="text/javascript"> $(function() { var table = $("#table"); // 初始化表格 table.bootstrapTable({ columns: [ [{ field : 'merchantId', title : '商户ID', align : 'center', colspan : 1, rowspan : 2 }, { field : 'orgName', title : '医院', align : 'center', colspan : 1, rowspan : 2 }, { field : 'checkDate', title : '汇总日期', align : 'center', colspan : 1, rowspan : 2 }, { title : '总交易单数', align : 'center', colspan : 2, rowspan : 1 }, { title : '总交易额', align : 'center', colspan : 2, rowspan : 1 }, { title : '总退款单数', align : 'center', colspan : 2, rowspan : 1 }, { title : '总退款金额', align : 'center', colspan : 2, rowspan : 1 }, { field : 'createTime', title : '创建时间', align : 'center', colspan : 1, rowspan : 2, visible :false }, { title : '操作', align : 'center', colspan : 2, rowspan : 1 } ], [{ field : 'payNum', title : '平台总交易单数' },{ field : 'payNumT', title : '第三方总交易单数' },{ field : 'payFee', title : '平台总交易额' },{ field : 'payFeeT', title : '第三方总交易额' },{ field : 'refundNum', title : '平台总退款单数' },{ field : 'refundNumT', title : '第三方总退款单数' },{ field : 'refundFee', title : '平台总退款金额' },{ field : 'refundFeeT', title : '第三方总退款金额' },{ title : '平台操作', align : 'center' },{ title : '第三方操作', align : 'center' }] ], data:[ { "orgName": "xxxx", "checkDate": 20190423, "merchantId": 10086, "payNum": 3, "payFee": 3, "refundFee": 3, "payNumT": 3, "payFeeT": 3, "refundFeeT": 3, "refundNum":0, "refundNumT":0, }, { "orgName": "xxxx", "checkDate": 20190423, "merchantId": 10087, "payNum": 3, "payFee": 3, "refundFee": 3, "payNumT": 3, "payFeeT": 3, "refundFeeT": 3, "refundNum":0, "refundNumT":0, } ] }); }); </script> ``` ## 方式2 ``` <table data-toggle="table" id="table"></table> <script type="text/javascript"> $(function() { var table = $("#table"); // 初始化表格 table.bootstrapTable({ url: '/static/data.json', //请求后台的URL（*）用于从远程站点请求数据的URL //method: 'get', //请求方式（*） columns: [ [{ field : 'merchantId', title : '商户ID', align : 'center', colspan : 1, rowspan : 2 }, { field : 'orgName', title : '医院', align : 'center', colspan : 1, rowspan : 2 }, { field : 'checkDate', title : '汇总日期', align : 'center', colspan : 1, rowspan : 2 }, { title : '总交易单数', align : 'center', colspan : 2, rowspan : 1 }, { title : '总交易额', align : 'center', colspan : 2, rowspan : 1 }, { title : '总退款单数', align : 'center', colspan : 2, rowspan : 1 }, { title : '总退款金额', align : 'center', colspan : 2, rowspan : 1 }, { field : 'createTime', title : '创建时间', align : 'center', colspan : 1, rowspan : 2, visible :false }, { title : '操作', align : 'center', colspan : 2, rowspan : 1 } ], [{ field : 'payNum', title : '平台总交易单数' },{ field : 'payNumT', title : '第三方总交易单数' },{ field : 'payFee', title : '平台总交易额' },{ field : 'payFeeT', title : '第三方总交易额' },{ field : 'refundNum', title : '平台总退款单数' },{ field : 'refundNumT', title : '第三方总退款单数' },{ field : 'refundFee', title : '平台总退款金额' },{ field : 'refundFeeT', title : '第三方总退款金额' },{ title : '平台操作', align : 'center' },{ title : '第三方操作', align : 'center' }] ], }); }); </script> ``` data.json ``` { "total": 8, "totalNotFiltered": 8, "rows": [ { "orgName": "xxxx", "checkDate": 20190423, "merchantId": 10086, "payNum": 3, "payFee": 3, "refundFee": 3, "payNumT": 3, "payFeeT": 3, "refundFeeT": 3, "refundNum": 0 }, { "orgName": "xxxx", "checkDate": 20190423, "merchantId": 10087, "payNum": 3, "payFee": 3, "refundFee": 3, "payNumT": 3, "payFeeT": 3, "refundFeeT": 3, "refundNum": 0 } ] } ``` ## 方式3 ``` <table data-toggle="table" id="table"></table> <script type="text/javascript"> $(function() { var table = $("#table"); // 初始化表格 table.bootstrapTable({ url: '{:url("getData")}', //请求后台的URL（*）用于从远程站点请求数据的URL method: 'get', //请求方式（*） columns: [ [{ field : 'merchantId', title : '商户ID', align : 'center', colspan : 1, rowspan : 2 }, { field : 'orgName', title : '医院', align : 'center', colspan : 1, rowspan : 2 }, { field : 'checkDate', title : '汇总日期', align : 'center', colspan : 1, rowspan : 2 }, { title : '总交易单数', align : 'center', colspan : 2, rowspan : 1 }, { title : '总交易额', align : 'center', colspan : 2, rowspan : 1 }, { title : '总退款单数', align : 'center', colspan : 2, rowspan : 1 }, { title : '总退款金额', align : 'center', colspan : 2, rowspan : 1 }, { field : 'createTime', title : '创建时间', align : 'center', colspan : 1, rowspan : 2, visible :false }, { title : '操作', align : 'center', colspan : 2, rowspan : 1 } ], [{ field : 'payNum', title : '平台总交易单数' },{ field : 'payNumT', title : '第三方总交易单数' },{ field : 'payFee', title : '平台总交易额' },{ field : 'payFeeT', title : '第三方总交易额' },{ field : 'refundNum', title : '平台总退款单数' },{ field : 'refundNumT', title : '第三方总退款单数' },{ field : 'refundFee', title : '平台总退款金额' },{ field : 'refundFeeT', title : '第三方总退款金额' },{ title : '平台操作', align : 'center' },{ title : '第三方操作', align : 'center' }] ], }); }); </script> ``` TP 控制器getData方法 ``` public function getData(){ $arr['total']=8; $arr['totalNotFiltered']=8; $arr['rows'][]=[ "orgName"=>"xxxx", "checkDate"=>20190423, "merchantId"=> 10086, "payNum"=>3, "payFee"=> 3, "refundFee"=> 3, "payNumT"=>3, "payFeeT"=> 3, "refundFeeT"=> 3, "refundNum"=>0, ]; $arr['rows'][]=[ "orgName"=>"xxxx", "checkDate"=>20190423, "merchantId"=> 10087, "payNum"=>3, "payFee"=> 3, "refundFee"=> 3, "payNumT"=>3, "payFeeT"=> 3, "refundFeeT"=> 3, "refundNum"=>0, ]; //简洁 $arr=[ 'total'=>8, 'totalNotFiltered'=>8, 'rows'=>[ [ "orgName"=>"xxxx", "checkDate"=>20190423, "merchantId"=> 10086, "payNum"=>3, "payFee"=> 3, "refundFee"=> 3, "payNumT"=>3, "payFeeT"=> 3, "refundFeeT"=> 3, "refundNum"=>0, ], [ "orgName"=>"xxxx", "checkDate"=>20190423, "merchantId"=> 10086, "payNum"=>3, "payFee"=> 3, "refundFee"=> 3, "payNumT"=>3, "payFeeT"=> 3, "refundFeeT"=> 3, "refundNum"=>0, ], ] ] //直接返回数组或者使用json_encode转成json格式字符串在返回都可以 return $arr; return json_encode($arr); } ``` ## 技巧  平时我们大多数使用的是一维数组定义columns 现在我们使用到的是二维数组 其中除了对应的数据列。其他定义的作为表头 * 数组里的第一个数组 用来 定义表头。 * 第二个数组可以看做一个细分的标题列。 在这里我们可以看到 其实作用和第一个数组一样。只是这里在合并单元格时除了进行colspan(夸列合并)。还进行 rowspan（夸行合并） * 最后一个数组就是用来存放数据 的数组。   按照 这个思路其实大家可以做出自己想要的组合格式的表格。主要是注意二位数组的使用！！ ``` $("#table").bootstrapTable({ dataType: "json", method: 'get', contentType: "application/x-www-form-urlencoded", cache: false, columns:[ [ { "title": "洗衣机统计表", "halign":"center", "align":"center", "colspan": 5 } ], [ { field: 'name', title: "功能分组", valign:"middle", align:"center", colspan: 1, rowspan: 2 }, { title: "美的", valign:"middle", align:"center", colspan: 2, rowspan: 1 }, { title: "松下", valign:"middle", align:"center", colspan: 2, rowspan: 1 } ], [ { field: 'mideaNum', title: '数量', valign:"middle", align:"center" }, { field: 'mideaPercent', title: '占比', valign:"middle", align:"center" }, { field: 'panasonicNum', title: '数量', valign:"middle", align:"center" }, { field: 'panasonicPercent', title: '占比', valign:"middle", align:"center" } ] ] }) ``` json ``` [ {"name":"滚筒","mideaNum":"10","mideaPercent":"29%","panasonicNum":"10","panasonicPercent":"29%"}, {"name":"波轮","mideaNum":"9","mideaPercent":"28%","panasonicNum":"10","panasonicPercent":"29%"} ] ```