关于javascript:基于Antd库实现可编辑树组件

>> 博客原文链接

I 前言

Antd 是基于 Ant Design 设计体系的 React UI 组件库，次要用于研发企业级中后盾产品，在前端很多我的项目中都有应用。除了提供一些比拟根底的例如 Button、Form、Input、Modal、List… 组件，还有Tree、Upload、Table 这几个性能集成度比拟高的简单组件，其中 Tree 组件的利用场景挺多的，在一些波及显示树形构造数据的性能中能够体现：目录构造展现、族谱关系图 …，总之在须要出现多个父子层级之间构造关系的场景中就可能用到这种 Tree 组件，Antd 尽管官网提供了 Tree 组件然而它的性能比拟无限，定位是次要负责对数据的展现工作，树数据的增删查改这些性能根本没有反对，然而 Antd Tree 的属性反对比较完善，咱们能够基于 Antd 树来实现反对编辑性能的 EditableTree 组件。

源码：nojsja/EditableTree

曾经公布为 npm 组件，能够间接装置：

$: npm install editable-tree-antd
# or
$: yarn add editable-tree-antd

预览

II 功能分析

1. 非叶子节点的节点名不为空，节点值为空或数组
2. 叶子节点的节点名可为空，节点值不可为空
3. 点击树节点进入节点编辑状态，提交后实现节点数据更新
4. 非叶子节点每一层级都反对兄弟节点增加、子节点增加、以后节点删除以及节点名、节点值编辑
5. 叶子节点只反对以后节点删除和以后节点的节点名、节点值编辑
6. 树的每一层级的节点名和节点值是否能够编辑、节点是否能够删除均能够通过传入的节点数据属性管制，默认状况下所有节点可编辑、可删除
7. 树的层级深度反对属性配置，子节点深度不能超过树的最大深度值，默认为 50 层子级
8. 新增反对：将一段 yaml 字符串解析为多个树节点

III 实现解析

基于 React / Antd / Mobx

Antd Tree 文档

文件构造

— index.js — 入口文件，数据初始化、组件生命周期管制、递归调用 TreeNode 进行数据渲染
— Tree.js — Tree 类用于抽象化树形数据的增删查改操作，相当于 Model 层
— lang.js — 多语言文件
— TreeNode.jsx — 单层树节点组件，用于隔离每层节点状态显示和操作
——- TreeNodeDisplay.jsx — 非编辑状态下树数据的展现
——- TreeNodeNormalEditing.jsx — 一般节点处于编辑状态下时
——- TreeNodeYamlEditing.jsx — yaml 节点处于编辑状态下时
——- TreeNodeActions.jsx — 该层级树节点的所有性能按钮组
— styles / editable-tree.css — 树款式
— styles / icon-font / * — 图标依赖的 iconfont 文件

实现原理

• 先来看下 Antd 原生须要 Tree 数据格式：

[
  {
    title: 'parent 1',
    key: '0-0',
    children: [
      {
        title: 'parent 1-0',
        key: '0-0-0',
        disabled: true,
        children: [
          {
            title: 'leaf',
            key: '0-0-0-0',
            disableCheckbox: true,
          },
          {
            title: 'leaf',
            key: '0-0-0-1',
          }
        ]
      },
      {
        title: 'parent 1-1',
        key: '0-0-1',
        children: [{title: <span style={{ color: '#1890ff'}}>sss</span>, key: '0-0-1-0' }]
      }
    ]
  }
]

• 每一层级节点除了须要根本的 title(文字 label)、key(节点惟一标识)、children(子结点列表) 属性外，还有其它很多自定义参数比方配置节点是否选中等等，这里就不对其它性能配置项做细钻研了，感兴趣能够查看官网文档。
• 在官网阐明中 title 值其实不只是一个字符串，还能够是一个 ReactNode，也就是说 Antd 官网为咱们提供了一个树革新的后门，咱们能够用本人的渲染逻辑来替换官网的 title 渲染逻辑，所以关键点就是拆散这个 title 渲染为一个独立的 React 组件，在这个组件里咱们独立治理每一层级的树节点数据展现，同时又向这个组件裸露操作整个树形数据的办法。另一方面 Tree 型数据个别都须要应用递归逻辑来进行节点渲染和数据增删查改，这里 TreeNode.js 就是递归渲染的 Component 对象，而增删查改逻辑咱们把它拆散到Tree.jsModel 外面进行治理，这样子思路就比拟清晰了。

