代码之家 › 专栏 › 技术社区 › Saqib Naseeb

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

reactjs javascript

Saqib Naseeb · 技术社区 · 6 年前

对应行 对应于每个编辑按钮 在react引导中_ 表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>
    );
  }
}

编辑 ? 这样我就可以编辑一行了。图片中提到的图标。

2 回复 | 直到 4 年前

Brian 6 年前

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

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

Saqib Naseeb 6 年前

我创建了这个函数并返回了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" } 
      }

这正是我想要的方式。。!

David Romao 4 年前

来自其他用户的解决方案可以工作,但是我注意到当前版本的reactstrap table next内置了对此的支持,所以我将为将来的用户提供这个答案。

通过设置属性可以显示额外的列 expandRow.showExpandColumn 是真的。然后,要仅在单击此列时展开行,请单击属性 expandRow.expandByColumnOnly 可以通过属性设置此列出现的一侧 expandRow.expandByColumnOnly仅限 其值可以是 left right

最后,我们还必须通过属性“expandRow.expandColumnRenderer”传递此列的呈现器,该属性采用如下函数 ({ expanded, rowKey, expandable }) => ()

expandRow示例:

const expandRow = {
    renderer: row => ...,
    expandByColumnOnly: true,
    expandColumnPosition: 'right',
    showExpandColumn: true,
    expandColumnRenderer: ({expanded, rowKey, expandable}) => {
        const onclick = (event) => {
            console.log("clicked on row ", rowKey)
        }

        if (!expandable) {
            return;
        }
        return (
            <button type="button" onClick={onclick} className="btn btn-outline-primary"/>
        );
    }
};

...

<BootstrapTable ... expandRow={expandRow} />

Documentation here