需合并行列表格制作

最新推荐文章于 2023-02-21 11:26:46 发布

水瓶座的少女

最新推荐文章于 2023-02-21 11:26:46 发布

阅读量198

点赞数

本文链接：https://blog.youkuaiyun.com/qq_40853651/article/details/90402883

版权

博客介绍了将从后台请求得到的数组转为树形数组的操作，通过调用函数输出结果，结果为二维数组，完成表格制作后还附上了 HTML 代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最终效果图如下：

一般情况下呢，从后台请求会的数据是一个数组，首先需要把数组转为树形数组

//普通数组
var list=[
			{
				"id":"02",
				"name":"北京市",				
				"Interval":"[10,20]",
				"unit":"L",
				"qualification":""
			},{
				"id":"03",
				"name":"山东省",				
				"Interval":"[10,20]",
				"unit":"L",
				"qualification":""
			},{
				"id":"04",
				"name":"济南市",
				"parentid":"03",
				"Interval":"[10,20]",
				"unit":"L",
				"qualification":""
			},{
				"id":"05",
				"name":"河北省",				
				"Interval":"[10,20]",
				"unit":"L",
				"qualification":""
			},{
				"id":"06",
				"name":"保定市",
				"parentid":"05",
				"Interval":"[10,20]",
				"unit":"L",
				"qualification":""
			},{
				"id":"07",
				"name":"市中区",
				"parentid":"04",
				"Interval":"[10,20]",
				"unit":"L",
				"qualification":""
			},
			{
				"id":"08",
				"name":"青岛市",
				"parentid":"03",
				"Interval":"[10,20]",
				"unit":"L",
				"qualification":""
			},
			{
				"id":"09",
				"name":"xxx街道",
				"parentid":"07",
				"Interval":"[10,20]",
				"unit":"L",
				"qualification":""
			},
			{
				"id":"10",
				"name":"AAA",
				"parentid":"09",
				"Interval":"[10,20]",
				"unit":"L",
				"qualification":""
			},
			{
				"id":"11",
				"name":"BBB",
				"parentid":"10",
				"Interval":"[10,20]",
				"unit":"L",
				"qualification":""
			},
			{
				"id":"12",
				"name":"CCC",
				"parentid":"11",
				"Interval":"[10,20]",
				"unit":"L",
				"qualification":""
			},
			{
				"id":"13",
				"name":"DDD",
				"parentid":"12",
				"Interval":"[10,20]",
				"unit":"L",
				"qualification":""
			},
			{
				"id":"14",
				"name":"天桥区",
				"parentid":"04",
				"Interval":"[10,20]",
				"unit":"L",
				"qualification":""
			},
			{
				"id":"15",
				"name":"yyy街道",
				"parentid":"07",
				"Interval":"[10,20]",
				"unit":"L",
				"qualification":""
			},
		]
//普通数组转为树形结构的数组
function buildTree(list){
	let temp = [];
	let tree = [];
	for(let i in list){
		temp[list[i].id] = list[i];
	}
	for(let i in temp){
		if(temp[i].parentid) {
			if(!temp[temp[i].parentid].children) {
				temp[temp[i].parentid].children = new Array();
			}
			temp[temp[i].parentid].children.push(temp[i]);
		} else {
			tree.push(temp[i]);
		}
	}
	return tree;
}

调用函数输出一下：

var tree=buildTree(list);

console.log(tree);

输出结果如下图所示：

[{
	"id": "02",
	"name": "北京市",
	"Interval": "[10,20]",
	"unit": "L",
	"qualification": ""
}, {
	"id": "03",
	"name": "山东省",
	"Interval": "[10,20]",
	"unit": "L",
	"qualification": "",
	"children": [{
		"id": "04",
		"name": "济南市",
		"parentid": "03",
		"Interval": "[10,20]",
		"unit": "L",
		"qualification": "",
		"children": [{
			"id": "14",
			"name": "天桥区",
			"parentid": "04",
			"Interval": "[10,20]",
			"unit": "L",
			"qualification": ""
		}, {
			"id": "07",
			"name": "市中区",
			"parentid": "04",
			"Interval": "[10,20]",
			"unit": "L",
			"qualification": "",
			"children": [{
				"id": "15",
				"name": "yyy街道",
				"parentid": "07",
				"Interval": "[10,20]",
				"unit": "L",
				"qualification": ""
			}, {
				"id": "09",
				"name": "xxx街道",
				"parentid": "07",
				"Interval": "[10,20]",
				"unit": "L",
				"qualification": "",
				"children": [{
					"id": "10",
					"name": "AAA",
					"parentid": "09",
					"Interval": "[10,20]",
					"unit": "L",
					"qualification": "",
					"children": [{
						"id": "11",
						"name": "BBB",
						"parentid": "10",
						"Interval": "[10,20]",
						"unit": "L",
						"qualification": "",
						"children": [{
							"id": "12",
							"name": "CCC",
							"parentid": "11",
							"Interval": "[10,20]",
							"unit": "L",
							"qualification": "",
							"children": [{
								"id": "13",
								"name": "DDD",
								"parentid": "12",
								"Interval": "[10,20]",
								"unit": "L",
								"qualification": ""
							}]
						}]
					}]
				}]
			}]
		}]
	}, {
		"id": "08",
		"name": "青岛市",
		"parentid": "03",
		"Interval": "[10,20]",
		"unit": "L",
		"qualification": ""
	}]
}, {
	"id": "05",
	"name": "河北省",
	"Interval": "[10,20]",
	"unit": "L",
	"qualification": "",
	"children": [{
		"id": "06",
		"name": "保定市",
		"parentid": "05",
		"Interval": "[10,20]",
		"unit": "L",
		"qualification": ""
	}]
}]