关键点阐明：index.js

入口文件，用于：数据初始化、组件生命周期管制、递归调用 TreeNode 进行数据渲染、加载 lang 文件等等

• 在生命周期 componentDidMount 中咱们初始化一个 Tree Model，并设置初始化 state 数据。
• 在 componentWillReceiveProps 中咱们更新这个 Model 和 state 以管制界面状态更新，留神应用的 Js 数据深比拟函数 deepComparison 用来防止不必要的数据渲染，数据深比拟时要应用与树显示相干的节点属性 裸数据 (见办法getNudeTreeData)，比方nodeName，nodeValue 等属性，其它的无关属性比方 id 和depth须要疏忽。
• formatNodeData次要性能是将咱们传入的自定义树数据递归“翻译”成 Antd Tree 渲染须要的原生树数据。

[
  {
    nodeName: '出版者',
    id: '出版者', // unique id, required
    nameEditable: true, // is level editable (name), default true
    valueEditable: true, // is level editable (value), default true
    nodeDeletable: false, // is level deletable, default true
    nodeValue: [
      {
        nodeName: '出版者形容',
        isInEdit: true, // is level in edit status
        id: '出版者形容',
        nodeValue: [
          {
            nodeName: '出版者名称',
            id: '出版者名称',
            nodeValue: '出版者 A',
          },
          {
            nodeName: '出版者地',
            id: '出版者地',
            valueEditable: false,
            nodeValue: '出版地 B1',
          },
        ],
      }
    ],
  },
  ...
];

• 代码逻辑：

...
class EditableTree extends Component {
  state = {treeData: [], // Antd Tree 须要的结构化数据
    expandedKeys: [], // 将树的节点开展 / 折叠状态纳入管制
    maxLevel: 50,；// 默认最大树深度
    enableYaml: false,
    lang: 'zh_CN'
  };
  dataOrigin = []
  treeModel = null
  key=getRandomString()

  /* 组件挂载后初始化树数据，生成 treeModel，更新 state */
  componentDidMount() {const { data, maxLevel = 50, enableYaml, lang="zh_CN"} = this.props;

    if (data) {
      this.dataOrigin = data;
      TreeClass.defaultTreeValueWrapper(this.dataOrigin); // 树节点增加默认值
      TreeClass.levelDepthWrapper(this.dataOrigin); // 增加层级深度属性
      const formattedData = this.formatTreeData(this.dataOrigin); // 生成格式化后的 Antd Tree 数据
      this.updateTreeModel({data: this.dataOrigin, key: this.key}); // 更新 model
      const keys = TreeClass.getTreeKeys(this.dataOrigin); // 获取各个层级的 key，默认开展所有层级
      this.setState({
        treeData: formattedData,
        expandedKeys: keys,
        enableYaml: !!enableYaml,
        maxLevel,
        lang,
      });
    }
  }

  /* 组件 props 数据更新后更新 treeModel 和 state */
  componentWillReceiveProps(nextProps) {const { data, maxLevel = 50, enableYaml, lang="zh_CN"} = nextProps;
    this.setState({enableYaml: !!enableYaml, lang, maxLevel});
    // 深比拟函数防止不必要的树更新
    if (
      !deepComparison(TreeClass.getNudeTreeData(deepClone(this.dataOrigin)),
          TreeClass.getNudeTreeData(deepClone(data))
        )
    ) {
      this.dataOrigin = data;
      TreeClass.defaultTreeValueWrapper(this.dataOrigin);
      TreeClass.levelDepthWrapper(this.dataOrigin);
      const formattedData = this.formatTreeData(this.dataOrigin);
      this.updateTreeModel({data: this.dataOrigin, key: this.key});
      const keys = TreeClass.getTreeKeys(this.dataOrigin);
      this.onDataChange(this.dataOrigin); // 触发 onChange 回调钩子
      this.setState({
        treeData: formattedData,
        expandedKeys: keys
      });
    }
  }

  /* 批改节点 */
  modifyNode = (key, treeNode) => {const modifiedData = this.treeModel.modifyNode(key, treeNode); // 更新 model
    this.setState({treeData: this.formatTreeData(modifiedData), // 更新 state, 触发数据回调钩子
    }, () => this.onDataChange(this.dataOrigin));
  }

  /**
   * 以下省略的办法具备跟 modifyNode 类似的逻辑
   * 调用 treeModel 批改数据而后更新 state
   **/

