Добавить кнопку в таблице реактивной загрузки

Я использую response-bootstrap-table (var ReactBsTable = require("react-bootstrap-table")).

Я хочу добавить столбец, который просто содержит кнопку в загрузочном файле.

Любая идея, спасибо.

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

Я попытался добавить кнопку, которая отображает идентификатор или данные строки, соответствующие этой кнопке. Я использовал jquery, но я даю идентификатор кнопке, но все эти кнопки будут иметь одинаковый идентификатор, поэтому работает только первая, а остальные нет.

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

reactjs react-bootstrap
person ShMswi    schedule 06.06.2016    source источник

Ответы (2)


arrow_upward
17
arrow_downward

Вы можете создать новую функцию buttonFormatter для добавления кнопки в каждую ячейку столбца

// 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")
);
person iamsaksham    schedule 06.06.2016
comment
Может, я не очень хорошо объяснил свой вопрос. Мне нужна кнопка внутри столбца для каждой строки, а не в заголовке. - person ShMswi; 06.06.2016
comment
Мне нужно получить ячейку или строку, когда я нажимаю на кнопку. Есть какие-нибудь идеи? - person ShMswi; 07.06.2016
comment
Объясните, пожалуйста, архитектуру, которую вы хотите построить? Где вы хотите получить доступ к своим cell и row? Вы можете получить к ним доступ уже в buttonFormatter методе. Попробуйте добавить логику в ту же функцию. В любом случае, я бы посоветовал вам использовать react-bootstrap, поскольку это довольно просто, а документация к нему действительно хороша. Вы можете импортировать только table из react-bootstrap, поэтому размер приложения не будет проблемой. - person iamsaksham; 08.06.2016
comment
@iamsaksham У меня похожая проблема, хотелось бы, чтобы кнопка отображалась условно. Я пытаюсь сравнить ids объектов в моей базе данных и сравнить их с row.id. в зависимости от результата я хотел бы отображать другую кнопку. Не могли бы вы взглянуть на мой вопрос SO: stackoverflow.com/questions/43244914/ - person AziCode; 07.04.2017
comment
есть идеи о том, как архивировать это на response-boostrap-table2? - person Gutimore; 18.07.2018
comment
@Gutimore Привет, я еще не изучал response-bootstrap-table2, позвольте мне изучить его, и я скоро обновлю свой ответ - person iamsaksham; 24.07.2018
comment
@Gultimore Проверьте эту ссылку stackoverflow.com/questions/52553682/ - person M.Sharma; 06.12.2018

arrow_upward
16
arrow_downward

У меня была похожая ситуация, я реализовал этот код, надеюсь он вам поможет.

https://jsfiddle.net/69z2wepo/63821/

var dataFake = [
{
  name: 'Product 1',
  priceUnit: 23.50
},
{
  name: 'Product 2',
  priceUnit: 24.50
},
{
  name: 'Product 3',
  priceUnit: 33.20
}];


class Products extends React.Component {
  onClickProductSelected(cell, row, rowIndex){
   console.log('Product #', rowIndex);
  }

  cellButton(cell, row, enumObject, rowIndex) {
    return (
       <button 
          type="button" 
          onClick={() => 
          this.onClickProductSelected(cell, row, rowIndex)}
       >
       Click me { rowIndex }
       </button>
    )
 }

 render() {
   return (
    <BootstrapTable data={this.props.data}>
     <TableHeaderColumn dataField='name' isKey>
        Name
      </TableHeaderColumn>
      <TableHeaderColumn dataField='priceUnit'>
        Price
      </TableHeaderColumn>
      <TableHeaderColumn
        dataField='button'
        dataFormat={this.cellButton.bind(this)}
      />
   </BootstrapTable>
  )
 }
}



ReactDOM.render(
   <Products data={dataFake} />,
   document.getElementById('container')
);
person Juan Felipe    schedule 01.12.2016
comment
У меня аналогичная проблема, хотелось бы отображать кнопку условно. Я пытаюсь сравнить ids объектов в моей базе данных и сравнить их с row.id. в зависимости от результата я хотел бы отображать другую кнопку. Не могли бы вы взглянуть на мой вопрос SO: stackoverflow.com/questions/43244914/ - person AziCode; 07.04.2017
comment
Это помогло мне разработать привязку this, чтобы иметь возможность вызывать другую функцию из средства визуализации кнопки для dataFormat. Спасибо за пример! - person Kevin Hooke; 03.04.2018