//树形结构的数组--找到根元素，返回所有的路径（从根到叶子的路径）
function treeToPath(tree, path, currentPath) {
	var currentPath = currentPath || [];
	var path = path || []; 
	for(let i = 0; i < tree.length; i++) {
		if(i !== 0) {
			currentPath.pop();
		}
		var obj={
			name:tree[i].name,
			id:tree[i].id,
			Interval:tree[i].Interval,
			unit:tree[i].unit,
			qualification:tree[i].qualification
		}
		currentPath.push(obj);
		if(tree[i].children) {
			treeToPath(tree[i].children, path, currentPath);
		}else {
			path.push(currentPath.slice(0));
		}
	}
	currentPath.pop();
	return path;
}

返回的结果如下，返回的是一个二维数组：

[
	[{
		"name": "北京市",
		"id": "02",
		"Interval": "[10,20]",
		"unit": "L",
		"qualification": ""
	}],
	[{
		"name": "山东省",
		"id": "03",
		"Interval": "[10,20]",
		"unit": "L",
		"qualification": ""
	}, {
		"name": "济南市",
		"id": "04",
		"Interval": "[10,20]",
		"unit": "L",
		"qualification": ""
	}, {
		"name": "天桥区",
		"id": "14",
		"Interval": "[10,20]",
		"unit": "L",
		"qualification": ""
	}],
	[{
		"name": "山东省",
		"id": "03",
		"Interval": "[10,20]",
		"unit": "L",
		"qualification": ""
	}, {
		"name": "济南市",
		"id": "04",
		"Interval": "[10,20]",
		"unit": "L",
		"qualification": ""
	}, {
		"name": "市中区",
		"id": "07",
		"Interval": "[10,20]",
		"unit": "L",
		"qualification": ""
	}, {
		"name": "yyy街道",
		"id": "15",
		"Interval": "[10,20]",
		"unit": "L",
		"qualification": ""
	}],
	[{
		"name": "山东省",
		"id": "03",
		"Interval": "[10,20]",
		"unit": "L",
		"qualification": ""
	}, {
		"name": "济南市",
		"id": "04",
		"Interval": "[10,20]",
		"unit": "L",
		"qualification": ""
	}, {
		"name": "市中区",
		"id": "07",
		"Interval": "[10,20]",
		"unit": "L",
		"qualification": ""
	}, {
		"name": "xxx街道",
		"id": "09",
		"Interval": "[10,20]",
		"unit": "L",
		"qualification": ""
	}, {
		"name": "AAA",
		"id": "10",
		"Interval": "[10,20]",
		"unit": "L",
		"qualification": ""
	}, {
		"name": "BBB",
		"id": "11",
		"Interval": "[10,20]",
		"unit": "L",
		"qualification": ""
	}, {
		"name": "CCC",
		"id": "12",
		"Interval": "[10,20]",
		"unit": "L",
		"qualification": ""
	}, {
		"name": "DDD",
		"id": "13",
		"Interval": "[10,20]",
		"unit": "L",
		"qualification": ""
	}],
	[{
		"name": "山东省",
		"id": "03",
		"Interval": "[10,20]",
		"unit": "L",
		"qualification": ""
	}, {
		"name": "青岛市",
		"id": "08",
		"Interval": "[10,20]",
		"unit": "L",
		"qualification": ""
	}],
	[{
		"name": "河北省",
		"id": "05",
		"Interval": "[10,20]",
		"unit": "L",
		"qualification": ""
	}, {
		"name": "保定市",
		"id": "06",
		"Interval": "[10,20]",
		"unit": "L",
		"qualification": ""
	}]
]

