时间戳

首页 > 解决方案 > 当孩子在'cp-react-tree-table'中展开/折叠时如何切换箭头

reactjs - 当孩子在'cp-react-tree-table'中展开/折叠时如何切换箭头

问题描述

我正在尝试使用反应插件“cp-react-tree-table”创建一个树表。我能够很好地渲染表格。但插件不提供显示指示箭头的选项（项目展开/折叠）

这是原始插件的示例： https ://jsfiddle.net/constantin_p/wzjgspe9/

  renderIndexColumn = (data, metadata, toggleChildren) => {
    return (
      <div style={{ paddingLeft: (metadata.depth * 25) + 'px'}} className="cell-wrapper">
        <span className="toggle-button-wrapper" style={{ width: '80px'}}>
          {(metadata.hasChildren)
            ? (
                <span onClick={toggleChildren}>[toggle]</span>
              )
            : ''
          }
        </span>

        <span>{data.name}</span>
      </div>
    );
  }

我对其进行了修改以显示指示性箭头。

但是现在在基于节点展开或折叠切换箭头时遇到了麻烦。

这是修改后的代码：https ://jsfiddle.net/5yvgbrtk/

  renderIndexColumn = (data, metadata, toggleChildren) => {
    return (
      <div style={{ paddingLeft: (metadata.depth * 25) + 'px'}} className="cell-wrapper">
        <span className="toggle-button-wrapper" style={{ width: '80px'}}>
          {(metadata.hasChildren)
            ? (
                <span onClick={(event) => {toggleChildren(); this.arrowChange(event)}}>
                <i className="material-icons">arrow_right</i>
                </span>
              )
            : ''
          }
        </span>

        <span>{data.name}</span>
      </div>
    );
  }

   arrowChange = (event) => {
      event.target.classList.toggle('expanded')
  };

当前的解决方案仅在每个打开的节点都关闭时才有效（单击时图标切换）。当关闭外部节点而不关闭内部节点时，这会产生问题。

有没有一种方法可以识别节点的子节点是否显示/隐藏，据此我可以更改箭头图标。

我知道这个问题是针对插件的，不是很通用。但任何帮助将不胜感激。谢谢

标签： reactjstreetablereact-table

解决方案

根据请求，此功能现已添加到最新版本的 cp-react-tree-table中。

现在添加了一种新方法 - 'hasVisibleChildren' 来检查和切换箭头。

摆弄更新的功能：https ://jsfiddle.net/constantin_p/Lystd2j9/

<i className="material-icons">
   {metadata.hasVisibleChildren ? 'arrow_drop_down' : 'arrow_right' }
</i>

推荐阅读