🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
根据前边列的字段合并之后列的相同字段单元格 如首次出现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> ```