合并單元格1 · PHP筆記

[TOC] 比較靈活的是事先處理好數據合并成一行，然后自己去展示層設計怎么展示，而且不用考慮分頁問題這是豎排合并，還可以橫排合并，橫排的話就是增加一個formatter，然后在里面增加樣式 ![](https://img.kancloud.cn/4e/2a/4e2a50257df179a3ba2261673331fbba_1583x209.png) ## 方式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); } ``` ## 技巧 ![](https://img.kancloud.cn/07/d7/07d7cfc215c359047b26558203511efe_881x466.png) 平時我們大多數使用的是一維數組定義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%"} ] ```