提升数据可视化:拖拽编辑自动汇总,树形数据表格展示新方式

原创
2023/12/18 09:57
阅读数 42

本文由葡萄城技术团队发布。转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。

前言

树形结构是一种非常常见的数据结构,它由一组以层次关系排列的节点组成。树的结构类似于自然界中的一棵树,树根对应顶层节点,而子节点则分支延伸出来。

在树形结构中,每个节点可以有零个或多个子节点,但每个节点只能有一个父节点(除了根节点)。这种层级关系使得树形结构适用于许多实际问题的建模和解决。树形结构可以非常清晰、简洁地表示数据的上下级关系,例如省市区对应的树形结构就是这样的:

像“雁塔区”、“延安市”等这些没有子级的数据,称为树形结构的“叶子节点”,而那些有子级的,则称为“分枝节点”。

而在表格中的树形结构的表示形式如下所示(通过缩进的方式):

那么今天小编就为大家介绍如何实现一个表格中的树形结构。

业务场景需求

现在有一个业务需求场景:某银行在全国各地的区县级区域开设了分行,并希望以区、市、省为维度,做一个存贷款量的统计表。

在该场景下有这样的一些需要实现的效果:

1.级联折叠/展开省市

用户点击省和市的序号,其子级会自动折叠和展开。

2.自动计算并保护数据

用户无须编辑市和省的数据,而是自动计算其子集之和,新增、删除等操作也遵从这个原则。

3.拖拽调整数据层级

对于层级错误的数据(如汉中市应该属于陕西省,而非西安市),用户可以通过拖拽来实现层级的移动,也可以用ctrl shift拖拽来改变数据在同一层级的位置。

4.灵活新增数据

用户可以新增数据,新增时可以选择添加为当前数据的子级,也可以添加为同级。

5.删除数据及子级

用户在删除数据时,若数据有子级,需要一同删除其子数据,如删除西安市,需要将其下的灞桥区、碑林区等一并删除。

6.数据校验提示

用户在编辑总合计行时,系统会自动进行数据校验,若数据校验未通过,则智能提示并将背景色变化,同时鼠标悬浮可查看批注信息。这种智能数据校验功能,可以帮助用户更好地规范数据录入,提高数据的准确性和可靠性。

代码实现过程:

(1)上传数据(data.js)

//部分代码,完整代码请查看Gitee:https://gitee.com/GrapeCity/tree-form
let data = {
    data: [{
        name: "陕西省",
        no: "1",
        this_year_deposit: null,
        last_year_deposit: null,
        this_year_month_deposit: null,
        last_year_month_deposit: null,
        this_year_loan: null,
        last_year_loan: null,
        this_year_month_loan: null,
        last_year_month_loan: null,
    }, {
        name: "西安市",
        no: "1.1",
        this_year_deposit: null,
        last_year_deposit: null,
        this_year_month_deposit: null,
        last_year_month_deposit: null,
        this_year_loan: null,
        last_year_loan: null,
        this_year_month_loan: null,
        last_year_month_loan: null,
    }, {
        name: "灞桥区",
        no: "1.1.1",
        this_year_deposit: 100,
        last_year_deposit: 100,
        this_year_month_deposit: 100,
        last_year_month_deposit: 100,
        this_year_loan: 100,
        last_year_loan: 100,
        this_year_month_loan: 100,
        last_year_month_loan: 100,
    }]
}
let year = 2023
let month = 8
export {
    data,
    year,
    month
}

(2)编写Html

<!doctype html>
<html>

<head>
    <title>SpreadJS in TypeScript</title>
    <link rel="stylesheet" type="text/css" href="node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
    <link rel="stylesheet" type="text/css" href="node_modules/@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css">
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- <script src="//cdn.bootcdn.net/ajax/libs/FileSaver.js/2.0.5/FileSaver.js"></script> -->
    <script src="systemjs.config.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #loadAnother {
            margin-left: 30px;
        }
        .header {
            height: 30px;
        }
        #designer-container {
            height: calc(100vh - 30px)
        }
    </style>
</head>

<body>
    <div class="header">
        <button id="exportExcel">保存为Excel</button><button id="loadAnother">加载另一组数据</button>
        <span id="yearMonth"></span>
    </div>
    <div class="container">
        <div id="designer-container" style="width:100vw"></div>
    </div>
</body>
<script>
    let spread, designer, sheet
    System.import('./src/app');
</script>

</html>

(3)编写方法

(function (global) {
    System.config({
      transpiler: 'plugin-typescript',
      typescriptOptions: {
        "target": "es5",
        "module": "system",
      },
      baseURL: './node_modules/',
      meta: {
        'typescript': {
          "exports": "ts"
        },
        '*.css': { loader: 'systemjs-plugin-css' }
      },
      map: {
        'typescript': 'typescript/lib/typescript.js',
      },
      packageConfigPaths: ['./node_modules/*/package.json', "./node_modules/@grapecity/*/package.json"],
      // packages tells the System loader how to load when no filename and/or no extension
      packages: {
        "./src": {
          defaultExtension: 'js'
        },
        "object-assign": {
          main: "index.js"
        },
        "node_modules": {
          defaultExtension: 'js'
        },
      }
    });
  })(this);

以上是关键代码段,如果需要查看完整代码,欢迎访问Gitee:https://gitee.com/GrapeCity/tree-form

总结

表格展示树形数据的新方式让用户可以轻松地进行数据编辑。通过简单的拖拽操作,用户可以在树形结构中调整、移动各个数据项目的位置。这种直观的交互方式,不仅提高了用户的使用体验,也使得数据编辑变得更加简单、快速。同时,用户还可以通过拖拽来创建、合并甚至删除数据项目,进一步提升数据管理的灵活性和效率。

此外,示例中表格展示树形数据的新方式还具备自动汇总的功能。在传统的表格展示方式中,用户需要手动计算和汇总各个数据,这不仅费时费力,还容易产生错误。而通过新的方式,系统可以自动对树形数据进行汇总和计算,将结果实时展示在表格中。这让用户可以更加便捷地获取整体数据的情况,减少出错的可能性,并为数据分析和决策提供更有价值的参考依据,如果您想了解更多的信息资料,欢迎点击这里

扩展链接:

Redis从入门到实践

一节课带你搞懂数据库事务!

Chrome开发者工具使用教程

从表单驱动到模型驱动,解读低代码开发平台的发展趋势

低代码开发平台是什么?

基于分支的版本管理,帮助低代码从项目交付走向定制化产品开发

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部