  /* 进入编辑模式 */
  getInToEditable = (key, treeNode) => {...}
  /* 增加一个兄弟节点 */
  addSisterNode = (key) => {...}
  /* 增加一个子结点 */
  addSubNode = (key) => {...}
  /* 移除一个节点 */
  removeNode = (key) => {...}

  /* 递归生成树节点数据 */
  formatNodeData = (treeData) => {let tree = {};
    const key = `${this.key}_${treeData.id}`;
    if (treeData.toString() === '[object Object]' && tree !== null) {
      tree.key = key;
      treeData.key = key;
      tree.title = /* 关键点 */
        (<TreeNode
          maxLevel={this.maxLevel}
          focusKey={this.state.focusKey}
          treeData={treeData}
          enableYaml={this.state.enableYaml}
          modifyNode={this.modifyNode}
          addSisterNode={this.addSisterNode}
          addExpandedKey={this.addExpandedKey}
          getInToEditable={this.getInToEditable}
          addSubNode={this.addSubNode}
          addNodeFragment={this.addNodeFragment}
          removeNode={this.removeNode}
          lang={lang(this.state.lang)}
        />);
      if (treeData.nodeValue instanceof Array) tree.children = treeData.nodeValue.map(d => this.formatNodeData(d));
    } else {tree = '';}
    return tree;
  }

  /* 生成树数据 */
  formatTreeData = (treeData) => {let tree = [];
    if (treeData instanceof Array) tree = treeData.map(treeNode => this.formatNodeData(treeNode));
    return tree;
  }

  /* 更新 tree model */
  updateTreeModel = (props) => {if (this.treeModel) {this.treeModel.update(props);
    } else {const _lang = lang(this.state.lang);
      this.treeModel = new TreeClass(
        props.data,
        props.key,
        {
          maxLevel: this.state.maxLevel,
          overLevelTips: _lang.template_tree_max_level_tips,
          completeEditingNodeTips: _lang.pleaseCompleteTheNodeBeingEdited,
          addSameLevelTips: _lang.extendedMetadata_same_level_name_cannot_be_added,
        }
      );
    }
  }


  /* 树数据更新钩子，提供给上一层级调用 */
  onDataChange = (modifiedData) => {const { onDataChange = () => {}} = this.props;
    onDataChange(modifiedData);
  }

  ...

  render() {const { treeData} = this.state;
    return (
      <div className="editable-tree-wrapper">
      {(treeData && treeData.length) ?
          <Tree
            showLine
            onExpand={this.onExpand}
            expandedKeys={this.state.expandedKeys}
            // defaultExpandedKeys={this.state.expandedKeys}
            defaultExpandAll
            treeData={treeData}
          />
        : null
      }
      </div>
    );
  }
}

EditableTree.propTypes = {
  data: PropTypes.array.isRequired, // tree data, required
  onDataChange: PropTypes.func, // data change callback, default none
  maxLevel: PropTypes.number, // tree max level, default 50
  lang: PropTypes.string, // lang - zh_CN/en_US, default zh_CN
  enableYaml: PropTypes.bool // enable it if you want to parse yaml string when adding a new node, default false
};

关键点阐明：Tree.js

Tree 类用于抽象化树形数据的增删查改操作，相当于 Model 层

逻辑不算简单，很多都是递归树数据批改节点，具体代码不予赘述：

export default class Tree {
  constructor(data, treeKey, {
    maxLevel,
    overLevelTips = '曾经限度模板树的最大深度为：',
    addSameLevelTips = '同层级曾经有同名节点被增加！',
    completeEditingNodeTips = '请欠缺以后正在编辑的节点数据！',
  }) {
    this.treeData = data;
    this.treeKey = treeKey;
    this.maxLevel = maxLevel;
    this.overLevelTips = overLevelTips;
    this.completeEditingNodeTips = completeEditingNodeTips;
    this.addSameLevelTips = addSameLevelTips;
  }

  ...

  /* 为输出数据笼罩默认值 */
  static defaultTreeValueWrapper() { ...}

  /* 查问是否有节点正在编辑 */
  static findInEdit(items) {...}

  /* 进入编辑模式 */
  getInToEditable(key, { nodeName, nodeValue, id, isInEdit} = {}) {...}

  /* 批改一个节点数据 */
  modifyNode(key, {
    nodeName = '', nodeValue ='', nameEditable = true,
    valueEditable = true, nodeDeletable = true, isInEdit = false,
  } = {}) {...}

