根据树形（父子层级关系）的数据，使用JS动态生成表头。

最新推荐文章于 2023-02-09 16:04:48 发布

amy_yang666

最新推荐文章于 2023-02-09 16:04:48 发布

阅读量1.1k

点赞数

文章标签： java oracle

本文链接：https://blog.csdn.net/yang5324521/article/details/103596109

版权

根据ORACLE数据库中的树形数据，本文详细介绍了如何利用JS动态生成具有父子层级关系的统计报表表头。内容涉及TJBB和TJBBMX两张表的数据结构与SQL查询，重点解析了TJLX字段决定列显示的逻辑，并提供了JAVA后端代码和前端页面代码示例，最后给出了代码下载链接。

摘要由CSDN通过智能技术生成

一、表结构（ORACLE）：
在这里插入图片描述
二、表数据
1、统计报表（TJBB），存储报表的基本信息。
1)、SQL语句：

select t.* from TJBB t

2)、执行结果：
在这里插入图片描述
2、统计报表明细（TJBBMX），存储报表的指标信息。
1)、SQL语句：

select t.* from TJBBMX t

2)、执行结果：
在这里插入图片描述
注意：TJLX字段为3位数字（0或1）组成。每位数字分别代表：今年，去年，同比。若为1，则显示该列。若为0，则不显示该列。即如果此列的值为：111，则此列需要显示：今年、去年、同比。如果此列的值为：101，则此列需要显示：今年、同比。（可结合下图，进行理解）。

三、根据上述列出的TJBB、TJBBMX的数据，动态生成如下图所示的表头。
在这里插入图片描述
或者：

四、使用JS实现功能。
1、JAVA后端代码。

package com.webapp.controller;

import java.util.List;
import javax.servlet.http.HttpServletRequest;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import com.alibaba.fastjson.JSONObject;

@Controller("TjbbJsController")
@RequestMapping("/tjbbjs")
public class TjbbJsController {
   
	protected static final String VIEW = "/view/test/";

	@Autowired
	private JdbcTemplate sdJdbcTemplate;
	
	/**
	 * 。
	 * @param request
	 * @param model
	 * @return
	 */
	@RequestMapping("/test")
	public String test1(HttpServletRequest request, ModelMap model){
   
		try{
   
			String bbbm = "01";
			String sql = "select a.bbmc, b.id, b.fid, b.mc, b.tjlx, b.tjsjdw, b.pxxh from tjbb a "
					+ "inner join tjbbmx b on a.id = b.bbid where a.bbbm = '"+bbbm+"'";
			List list = sdJdbcTemplate.queryForList(sql);
			model.addAttribute("list", JSONObject.toJSONString(list));
		}catch(Exception e){
   
			e.printStackTrace();
		}
		return "/tj/tjbbjs";
		
	}
}

其中，根据SQL语句进行查询，结果数据如下图所示：

select a.bbmc, b.id, b.fid, b.mc, b.tjlx, b.tjsjdw, b.pxxh from tjbb a 
inner join tjbbmx b on a.id = b.bbid where a.bbbm = '01'

在这里插入图片描述
注意：数据未排序。
3、前台页面代码。

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">

function sortArray(array, fObj){
   
	var resultObj = {
   };
	var resultArray = [];
	var idTmp = fObj.hasOwnProperty('ID')?fObj['ID']:'';//父记录的主键
	var fpxxh = fObj.hasOwnProperty('PXXH')?fObj['PXXH']:null;//父记录的排序序号
	var fcj = fObj.hasOwnProperty('CJ')?fObj['CJ']:null;//父记录的层级
	var zdcj = 0;//最大层级
	for(var i=0;i<array.length;i++){
   
		var obj = array[i];
		var fid = obj.hasOwnProperty('FID')?obj['FID']:'';//父主键
		var id = obj.hasOwnProperty('ID')?obj['ID']:'';//主键
		var pxxh = obj.hasOwnProperty('PXXH')?obj['PXXH']:null;//排序序号
		if(fid==idTmp){
   
			obj['FPXXH']=fpxxh;//子记录存放父记录的排序序号
			var cj