function createTable(){
	var tree=buildTree(list);
	var path=treeToPath(tree);
	var html='';
	var length=0;
	var data=path;
	for(var i=0;i<data.length;i++){
		arr=data[i];
		if(arr.length>length){
			length=arr.length;
		}			
	}
	for(var i=0;i<data.length;i++){
		var arr=data[i];	
		//测试项下的只有一个td,没有下级
		if(arr.length==1){
			for(var j=0;j<arr.length;j++){						
				html+='<tr id="'+arr[j].id+'">'
				+'<td title="'+arr[j].name+'" colspan="'+length+'">'+arr[j].name+'</td>'
				+'<td class="qualification">'+arr[j].qualification+'</td>'
				+'<td><input class="testNum" type="text" id="'+arr[j].id+'"/></td>'
				+'<td>'+arr[j].Interval+'</td>'
				+'<td>'+arr[j].unit+'</td>'
				+'<td><form class="layui-form">'
				+'<div class="layui-input-block">'	
				+'<input type="checkbox" name="switch" class="switch" data-id="'+arr[j].id+'" lay-skin="switch" lay-text="合格|不合格" checked res="合格" data-id="">'
				+'</div></form>'	
				+'</td></tr>'					
			}
		}else{				
			var nameTd='';
			//循环出测试项中的td
			for(var j=0;j<arr.length-1;j++){
				 nameTd=nameTd+'<td>'+arr[j].name+'</td>'
			}
			colspan=length-(arr.length-1);				
			nameTd=nameTd+'<td colspan="'+colspan+'">'+arr[arr.length-1].name+'</td>'
			for(var k=0;k<colspan-1;k++){
				nameTd=nameTd+'<td style="display:none"></td>'
			}				
			html+='<tr id="'+arr[arr.length-1].id+'" data-name="'+name+'">'				
			+nameTd
			+'<td class="qualification">'+arr[arr.length-1].qualification+'</td>'
			+'<td><input class="testNum" type="text" id="'+arr[arr.length-1].id+'"/></td>'
			+'<td>'+arr[arr.length-1].Interval+'</td>'
			+'<td>'+arr[arr.length-1].unit+'</td>'
			+'<td><form class="layui-form">'
			+'<div class="layui-input-block">'	
			+'<input type="checkbox" name="switch" class="switch" data-id="'+arr[arr.length-1].id+'" lay-skin="switch" lay-text="合格|不合格" checked res="合格" data-id="">'
			+'</div></form>'	
			+'</td></tr>'				
		}
	}	
	$("#div_rpt thead .testitem").attr("colspan",length);
	$("#div_rpt tbody").html(html);	
	var	tableWidth=(length+5)*100;
	//主要是为了测试项中如何下级元素太多，显示不开的问题，如果测试项不多，自适应，过多，每个td为100px,横向进行滚动。
	if($(window).width()>tableWidth){
		$("#div_rpt table").css("width","100%")
	}else{
		$("#div_rpt table").css("width",tableWidth+"px")
	}
}

///合并行rowspan/
   jQuery.fn.rowspan = function(colIdx) { //封装的一个JQuery小插件
        return this.each(function(){
			var that;
			$('tr', this).each(function(row) {
				$('td:eq('+colIdx+')', this).filter(':visible').each(function(col) {
					if (that!=null && $(this).html() == $(that).html()) {
						rowspan = $(that).attr("rowSpan");
						if (rowspan == undefined) {
						$(that).attr("rowSpan",1);
						rowspan = $(that).attr("rowSpan"); }
						rowspan = Number(rowspan)+1;
						$(that).attr("rowSpan",rowspan);
						$(this).hide();
					} else {
						that = this;
					}
				});
			});
        });
    }

$(function() {
	createTable();
	for(var i=0;i<3;i++){
		$("table").rowspan(i);//传入的参数是对应的列数从0开始，哪一列有相同的内容就输入对应的列数值	 
	}
	
});

到此表格就完成啦。

再附上html代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>需合并行列表格</title>
		<style>	
		#div_rpt{
			overflow: scroll;
			width:100%;
		}
		#div_rpt table{
			min-width:100%;
		}
		#div_rpt thead{
			border:4px solid #2C58A6
		}
		#div_rpt thead th{
			height:46px;
			color:#000;
			font-size:16px;
			border:1px solid #2C58A6
		}
		#div_rpt input.testNum{
			text-align: center;
			color: red;
			padding: 5px 0;
			border-radius: 5px;
			width:80px;
		}
		#div_rpt tbody td{
			border:1px solid #000;
			width:100px;
			text-align: center;
		}
		</style>
    </head>
    <body>
       <div style=" height:100%;" id="div_rpt" data-bind="html:htmlContent">
       	<table style="table-layout: fixed;">
       		<thead>
       			<tr style="margin:10px 0;background:none;box-shadow:none;">
       				<th class="testitem" >测试项</th>
       				<th style="width:100px">技术要求</th>
       				<th style="width:100px">测试值</th>							
       				<th style="width:100px">上下限值</th>
       				<th style="width:100px">单位</th>
       				<th style="width:100px">结果</th>									
       			</tr>								
       		</thead>
       		<tbody>
       			
       		</tbody>
       	</table>       	
       </div>	   
    </body>
	
	<script src="jquery-2.2.1.min.js"></script>
	<script src="2.js"></script>
</html>