tree-table-data

使用 react + antd 构建一个适用于多层级的树形表格解决方案

input

实际业务中数据库存的数据是到最小细分的数据。
首先需要明确的是三层关系，typeClass - model - color。
某个 typeClass 下面会有几种 model； 某个 model 下面又会有几个 color。
表中有所得数据均来自于一种typeClass，其下有 m1 m2 m3 三种model；而三个model 下又有 c1 - c10 不等的 color。就构成了如下的表格。

index	model	color	E1	E2	E3	N1	N2	N3	S1	S2	W1	W2	C_SUM
0	m1	c1	144	80	87	40	80	74	87	103	96	64	855
1	m1	c2	63	33	36	16	33	29	36	43	39	26	354
2	m1	c4	44	24	26	12	24	21	26	31	28	19	255
...	...	...	...	...	...	...	...	...	...	...	...	...	...
9	m1	c8	1	0	0	0	0	0	0	0	0	0	1
11	m2	c10	138	71	78	37	71	64	78	94	86	58	775
...	...	...	...	...	...	...	...	...	...	...	...	...	...
21	m2	c5	0	1	1	0	1	0	1	1	1	0	6
23	m3	c2	107	57	62	29	57	52	62	74	67	46	613
...	...	...	...	...	...	...	...	...	...	...	...	...	...
35	m3	c4	1	0	0	0	0	0	0	0	0	0	1

output

可是在页面上要求做一个有层级的汇总表。如下图所示

---

HOW??

改变数据结构

[
    { "index": "0", "model": "m1", "color": "c1", "E1": "144.0", ..., "W2": "64.0", "C_SUM": "855.0" },
    ...
]

=>

[
    {
      "rid": **, // 用于唯一标示row key
      "E1": **, // 各列汇总加和数据
      ...
      "key": "pbp" // 用于显示第一列各种不同分类
      "children":[
        { rid: **, key: "m1", "E1": **, ..., 
          children: [
            {rid: **, key: "c1", "E1": **, children: null },
            {rid: **, key: "c2", "E1": **, children: null },
            {rid: **, key: "c3", "E1": **, children: null },
          ] 
        },
        { rid: **, key: "m2", "E1": **, ..., children: [...] },
        { rid: **, key: "m3", "E1": **, ..., children: [...] }
      ]
    },
    ...
]

此时，antd Table 组件会自动识别 children 属性，如果有的话就认为是需要收缩的。完美～～ 不过如果用的是 vue + element 就没有这么容易了。再加两个flag: open level 来标示是否点击展开。 我实际做项目的时候就是用的这种方法，由于想练习react，自己就做了react的demo。
此项目主要想介绍我转换数据格式的方法，在此就不对 element-ui 做说明了。

• 先说使用：具体见 App.js

// step 1: 声明对象
const sourceData = new TreeTable(data, hierarchy);
// step 2: 初始化对象
sourceData.init();
// step 3: 使用内部 get 获得对象属性
return sourceData.data;

之后就是把 sourceData.data 绑定到 Table 标签上了

• 再看原理：具体见 tree-data/index.js

/**
 * Creates an instance of TreeTable.
 * @param {Array} tableData detail 数据
 * @param {Array} hierarchy 层级结构对应表格字端
 * @class TreeTable
 *
 */
class TreeTable {
  constructor(tableData, hierarchy) {
    this.cache = _.cloneDeep(tableData);
    this.tableData = tableData;
    this.hierarchy = hierarchy;
  }
  columns() {
    return _.difference(_.keys(this.cache[0]), this.hierarchy);
  }
  graph() {
    const recursion = (group, index) => {
      _.forIn(group, (value, kay) => {
        group[kay] = _.groupBy(value, this.hierarchy[index]);
        if (index < this.hierarchy.length - 1) recursion(group[kay], index + 1);
      });
    };
    const group = _.groupBy(this.tableData, this.hierarchy[0]);
    recursion(group, 1);
    console.log("graph", group);
    this.tableData = group;
    return group;
  }
  obj2Arr() {
    let result = [];
    let level = 0;
    (function recursion(tableData, result, level) {
      _.forIn(tableData, (value, key) => {
        let row = { key, level, children: [], rid: _.uniqueId() };
        if (_.isArray(value)) row = { ...value[0], ...row, children: null };
        result.push(row);
        if (!_.isArray(value)) recursion(value, row.children, level + 1);
      });
    })(this.tableData, result, level);
    console.log("obj2Arr", result);
    this.tableData = result;
  }
  summarize() {
    const columns = this.columns();
    const isDepth = arr => _.every(arr, "children");
    (function recursion(tableData) {
      tableData.forEach(row => {
        if (isDepth(row.children)) recursion(row.children);
        columns.forEach(
          column =>
            (row[column] = _.sumBy(row.children, item => item[column] * 1))
        );
      });
    })(this.tableData);
  }
  init() {
    this.graph();
    this.obj2Arr();
    this.summarize();
  }
  get data() {
    return this.tableData;
  }
}

1. 实例化对象的时候，同时传入参数tableData 和 hierarchy。

• tableData 就是 input 中给出的数据库存的那种数据
• hierarchy 则是你想定义的层级关系。['typeClass', 'model', 'color'] 三级两级甚至多级都可以，重点是要按顺序。

2. init的时候发生了三件事：

• 调用this.graph() 先把数据格式整理成类似图的层级数据格式

{
  pbp: {
    m1: { c1: {}, c2:{}, ... },
    m2: { c1: {}, c2:{}, ... },
    m3: { c1: {}, c2:{}, ... }
  }
}

• 调用 this.obj2Arr() 把之前的层级格式转化成数组的格式，把每个对象中的属性都放到 children 中。此时的结构就以及很接近最终的结构了。
• 调用 this.summarize() 从里至外，并汇总加和。

3. 最后定义一个对象的 get 方法，用于获取内部属性。 大功告成！

---

通过这次实践，为了实现对任意多层次结构的处理，对js的闭包有了更深的认识。代码中也用了下 react-hook 新特性。 平台是直接在codesandbox上，感觉美美哒。 如有更优雅的解决方案，欢迎给我的 github 提出issue。😁