react-data-grid - 您可以将自己的组件添加到工具栏吗？

Question

我目前正在使用react-data-grid,我几乎完成了......我在工具栏中显示了过滤器按钮.我需要另一个按钮来影响表格中的所有选定项目,我想将它添加到工具栏的左侧,以节省空间.有没有人知道用react-data-grid做这个的方法？

我查看了github中的代码,我看到了工具栏项,它看起来非常特定于react-data-grid,但也有AdvancedToolbar项,我不确定是否可以用于将您自己的自定义项添加到react-data-grid.

没有任何使用react-data-grid示例添加自定义按钮或组件的示例,但我想知道是否有其他人做过这样的事情并且可以分享您是如何完成它的.谢谢.

我尝试了使用类似的东西的建议解决方案,GroupedColumnPanels但它似乎不像添加通用按钮对象,如下所示:

const customToolbar = (<Toolbar>
            <button type="button" className="btn btn-success" style={{ marginRight: '5px' }} onClick={this.handleRefresh}>
                <i className="glyphicon glyphicon-refresh" /> Refresh
            </button>
            <button type="button" className="btn btn-warning" style={{ marginRight: '5px' }} onClick={this.handleReset}>
                <i className="glyphicon glyphicon-warning-sign" /> Reset Page
            </button>
            <button type="button" className="btn btn-danger" onClick={this.handleHideRows}>
                <i className="glyphicon glyphicon-eye-close" /> Hide Selected
            </button>
        </Toolbar>);

如果有人能帮我解决这个问题......我会很感激.

Answer 1

您可以尝试扩展工具栏以添加新功能,然后覆盖渲染方法,例如:

export class CustomToolbar extends Toolbar {
  onDeleteRow(e) {
    if (this.props.onDeleteRow !== null && this.props.onDeleteRow instanceof Function) {
      this.props.onDeleteRow(e);
    }
  }

  renderDeleteRowButton() {
    if (this.props.onDeleteRow ) {
      return (<button type="button" className="btn" onClick={this.onDeleteRow.bind(this)}>
        {this.props.deleteRowButtonText}
    </button>);
    }
  }

  render() {
    return (
      <div className="react-grid-Toolbar">
        <div className="tools">
        {this.renderAddRowButton()}
        {this.renderDeleteRowButton()}
        {this.renderToggleFilterButton()}
        </div>
      </div>);
  }
}

然后你的组件将是这样的:

export class MyGridComponent extends React.Comopnent {
  // other code 
  handleDeleteRow(e) {
    console.log("deleting selected rows ", e)
    // handle the deletion
  }
  render() {
    return (<ReactDataGrid
      // other properties
      toolbar={<CustomToolbar onAddRow={this.handleAddRow.bind(this)}
            onDeleteRow={this.handleDeleteRow.bind(this)}
            deleteRowButtonText="Delete Selected"></CustomToolbar>}
    />)
  }
}

看起来AdvancedToolbar可能正在尝试执行此类操作,但它不会继承工具栏的"添加行"或"过滤器"选项,并且子项将呈现在空工具栏div之外.