Question

我正在尝试使用react插件'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')
  };

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

有没有一种方法可以确定节点的子级是否显示/隐藏，以此为基础，我可以更改箭头图标。

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

Answer 1

根据要求，此功能已在其最新版本的cp-react-tree-table中添加。

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

小提琴具有更新的功能：https://jsfiddle.net/constantin_p/Lystd2j9/

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

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

1 个答案: