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

Question

我想在表像这样的列编辑整个相应行 对应于每个编辑按钮在反应-Bootstrap_表2

我想做的事情的示例图片：

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列中添加按钮？这样我就可以编辑一行了。我知道必须有某种机制来自定义列并添加图像中提到的图标。

Answer 1

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

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

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

看起来像这样：

Answer 2

我创建了这个函数并返回了 EditIcon 按钮组件。

function rankFormatter(cell, row, rowIndex, formatExtraData) { 
     return ( 
           < div 
               style={{ textAlign: "center",
                  cursor: "pointer",
                 lineHeight: "normal" }}>

        < EditIcon
          style={{ fontSize: 20 }}
          color="disabled"  
         /> 
      </div> 
 ); } 

这是我将rankFormatter 函数分配给格式化程序的列。

      { dataField: "edit", 
        text: "Edit",
        sort: false,
        formatter: rankFormatter,
        headerAttrs: { width: 50 },
        attrs: { width: 50, class: "EditRow" } 
      }

这完全按照我想要的方式工作......！