Tree

这一章，我们利用 DataSet 来实现一个简单的 Tree，首先来看看我们的目标 Tree 长什么样：

Tree.png

经典的三层布局，这种情况下如果使用传统 Tree 组件的话，一般需要前端自行处理数据，将后端返回的一维数据转换成相互嵌套（树形）的。这里我们看看基于 DataSet 的 Pro Tree 组件如何实现。

实际上，利用 DataSet 实现的方案可以说是后端最为友好的方案了。

往往后端返回给前端的树形结构数据也是先打平后嵌套处理，所以直接传打平的给前端，前端去做树形渲染处理对后端比较友好。

构造 DataSet 对象

同样的，我们新建一个简单的 DataSet 构造对象：

  1. // DataSet.js
  3. const DataSet = {
  4.     primaryKey: 'id',
  5.     queryUrl: '/tree.mock',
  6.     autoQuery: true,
  7.     // 实现 Tree 数据平铺转嵌套的关键
  8.     parentField: 'parentId',
  9.     idField: 'id',
  10.     // 布尔值，收集哪个 Tree 节点被展开了
  11.     expandField: 'expand',
  12.     fields: [
  13.       { name: 'id', type: 'number' },
  14.       { name: 'expand', type: 'boolean' },
  15.       { name: 'parentId', type: 'number' },
  16.     ],
  17.     transport: {
  18.         read: {
  19.             url: 'https://www.fastmock.site/mock/423302b318dd24f1712751d9bfc1cbbc/mock/tree',
  20.             method: 'post',
  21.         }
  22.     },
  23.     events: {
  24.       // 这里新增的事件与下面的 checkable 配合，当一个节点被选中时，就会触发下面的事件
  25.       select: ({ record, dataSet }) => console.log('select', record, dataSet),
  26.       unSelect: ({ record, dataSet }) => console.log('unSelect', record, dataSet),
  27.     },
  28. };
  29. export default DataSet;

Pro 的 Tree 需要的数据源结构是打平的，这个数据转换的逻辑已经被封装到了 Tree 组件内部，不需要开发者进行任何介入。开发者只需要传入这两个字段使用即可。

组件内部实现平铺转嵌套的核心字段，实际上就是上面 DataSet 中存在的 parentField 字段和 idField 字段。idField 字段用来表示一条 record 本身的唯一性，而 parentField 包含的是当前这条 record 的父级元素指向谁，这两个字段配合，即可将平铺的数据转换成 Tree 所需的嵌套数据。

渲染实现

这一部分就比 Table 和 Form 简单太多了，我们只需要将 dataSet 绑定到 Tree 上就能完成渲染：

  1. // Tree.jsx
  3. import React from 'react';
  4. import TreeDS from './DataSet';
  5. import { DataSet, Tree } from 'choerodon-ui/pro';
  7. const { Column } = Table;
  9. class App extends React.Component {
  10.     constructor(props) {
  11.         super(props);
  12.         this.treeDataSet = new DataSet(TreeDS);
  13.     }    
  15.     nodeRenderer({ record }) {
  16.         return record.get('text');
  17.     }
  19.     render() {
  20.         return (
  21.             <Tree
  22.                 dataSet={this.ds}
  23.                 // 这个标定 Tree 中的字段是否可选
  24.                 checkable
  25.                 // 这个用来覆盖 Tree 本身的节点渲染
  26.                 renderer={this.nodeRenderer}
  27.             />
  28.         )
  29.     }
  30. }
  31. export default App;

这样，一个简单的 Tree 就渲染好了。