  /* 增加一个指标节点的兄弟结点 */
  addSisterNode(key, {
    nodeName = '', nameEditable = true, valueEditable = true,
    nodeDeletable = true, isInEdit = true, nodeValue = '',
  } = {}) {...}

  /* 增加一个指标节点的子结点 */
  addSubNode(key, {
    nodeName = '', nameEditable = true, valueEditable = true,
    nodeDeletable = true, isInEdit = true, nodeValue = '',
  } = {}) {...}

  /* 移除节点 */
  removeNode(key) {...}

  /* 获取树数据 */
  getTreeData() {return deepClone(this.treeData);
  }

  /* 更新树数据 */
  update({data, key}) {
    this.treeData = data;
    this.treeKey = key;
  }
}

关键点阐明：TreeNode.jsx

示意单个树节点的 React 组件，以下均为其子组件，用于展现各个状态下的树层级

• TreeNodeDisplay.jsx — 非编辑状态下树数据的展现
• TreeNodeNormalEditing.jsx — 一般节点处于编辑状态下时
• TreeNodeYamlEditing.jsx — yaml 节点处于编辑状态下时
• TreeNodeActions.jsx — 该层级树节点的所有性能按钮组

每个层级节点都能够增加子节点、增加同级节点、编辑节点名、编辑节点值、删除以后节点 (一并删除子节点)，nameEditable 属性管制节点名是否可编辑，valueEditable树形管制节点值是否可编辑，nodeDeletable属性管制节点是否能够删除，默认值都是为true。

isInEdit属性表明以后节点是否处于编辑状态，处于编辑状态时显示输入框，否则显示文字，当点击文字时以后节点变成编辑状态。

简略的页面展现组件，具体实现见 源码：TreeNode.jsx

IV 遇到的问题 & 解决办法

树数据更新渲染导致的节点折叠状态重置

• 设想咱们关上了树的两头某个层级进行节点名编辑，编辑实现后点击提交，树从新渲染刷新，而后之前编辑的节点又从新折叠起来了，咱们须要从新关上那个层级看是否编辑胜利，这种应用体验无疑是苦楚的。
• 造成树节点折叠状态重置的起因就是树的从新渲染，且这个折叠状态的控制数据并没有裸露到每个 TreeNode 上，所以在咱们本人实现的 TreeNode 中无奈独立管制树节点的折叠 / 开展。
• 查看官网文档，传入树的 expandedKeys 属性能够显式指定整颗树中须要开展的节点，expandedKeys即须要开展节点的 key 值数组，为了将每个树节点折叠状态变成受控状态，咱们将 expandedKeys 存在 state 或 mobx store 中，并在树节点折叠状态扭转后更新这个值。

...
render() {const { treeData} = this.state;
    return (
      <div className="editable-tree-wrapper">
      {(treeData && treeData.length) ?
          <Tree
            showLine
            onExpand={this.onExpand}
            expandedKeys={this.state.expandedKeys}
            treeData={treeData}
          />
        : null
      }
      </div>
    );
  }

Antd 格子布局塌陷

• 在 TreeNode.jsx 组件中有一个比较严重的问题，如上文提到的 EditableTree 的某一层级处于编辑状态时，该层级中的文字展现组件 <span> 会变成输出组件 <input>，我发现在编辑模式下 Antd 的Row/Col 格子布局失常工作，在非编辑模式下因为节点内容从块元素 input 变成了内联元素span，格子布局塌陷了，这种状况下即便申明了 Col 占用的格子数量，内容仍旧应用最小宽度展现，即文字占用的宽度。
• 揣测起因是 Antd 的 Row/Col 格子布局本身的问题，没有深究，这边只是将 <span> 元素换成了 <div> 元素，并且在款式中申明 div 占用的最小宽度 min-width，同时设置max-width 和overflow防止文字元素超出边界。

V 结语

其实 Tree 组件曾经不止写过一次了，之前基于 Semantic UI 写过一次，不过因为 Semantic UI 没有 Tree 的根底实现，所以基本上是齐全本人重写的，基本思路其实跟这篇文章写的大致相同，也是递归更新渲染节点，将各个节点的折叠状态放入 state 进行受控治理，不过这次实现的 EditableTree 最次要一点是拆散了 treeModel 的数据管理逻辑，让界面操作层 TreeNode.jsx、数据管理层Tree.js 和管制层 index.jsx 齐全拆散开来，构造明了，前期即便想扩大性能也未尝不可。又是跟 Antd 斗智斗勇的一次(苦笑脸)…