javascript - 在 react-bootstrap-table2 中添加带有图标的编辑按钮

Question

我想要表中这样的列来编辑对应于react -Bootstrap_table2中每个编辑按钮的整个相应行

我想做的示例图片：

import React from "react";
import "../../node_modules/bootstrap/dist/css/bootstrap.min.css";
import BootstrapTable from "react-bootstrap-table-next";
import paginationFactory from "react-bootstrap-table2-paginator";
import cellEditFactory from "react-bootstrap-table2-editor";

export class Table extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      data: [
        {
          id: 1,
          dn: "Gob",
          f: "wah",
          ct: "2",
          cr: "acha",
          dsf: 12,
          dsp: 30
        },
        {
          id: 2,
          dn: "Buster",
          f: "wah",
          ct: "5",
          cr: "acha",
          dsf: 12,
          dsp: 30
        },
        {
          id: 3,
          dn: "George Michael",
          f: "wah",
          ct: "4",
          cr: "acha",
          dsf: 12,
          dsp: 30
        },
        {
          id: 3,
          dn: "George Michael",
          f: "wah",
          ct: "4",
          cr: "acha",
          dsf: 12,
          dsp: 30
        },
        {
          id: 3,
          dn: "George Michael",
          f: "wah",
          ct: "4",
          cr: "acha",
          dsf: 12,
          dsp: 30
        },
        {
          id: 3,
          dn: "George Michael",
          f: "wah",
          ct: "4",
          cr: "acha",
          dsf: 12,
          dsp: 30
        },
        {
          id: 3,
          dn: "George Michael",
          f: "wah",
          ct: "4",
          cr: "acha",
          dsf: 12,
          dsp: 30
        },
        {
          id: 3,
          dn: "George Michael",
          f: "wah",
          ct: "4",
          cr: "acha",
          dsf: 12,
          dsp: 30
        },
        {
          id: 3,
          dn: "George Michael",
          f: "wah",
          ct: "4",
          cr: "acha",
          dsf: 12,
          dsp: 30
        },
        {
          id: 3,
          dn: "George Michael",
          f: "wah",
          ct: "4",
          cr: "acha",
          dsf: 12,
          dsp: 30
        },
        {
          id: 1,
          dn: "Gob",
          f: "wah",
          ct: "2",
          cr: "acha",
          dsf: 12,
          dsp: 30
        },
        {
          id: 2,
          dn: "Buster",
          f: "wah",
          ct: "5",
          cr: "acha",
          dsf: 12,
          dsp: 30
        },
        {
          id: 3,
          dn: "George Michael",
          f: "wah",
          ct: "4",
          cr: "acha",
          dsf: 12,
          dsp: 30
        },
        {
          id: 3,
          dn: "George Michael",
          f: "wah",
          ct: "4",
          cr: "acha",
          dsf: 12,
          dsp: 30
        },
        {
          id: 3,
          dn: "George Michael",
          f: "wah",
          ct: "4",
          cr: "acha",
          dsf: 12,
          dsp: 30
        },
        {
          id: 3,
          dn: "George Michael",
          f: "wah",
          ct: "4",
          cr: "acha",
          dsf: 12,
          dsp: 30
        },
        {
          id: 3,
          dn: "George Michael",
          f: "wah",
          ct: "4",
          cr: "acha",
          dsf: 12,
          dsp: 30
        },
        {
          id: 3,
          dn: "George Michael",
          f: "wah",
          ct: "4",
          cr: "acha",
          dsf: 12,
          dsp: 30
        },
        {
          id: 3,
          dn: "George Michael",
          f: "wah",
          ct: "4",
          cr: "acha",
          dsf: 12,
          dsp: 30
        },
        {
          id: 3,
          dn: "George Michael",
          f: "wah",
          ct: "4",
          cr: "acha",
          dsf: 12,
          dsp: 30
        }
      ],
      columns: [
        {
          dataField: "dn",
          text: "Doctor Name",
          sort: true
        },
        {
          dataField: "f",
          text: "Facility",
          sort: true
        },
        {
          dataField: "ct",
          text: "Consultation Type",
          sort: true
        },
        {
          dataField: "cr",
          text: "Consultation Rate",
          sort: true
        },
        {
          dataField: "dsf",
          text: "Doctor Share (Fixed)",
          sort: true,
          style: { backgroundColor: "#e0f7fa" }
        },
        {
          dataField: "dsp",
          text: "Doctor Share(%)",
          sort: true,
          style: { backgroundColor: "#fbe9e7" }
        },
        {
          dataField: "edit",
          text: "Edit",
          editCellStyle: (cell, row, rowIndex, colIndex) => {
            const icon = { style: 'class="glyphicon glyphicon-pencil">' };
            return { icon };
          }
        }
      ]
    };
  }

  render() {
    const selectRow = {
      mode: "checkbox",
      clickToSelect: true
    };

    // const editFormatter = (cell, row, rowIndex, formatExtraData) => {
    //   <Button
    //     icon
    //     labelPosition="left"
    //     onClick={() => deleteMe(rowIndex, rowId)}
    //   >
    //     <Icon name="remove" /> Remove{" "}
    //   </Button>;
    // };
    const customTotal = (from, to, size) => (
      <span className="react-bootstrap-table-pagination-total">
        Showing {from} to {to} of {size} Results
      </span>
    );

    return (
      <div className="container" style={{ marginTop: 50 }}>
        <BootstrapTable
          striped
          hover
          keyField="dn"
          data={this.state.data}
          columns={this.state.columns}
          pagination={paginationFactory({ nextPageText: "Next" })}
          selectRow={selectRow}
          cellEdit={cellEditFactory({ mode: "click" })}
        />
      </div>
    );
  }
}

如何在Edit列中添加按钮？这样我应该能够编辑一行。我知道必须有一些机制来自定义列并添加图像中提到的图标。

标签： javascriptreactjs

Answer 1

您可以在列定义中添加一个虚拟字段，并引用一个格式化程序，该格式化程序可以在每一行的列中呈现一个组件。在我们的例子中，组件是一个 ActionsFormater，我们使用它来呈现几个按钮（查看、编辑、删除），这些按钮可以作用于为每一行传入的 id。

{
    dataField: 'actions',
    text: 'Actions',
    isDummyField: true,
    csvExport: false,
    formatter: this.actionsFormatter,
  },

actionsFormatter = (cell, row) => <ActionsFormatter id={row.id} />;

看起来像这样：