时间戳

首页 > 解决方案 > MDBDataTable：当数据是json文件时如何在列中添加按钮？

javascript - MDBDataTable：当数据是json文件时如何在列中添加按钮？

问题描述

我的 MDBTable 看起来像这样：

//import things
const DatatablePage = () => {
    const data = {
        columns: [
            {
                label: 'Stock Code',
                field: 'StockCode',
                sort: 'asc',
                width: 150
            },
            {
                label: 'Item Description',
                field: 'ItemDes',
                sort: 'asc',
                width: 270
            },
            {
                label: 'Unit Price',
                field: 'UnitPrice',
                sort: 'asc',
                width: 200,
            },
            {
                label: 'In Stock',
                field: 'QUANTITY',
                sort: 'asc',
                width: 100
            },
            {
                label: 'Add to Cart',
                field: null,
                sort: 'asc',
                width: 150
            }
        ],
        rows: table
    };

    return (
        <MDBDataTable
            striped
            bordered
            small
            hover
            theadColor="blue lighten-1"
            data={data}
            btn
            className="blueTable"
        />
    );
}

export default DatatablePage;

JSON 文件如下所示（例如一个示例）：

[{"StockCode":"72800B","ItemDes":"4 PURPLE FLOCK DINNER CANDLES","UnitPrice":2.55,"QUANTITY":17},..]

我希望“添加到购物车”列有一个 MDBButton。我怎么做？我搜索了高低，我发现我必须将该 MDBButton 插入到 JSON 文件中，每个对象。还有其他方法吗？

标签： javascriptreactjsmdbootstrap

解决方案

您可以直接在准备表格行数据的位置设置定义按钮：

const table = [
    {..., 
        addBtn : <button className="btn btn-primary" onClick={() => this.addToCart()}>Add</button>
    }
]

在列中只需定义具有相同名称的字段属性addBtn：

 {
     label: 'Add to Cart',
     field: addBtn
 }

推荐阅读