合并單元格3 · PHP筆記

根據前邊列的字段合并之后列的相同字段單元格如首次出現type的內容和之后的數據連續相同則合并，遇到不同則不合并， ![](https://img.kancloud.cn/0a/e5/0ae5ae93ef3f9972ccc01fc1965c2f0f_1449x435.png) ``` <table data-toggle="table" id="table"></table> <script type="text/javascript"> $(function() { var table = $("#table"); //表格列定義 var columnlist=[ //{field:"PROJID",title:"id"}, {field:"GDSTITLE",title:"鄉鎮"}, {field:"NAME2",title:"一級專項"}, {field:"NAME1",title:"二級專項"}, {field:"CATALOGNAME",title:"三級專項"}, {field:"NUM",title:"數量(個)"}, {field:"AREA",title:"面積(公頃)"} ]; var data=[ { "PROJID": "1", "AREA": 569.960000, "NUM": 1, "GDSTITLE": "AA鎮", "CATALOGNAME": "礦山超期限開采", "NAME1": "礦山違規開采問題", "NAME2": "礦產資源專項" }, { "PROJID": "1", "AREA": 692.560000, "NUM": 1, "GDSTITLE": "BB鎮", "CATALOGNAME": "礦山超期限開采", "NAME1": "礦山違規開采問題", "NAME2": "礦產資源專項" }, { "PROJID": "1", "AREA": 692.950000, "NUM": 1, "GDSTITLE": "CC鄉", "CATALOGNAME": "礦山地質環境保護與治理", "NAME1": "礦山恢復治理問題", "NAME2": "礦產資源專項" }, { "PROJID": "1", "AREA": 0.000000, "NUM": 1, "GDSTITLE": "DD鄉", "CATALOGNAME": "礦山超期限開采", "NAME1": "礦山違規開采問題", "NAME2": "礦產資源專項" }, { "PROJID": "1", "AREA": 66.410000, "NUM": 2, "GDSTITLE": "EE鎮", "CATALOGNAME": "礦山超期限開采", "NAME1": "礦山違規開采問題", "NAME2": "礦產資源專項" }, { "PROJID": "1", "AREA": 272.680000, "NUM": 4, "GDSTITLE": "EE鎮", "CATALOGNAME": "禁采區違法采砂", "NAME1": "非禁采期違法采砂", "NAME2": "水資源專項" }, { "PROJID": "1", "AREA": 0.000000, "NUM": 1, "GDSTITLE": "EE鎮", "CATALOGNAME": "禁采區違法采砂", "NAME1": "禁采期違法采砂", "NAME2": "水資源專項" }, { "PROJID": "1", "AREA": 0.000000, "NUM": 3, "GDSTITLE": "FF鎮", "CATALOGNAME": "礦山超期限開采", "NAME1": "礦山違規開采問題", "NAME2": "礦產資源專項" }, { "PROJID": "1", "AREA": 0.000000, "NUM": 1, "GDSTITLE": "EE鎮", "CATALOGNAME": "禁采區違法采砂", "NAME1": "禁采期違法采砂", "NAME2": "水資源專項" }, { "PROJID": "1", "AREA": 0.000000, "NUM": 1, "GDSTITLE": "EE鎮", "CATALOGNAME": "禁采區違法采砂", "NAME1": "禁采期違法采砂", "NAME2": "礦產資源專項" }, ]; //表格參數 var tableParams={ //url:'/static/data.json', data: data, sidePagination: "client", showFooter: false, showHeader: true, checkboxHeader: true, pagination: false, //是否顯示分頁（*） columns:columnlist, onClickCell: function(field, value, row, $cell) { }, formatNoMatches: function() { return "對不起，沒有查詢到相關的數據..."; }, formatLoadingMessage: function() { return "請稍等，數據正在加載中..."; } } var table = $("#table"); table.bootstrapTable(tableParams); mergeCells(data, "GDSTITLE", 1, table,[]);//鄉鎮 mergeCells(data, "NAME2", 1, table,["GDSTITLE"]);//二級專項 mergeCells(data, "NAME1", 1, table,["GDSTITLE","NAME2"])//一級專項 mergeCells(data, "CATALOGNAME", 1, table,["GDSTITLE","NAME2","NAME1"]);//三級專項 //$("#table").bootstrapTable('mergeCells', { index: 0, field: 'GDSTITLE', colspan:1, rowspan: 2 }) /** * 合并行 * @param data 原始數據（應在服務端完成排序） * @param fieldName 合并屬性名稱數組 * @param colspan 列數 * @param target 目標表格對象 * @param upperLevelFieldname 該字段上一級的字段集合（合并格數不能超過上一字段） */ function mergeCells(data, fieldName, colspan, target,upperLevelFieldnameList) { if (data.length == 0) { return; } console.log(data) //{"PROJID": "1","AREA": 569.96,"NUM": 1,"GDSTITLE": "AA鎮","CATALOGNAME": "礦山超期限開采","NAME1": "礦山違規開采問題","NAME2": "礦產資源專項"} //初始化upperFieldValueList var upperFieldValueList=[]; upperLevelFieldnameList.forEach(function (item) { //console.log(item)// ''、GDSTITLE/GDSTITLE、NAME2/GDSTITLE、NAME2、NAME1 upperFieldValueList.push(data[0][item]); }) //console.log(upperFieldValueList)//[]、['AA鎮']、['AA鎮', '礦產資源專項']、['AA鎮', '礦產資源專項', '礦山違規開采問題'] // data.push({"GDSTITLE":"","NAME2":"","NAME1":"","CATALOGNAME":""});//主要是給數據增加一行解決底部合并問題 var numArr = []; var value = data[0][fieldName];//console.log(value)AA鎮、礦產資源專項、礦山違規開采問題、礦山超期限開采 var num = 0; for (var i = 0; i < data.length; i++) {debugger if ((value != data[i][fieldName])|doCheck(data[i],upperLevelFieldnameList)) { numArr.push(num); value = data[i][fieldName]; num = 1; continue; } num++; } var merIndex = 0; for (var i = 0; i < numArr.length; i++) { $(target).bootstrapTable('mergeCells', { index: merIndex, field: fieldName, colspan: colspan, rowspan: numArr[i] }) merIndex += numArr[i]; } //用于檢查是否相同，相同返回false不相同更新父類并返回true function doCheck(item,upperLevelFieldnameList) { var log=false; upperLevelFieldnameList.forEach(function (value,index) { if(upperFieldValueList[index] !=item[value]){ log=true; upperFieldValueList[index]=item[value] }; }) return log; } } }); </script> ```