jeesite 前端和后端未分离页面，横表显示为竖表数据

最编程 2024-06-24 14:44:37

...

最近在用jeesite框架做项目，赶上了一个页面展示需求：有三个字段是常规的展示方式，剩下的字段在数据库是横表里的数据，具体后边要跟几个字段没什么准；所以最好不要写死。期初刚研究这个问题的时候，业务说可以写死，数据不会经常变，但是这不符合我的工作风格，所以就要深入地研究一下，如何将数据横表转成纵表，并且将查出的数据展示到前台页面上。
先看一下效果：
先不展示全部数据，但是后台需要先把表头数据查出来
点击查询按钮，展示最终效果图
根据上两张图片可以看到具体的实现效果，下面讲一下具体的实现思路；

首先在第一次打开页面时，后台先查出需要展示的表格头字段数据，主要是查出横转纵的物料名称，通过“mtrlList”将活动表头映射到前台；

public String ironBlastStatistical(TimsA021QueryVo timsA021QueryVo, Model model) {
   
        String jsonArrayString = "''";
        // 先查询产线名称 作为页面展示的横表字段
        List<TimsA021Vo> mtrlList = this.timsA021Service.queryIronBlastStatisticalMtrl(timsA021QueryVo);
        if (!mtrlList.isEmpty()) {
   
            List<Map> listMap = new ArrayList<>();
            for (TimsA021Vo timsA021Vo : mtrlList) {
   
                LinkedHashMap<String, String> map = new LinkedHashMap<>();
                map.put("mtrlname", timsA021Vo.getMtrlname());
                map.put("mtrlno", "E" + timsA021Vo.getMtrlno());
                listMap.add(map);
            }
            jsonArrayString = JSON.toJSONString(listMap);
        }
        model.addAttribute("mtrlList", jsonArrayString);
        model.addAttribute("timsA021", timsA021QueryVo);
        return "/timsA021IronBlastStatistical";
    }

然后在页面上，使用循环将展示活动表头数据字段名称一一对应好；

// 设置新的行
	const columnModel = [];
	columnModel.push({header:'${text("帐务日期")}', name:'ACCOUNTDATE', index:'ACCOUNTDATE', width:100, align:"center"},)
	columnModel.push({header:'${text("产线")}', name:'EQUIPNO', index:'EQUIPNO', width:100, align:"center",formatter: function(val, obj, row, act){
			return js.getDictLabel(${@DictUtils.getDictListJson('IRON_PLAN_LINE_NO')}, val, '${text("")}', true);
		}},)
	columnModel.push({header:'${text("班别")}', name:'PRODUCTSHIFT', index:'PRODUCTSHIFT', width:100, align:"center",formatter: function(val, obj, row, act){
			return js.getDictLabel(${@DictUtils.getDictListJson('product_shift_1500')}, val, '${text("")}', true);
		}},)
	var str = ${mtrlList};
	if (str !='' ){
		for (var i = 0; i <str.length ; i++) {
			columnModel.push({header:'${text("'+str[i].mtrlname+'")}', name:'${text("'+str[i].mtrlno+'")}',  width:150, align:"center", formatter: function(val, obj, row, act){
					return js.formatNumber(val, 3, false, '0.000'); // 数值类型格式化 (原始数值, 小数位数, 是否千分位, 默认值，金额情况下设置0.00);
				}},)
		}
	}

之后查询data数据，这时查询语句要把横表转换成纵表查出，并将数据根据表头进行对应；

public Page

上一篇：开源后台系统 *mee-admin*

下一篇： JeeSite | 保存消息修改记录包