在反应引导表中添加按钮 [英] Add button in a react-bootstrap-table

问题描述

我正在使用 react-bootstrap-table (var ReactBsTable = require("react-bootstrap-table")).

I'm using react-bootstrap-table (var ReactBsTable = require("react-bootstrap-table")).

我想在 bootstraptable 中添加一个只包含一个按钮的列.

I want to add a column that just contain a button in a bootstraptable .

任何想法谢谢.

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

我尝试添加一个按钮来显示与此按钮对应的 id 或行数据.我使用了 jquery，但我给了按钮一个 id，但所有这些按钮都有相同的 id，所以只有第一个工作，其余的没有.

I tried to add a button which display the id or the row data correspondent to this button. I used jquery but I give an id to the button but all these buttons would have the same id so just the first one work and the rest no.

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

推荐答案

您可以创建一个新函数 buttonFormatter 为列的每个单元格添加按钮

You can make a new function buttonFormatter to add button to every cell of the column

// products will be presented by react-bootstrap-table
var products = [{
  id: 1,
  name: "Item name 1",
  price: 100
},{
  id: 2,
  name: "Item name 2",
  price: 100
},........];

// It's a data format example.
function priceFormatter(cell, row){
  return '<i class="glyphicon glyphicon-usd"></i> ' + cell;
},
function buttonFormatter(cell, row){
  return '<BootstrapButton type="submit"></BootstrapButton>';
}

React.render(
  <BootstrapTable data={products} striped={true} hover={true}>
      <TableHeaderColumn dataField="id" isKey={true} dataAlign="center" dataSort={true}>Product ID</TableHeaderColumn>
      <TableHeaderColumn dataField="name" dataSort={true}>Product Name</TableHeaderColumn>
      <TableHeaderColumn dataField="price" dataFormat={priceFormatter}>Product Price</TableHeaderColumn>
      <TableHeaderColumn dataField="button" dataFormat={buttonFormatter}>Buttons</TableHeaderColumn>
  </BootstrapTable>,
    document.getElementById("app")
);

这篇关于在反应引导表中添加按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！