【.net core】【watercloud】动态数据转换为静态表格，或者表格数据返回需要后处理

MoFe12026-02-25 10:29

处理思路：在parseData方法中处理接口返回的动态数据，将动态数据处理成前端需要展示的格式展示。

javascript 复制代码 
/**
 * 渲染商贸行业（批发/零售/住宿/餐饮）分季度数据表格
 * 核心功能：通过接口获取数据，处理成复杂表头所需的结构化数据，渲染到指定DOM节点
 */
commonTable.rendertable({
    // 绑定表格渲染的DOM元素ID（页面中需存在id="currentTableId"的容器）
    elem: '#currentTableId',
    // 表格唯一标识ID，用于后续操作表格（如刷新、重载）
    id: 'currentTableId',
    // 数据接口地址，请求参数rows=200表示获取200条数据（关闭分页后一次性加载）
    url: '/slzdymb/Qshshy/GetReportJson?rows=200',
    // 关闭分页功能（因数据量小，一次性加载所有地区数据）
    page: false,
    // 表格列配置（复杂表头：3行表头， rowspan/colspan 合并单元格）
    cols: [
        // 第一行表头：一级分类（行业大类）
        [
            // 地区列：占3行（rowspan=3），居中显示
            { field: 'F_AreaName', title: '地区', align: 'center', rowspan: 3 },
            // 批发业列：合并16列（4个季度×4个指标），居中显示
            { title: '批发业', colspan: 16, align: 'center' },
            // 零售业列：合并16列，居中显示
            { title: '零售业', colspan: 16, align: 'center' },
            // 住宿业列：合并16列，居中显示
            { title: '住宿业', colspan: 16, align: 'center' },
            // 餐饮业列：合并16列，居中显示
            { title: '餐饮业', colspan: 16, align: 'center' }
        ],

        // 第二行表头：二级分类（季度）
        [
            // 批发业-一季度：合并4列（总量/占比/增速/贡献率）
            { title: '一季度', colspan: 4, align: 'center' },
            // 批发业-上半年：合并4列
            { title: '上半年', colspan: 4, align: 'center' },
            // 批发业-前三季度：合并4列
            { title: '前三季度', colspan: 4, align: 'center' },
            // 批发业-全年：合并4列
            { title: '全年', colspan: 4, align: 'center' },

            // 零售业-一季度：合并4列
            { title: '一季度', colspan: 4, align: 'center' },
            // 零售业-上半年：合并4列
            { title: '上半年', colspan: 4, align: 'center' },
            // 零售业-前三季度：合并4列
            { title: '前三季度', colspan: 4, align: 'center' },
            // 零售业-全年：合并4列
            { title: '全年', colspan: 4, align: 'center' },

            // 住宿业-一季度：合并4列
            { title: '一季度', colspan: 4, align: 'center' },
            // 住宿业-上半年：合并4列
            { title: '上半年', colspan: 4, align: 'center' },
            // 住宿业-前三季度：合并4列
            { title: '前三季度', colspan: 4, align: 'center' },
            // 住宿业-全年：合并4列
            { title: '全年', colspan: 4, align: 'center' },

            // 餐饮业-一季度：合并4列
            { title: '一季度', colspan: 4, align: 'center' },
            // 餐饮业-上半年：合并4列
            { title: '上半年', colspan: 4, align: 'center' },
            // 餐饮业-前三季度：合并4列
            { title: '前三季度', colspan: 4, align: 'center' },
            // 餐饮业-全年：合并4列
            { title: '全年', colspan: 4, align: 'center' },
        ],

        // 第三行表头：三级分类（具体指标）+ 数据字段绑定
        [
            // ===================== 批发业 =====================
            // 一季度指标
            { field: 'F_PFY_1_ZL', title: '总量', align: 'center' },
            { field: 'F_PFY_1_ZB', title: '占比', align: 'center' },
            { field: 'F_PFY_1_ZS', title: '增速', align: 'center' },
            { field: 'F_PFY_1_GXL', title: '贡献率', align: 'center' },
            // 上半年指标
            { field: 'F_PFY_2_ZL', title: '总量', align: 'center' },
            { field: 'F_PFY_2_ZB', title: '占比', align: 'center' },
            { field: 'F_PFY_2_ZS', title: '增速', align: 'center' },
            { field: 'F_PFY_2_GXL', title: '贡献率', align: 'center' },
            // 前三季度指标
            { field: 'F_PFY_3_ZL', title: '总量', align: 'center' },
            { field: 'F_PFY_3_ZB', title: '占比', align: 'center' },
            { field: 'F_PFY_3_ZS', title: '增速', align: 'center' },
            { field: 'F_PFY_3_GXL', title: '贡献率', align: 'center' },
            // 全年指标
            { field: 'F_PFY_4_ZL', title: '总量', align: 'center' },
            { field: 'F_PFY_4_ZB', title: '占比', align: 'center' },
            { field: 'F_PFY_4_ZS', title: '增速', align: 'center' },
            { field: 'F_PFY_4_GXL', title: '贡献率', align: 'center' },

            // ===================== 零售业 =====================
            // 一季度指标
            { field: 'F_LSY_1_ZL', title: '总量', align: 'center' },
            { field: 'F_LSY_1_ZB', title: '占比', align: 'center' },
            { field: 'F_LSY_1_ZS', title: '增速', align: 'center' },
            { field: 'F_LSY_1_GXL', title: '贡献率', align: 'center' },
            // 上半年指标
            { field: 'F_LSY_2_ZL', title: '总量', align: 'center' },
            { field: 'F_LSY_2_ZB', title: '占比', align: 'center' },
            { field: 'F_LSY_2_ZS', title: '增速', align: 'center' },
            { field: 'F_LSY_2_GXL', title: '贡献率', align: 'center' },
            // 前三季度指标
            { field: 'F_LSY_3_ZL', title: '总量', align: 'center' },
            { field: 'F_LSY_3_ZB', title: '占比', align: 'center' },
            { field: 'F_LSY_3_ZS', title: '增速', align: 'center' },
            { field: 'F_LSY_3_GXL', title: '贡献率', align: 'center' },
            // 全年指标
            { field: 'F_LSY_4_ZL', title: '总量', align: 'center' },
            { field: 'F_LSY_4_ZB', title: '占比', align: 'center' },
            { field: 'F_LSY_4_ZS', title: '增速', align: 'center' },
            { field: 'F_LSY_4_GXL', title: '贡献率', align: 'center' },

            // ===================== 住宿业 =====================
            // 一季度指标
            { field: 'F_ZSY_1_ZL', title: '总量', align: 'center' },
            { field: 'F_ZSY_1_ZB', title: '占比', align: 'center' },
            { field: 'F_ZSY_1_ZS', title: '增速', align: 'center' },
            { field: 'F_ZSY_1_GXL', title: '贡献率', align: 'center' },
            // 上半年指标
            { field: 'F_ZSY_2_ZL', title: '总量', align: 'center' },
            { field: 'F_ZSY_2_ZB', title: '占比', align: 'center' },
            { field: 'F_ZSY_2_ZS', title: '增速', align: 'center' },
            { field: 'F_ZSY_2_GXL', title: '贡献率', align: 'center' },
            // 前三季度指标
            { field: 'F_ZSY_3_ZL', title: '总量', align: 'center' },
            { field: 'F_ZSY_3_ZB', title: '占比', align: 'center' },
            { field: 'F_ZSY_3_ZS', title: '增速', align: 'center' },
            { field: 'F_ZSY_3_GXL', title: '贡献率', align: 'center' },
            // 全年指标
            { field: 'F_ZSY_4_ZL', title: '总量', align: 'center' },
            { field: 'F_ZSY_4_ZB', title: '占比', align: 'center' },
            { field: 'F_ZSY_4_ZS', title: '增速', align: 'center' },
            { field: 'F_ZSY_4_GXL', title: '贡献率', align: 'center' },

            // ===================== 餐饮业 =====================
            // 一季度指标
            { field: 'F_CYY_1_ZL', title: '总量', align: 'center' },
            { field: 'F_CYY_1_ZB', title: '占比', align: 'center' },
            { field: 'F_CYY_1_ZS', title: '增速', align: 'center' },
            { field: 'F_CYY_1_GXL', title: '贡献率', align: 'center' },
            // 上半年指标
            { field: 'F_CYY_2_ZL', title: '总量', align: 'center' },
            { field: 'F_CYY_2_ZB', title: '占比', align: 'center' },
            { field: 'F_CYY_2_ZS', title: '增速', align: 'center' },
            { field: 'F_CYY_2_GXL', title: '贡献率', align: 'center' },
            // 前三季度指标
            { field: 'F_CYY_3_ZL', title: '总量', align: 'center' },
            { field: 'F_CYY_3_ZB', title: '占比', align: 'center' },
            { field: 'F_CYY_3_ZS', title: '增速', align: 'center' },
            { field: 'F_CYY_3_GXL', title: '贡献率', align: 'center' },
            // 全年指标
            { field: 'F_CYY_4_ZL', title: '总量', align: 'center' },
            { field: 'F_CYY_4_ZB', title: '占比', align: 'center' },
            { field: 'F_CYY_4_ZS', title: '增速', align: 'center' },
            { field: 'F_CYY_4_GXL', title: '贡献率', align: 'center' }
        ]
    ],

    /**
     * 数据解析函数：将接口返回的原始数据处理为表格所需的结构化数据
     * @param {Object} res - 接口返回的原始数据
     * @returns {Object} 符合layui table要求的格式化数据
     */
    parseData: function (res) { 
        // 打印原始数据，便于调试（生产环境可注释）
        console.log('接口原始返回数据', res)
        // 初始化表格最终渲染的数据列表
        let tableDataList = [];

        // 判空：确保原始数据存在且有值
        if (res.data != null && res.data.length > 0) {
            // 遍历地区列表（每行对应一个地区）
            res.areaList.forEach((areaItem) => {
                // 初始化当前地区的行数据：先赋值地区名称
                let tableData = { F_AreaName: areaItem };

                // 遍历行业列表（批发/零售/住宿/餐饮）
                res.industry.forEach((industryItem) => {
                    // 遍历季度列表（1/2/3/4 对应一季度/上半年/前三季度/全年）
                    res.quarter.forEach((quarterItem) => {

                        // 筛选当前地区+当前行业+当前季度的匹配数据
                        let filterArray = res.data.filter(item =>
                            item.F_AreaName == areaItem &&          // 地区匹配
                            item.F_IndustryType == industryItem.Key && // 行业类型匹配
                            item.F_Quarter == quarterItem.Key);       // 季度匹配

                        // 打印筛选结果，便于调试
                        console.log(`筛选【${areaItem}-${industryItem.Description}-${quarterItem.Key}】的数据`, filterArray)

                        // 判空：确保筛选到有效数据
                        if (filterArray != null && filterArray.length > 0) {
                            // 动态拼接字段名（如 F_PFY_1_ZL），并赋值对应指标值
                            // 字段命名规则：F_ + 行业描述 + _ + 季度Key + _ + 指标后缀（ZL/ZB/ZS/GXL）
                            tableData['F_' + industryItem.Description + '_' + quarterItem.Key + '_ZL'] = filterArray[0].F_Total || 0;    // 总量
                            tableData['F_' + industryItem.Description + '_' + quarterItem.Key + '_ZB'] = filterArray[0].F_Proportion || 0; // 占比
                            tableData['F_' + industryItem.Description + '_' + quarterItem.Key + '_ZS'] = filterArray[0].F_Rate || 0;       // 增速
                            tableData['F_' + industryItem.Description + '_' + quarterItem.Key + '_GXL'] = filterArray[0].F_AccountFor || 0; // 贡献率
                        }
                    });
                });

                // 将当前地区的行数据加入最终列表
                tableDataList.push(tableData)
            });
        }

        // 打印最终处理后的表格数据，便于调试
        console.log('处理后表格渲染数据', tableDataList)

        // 返回layui table要求的格式化数据结构
        return {
            "code": res.state,        // 接口状态码（0成功/非0失败）
            "msg": res.message,       // 接口提示信息
            "count": res.count,       // 数据总条数（关闭分页后可忽略，但需返回）
            "data": tableDataList     // 最终渲染的表格数据
        };
    }
});
相关推荐
吹牛不交税6 天前
.netcore项目部署在ubuntu22.04虚拟机的docker中的过程记录
docker·容器·.netcore
weixin_421994789 天前
基于 .NET 9.0 的高性能轻量级令牌桶限流服务
.net·.netcore·令牌桶
weixin_421994789 天前
MVC 模式初探
mvc·.net·.netcore
weixin_4219947811 天前
互联网与 Web 应用简介
.net·.netcore
全栈小513 天前
【C#】合理使用DeepSeek相关AI应用为我们提供强有力的开发工具，在.net core 6.0框架下使用JsonNode动态解析json字符串，如何正确使用单问号和双问号做好空值处理
人工智能·c#·json·.netcore·deepseek
时光追逐者14 天前
C#/.NET/.NET Core优秀项目和框架2026年1月简报
c#·.net·.netcore
大尚来也16 天前
双库协同，各取所长：.NET Core 中 PostgreSQL 与 SQLite 的优雅融合实战
postgresql·sqlite·.netcore
吹牛不交税17 天前
admin.net-v2 框架使用笔记-netcore8.0/10.0版
vue.js·.netcore
张3蜂20 天前
java springboot2.0 api ；.netcore8 api ；python GunicornAPI ,哪种更强？请从多个维度，对比分析
java·python·.netcore
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03AI Agent 平台横评：ZeroClaw vs OpenClaw vs Nanobot04【OpenClaw 本地实战 Ep.3】突破瓶颈：强制修改 openclaw.json 解锁 32k 上下文记忆05Clawdbot部署教程：解决‘gateway token missing’授权问题的完整步骤06OpenClaw 安装之（三）DeepSeek模型接入配置和详细配置参数07AI agent：介绍 ZeroClaw 安装，使用08OpenClaw 使用和管理 MCP 完全指南09AI 规范驱动开发“三剑客”深度对比：Spec-Kit、Kiro 与 OpenSpec 实战指南10配置 OpenClaw 使用 Ollama 本地模型