react-data-grid - Können Sie der Toolbar eigene Komponenten hinzufügen?

Question

Ich benutze gerade das React-Data-Grid und ich habe es fast fertig ... Ich habe die Filter-Schaltfläche in der Toolbar angezeigt. Ich brauche eine andere Schaltfläche, um alle ausgewählten Elemente in der Tabelle zu beeinflussen, und ich wollte es auf der linken Seite der Symbolleiste hinzufügen, um Speicherplatz zu sparen. Kennt jemand eine Möglichkeit, dies mit dem React-Data-Grid zu tun?

Ich habe den Code in GitHub angeschaut, und ich sehe das Toolbar-Element, das sehr spezifisch für das React-Data-Grid zu sein scheint, aber es gibt auch das AdvancedToolbar-Element, und ich war mir nicht sicher, ob war etwas, das verwendet werden könnte, um Ihre eigenen benutzerdefinierten Elemente zum React-Data-Grid hinzuzufügen.

Es gibt keine Beispiele für das Hinzufügen von benutzerdefinierten Schaltflächen oder Komponenten mit den react-data-grid Beispielen, aber ich habe mich gefragt, ob jemand anderes so etwas getan hat und teilen könnte, wie Sie es geschafft haben. Vielen Dank.

Ich habe versucht, die vorgeschlagene Lösung von so etwas wie die GroupedColumnPanels verwenden, aber es scheint nicht, wie das Hinzufügen von generic Schaltfläche Objekten das gleiche für etwas zu arbeiten, wie folgt aus:

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>); 

Wenn jemand mir hilft Figur kann man erkennen, aus ... Ich würde es begrüßen.

Answer 1

Ja, Sie können es tun, wie in Row Grouping Example getan.

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

Answer 2

Sie könnten versuchen, die Toolbar Erweiterung Ihre neue Funktionen hinzuzufügen, und dann die Methode macht außer Kraft setzen, zum Beispiel:

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>); 
    } 
} 

Und dann würde die Komponente so etwas wie:

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>} 
    />) 
    } 
} 

Es sieht so aus, als würde die AdvancedToolbar versuchen, so etwas zu tun, aber es erbt nicht die Optionen Zeile hinzufügen oder Filter der Symbolleiste, und die Kinder werden auch außerhalb der leeren gerendert lbar div.