Question

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

我查看了github中的代码，我看到了Toolbar项，它看起来非常特定于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之外。

Answer 2

是的，你可以像Row Grouping Example中那样完成。

var CustomToolbar = React.createClass({
   render() {
     return (<Toolbar>
       <GroupedColumnsPanel groupBy={this.props.groupBy} 
                            onColumnGroupAdded={this.props.onColumnGroupAdded} 
                            onColumnGroupDeleted={this.props.onColumnGroupDeleted}/>
       </Toolbar>);
   }
 });

Answer 3

尝试根据docs使用flexibleSpaceComponent道具

const ToolbarFlexibleSpace = () => (
  <div>
    <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>
  </div>
);

const MyToolbar = (
  <Toolbar
    flexibleSpaceComponent={ToolbarFlexibleSpace}
  />
);

Answer 4

如果您查看反应数据网格的仓库，请添加：

https://developers.google.com/photos/library/reference/rest/v1/mediaItems#MediaItem

它将呈现传递给工具栏组件的所有子项。

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

因此您可以像这样传递任何按钮：

<Toolbar> <ButtonComponent /></Toolbar>

只要您的按钮具有自己的独立状态，就应该起作用。

干杯

马特

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

4 个答案: