Bouton ajouter dans une réagir-bootstrap-table
Je suis l'aide de réagir-bootstrap-table (var ReactBsTable = require("react-bootstrap-table")
).
Je veux ajouter une colonne qui contiennent simplement un bouton dans un bootstraptable .
Une idée merci.
<BootstrapTable data={this.state.activities} pagination={true} hover={true} search={true} selectRow={selectRowProp} options={options}>
<TableHeaderColumn isKey={true} dataField="id" hidden {true}>ID</TableHeaderColumn>
<TableHeaderColumn dataField="title" dataSort={true}>Title</TableHeaderColumn>
<TableHeaderColumn dataField="adress" dataSort{true}>Adress</TableHeaderColumn>
///I dont know if here or there is option to use
</BootstrapTable>
J'ai essayé d'ajouter un bouton d'affichage de l'id ou la ligne de données correspondant à ce bouton.
J'ai utilisé jquery mais je donne un id pour le bouton, mais tous ces boutons ont le même id de sorte que le premier travail et le reste non.
<BootstrapTable data={this.state.activities} pagination={true} hover={true} search={true} selectRow={selectRowProp} options={options}>
<TableHeaderColumn isKey={true} dataField="id" hidden {true}>ID</TableHeaderColumn>
<TableHeaderColumn dataField="title" dataSort={true}>Title</TableHeaderColumn>
<TableHeaderColumn dataField="adress" dataSort{true}>Adress</TableHeaderColumn>
<TableHeaderColumn dataField="button" dataFormat={this.buttonFunction}></TableHeaderColumn>
</BootstrapTable>
buttonFunction: function (cell, row) {
var today = new Date().toISOString();
if (row.status === "En cours") {
if (row.dateEnd > today) {
return <Alert_Validate></Alert_Validate>;
} else {
return <label>
<button type="button" id="validatebutton" onClick={this._validateFunction} className="bbtn btn-primary btn-sm"><i className="fa fa-check fa-1x" aria-hidden="true"></i>
</button>
</label>
}
}
},
_validateFunction: function () {
var userid=this.props.params.id;
$("#validatebutton").click(function() {
var $row = $(this).closest("tr");
var activityid = $row.find("td:nth-child(2)");
console.log("activity id :"+activityid.text());
});
Vous devez vous connecter pour publier un commentaire.
Vous pouvez faire une nouvelle fonction
buttonFormatter
à bouton ajouter pour chaque cellule de la colonnecell
etrow
? Vous pouvez y accéder dans lebuttonFormatter
méthode déjà. Essayez de mettre un peu de logique dans la même fonction. De toute façon, je vous suggérons d'utiliserreact-bootstrap
que c'est assez simple et sa documentation est vraiment sympa. Vous ne pouvez importer quetable
dereact-bootstrap
, de sorte que la taille de l'application ne sera pas la question.ids
des objets dans ma base de données et de les comparer à larow.id
. selon le résultat que je voudrais afficher un autre bouton. Pouvez vous s'il vous plaît jeter un oeil à mon DONC, la question: stackoverflow.com/questions/43244914/...J'ai eu une situation similaire, j'ai été mis en œuvre ce code, j'espère que cela vous aide.
https://jsfiddle.net/69z2wepo/63821/
ids
des objets dans ma base de données et de les comparer à larow.id
. selon le résultat que je voudrais afficher un autre bouton. Pouvez vous s'il vous plaît jeter un oeil à mon DONC, la question: stackoverflow.com/questions/43244914/...