Question

这是我在React中首次尝试使用MUI-Datatables。我想从复选框中选择的行中获取数据。

// Tree tall tree with many fruit
type Tree struct {
    ID uuid.UUID `json:"id" db:"id"`
    Name string `json:"name" db:"name"`
    Fruit []Fruit `json:"fruit" db:"fruit"`
}

// Fruit fruit found on a tree
type Fruit struct {
    ID int `json:"id"`
    Name string `json:"name"`
}

// Creates a splice of Fruit
type Fruits []Fruit

// Value implements the driver.Valuer interface
func (f Fruits) Value() (driver.Value, error) {
    return json.Marshal(of)
}

// Scan implements the sql.Scanner interface
func (f * Fruits) Scan(value interface{}) error {
    var data = []byte(value.([]uint8))
    return json.Unmarshal(data, &of)
}

这仅给我所选行的索引。有没有办法获取其行的数据。我需要该行的第一个单元格来删除/更新数据库。有谁能够帮助我谢谢。

Answer 1

似乎onRowsSelect的当前API仅提供所选行的索引和所选行数。

要检索行数据，您必须提供一个onRowClick函数。它连续监听click事件。

onRowClick: (rowData, rowState) => {
  console.log(rowData, rowState);
},

Answer 2

即使在选项中，您也需要使用onRowClick

const options = {
    filterType: 'dropdown',
    responsive: 'scrollFullHeight',
    serverSide: true,
    count: total,
    page: page,
    onRowClick: handleRowClick,
}

并将此选项传递到MUI数据表

<MUIDataTable
   title={"Service Request List"}
   data={requests}
   columns={columns}
   options={options}
/>

这是行点击处理程序：

const handleRowClick = (rowData, rowMeta) => {
    console.log(rowData, rowMeta);
};

Answer 3

您可以从onRowsSelect函数中获取所选列的索引：

onRowsSelect : (curRowSelected, allRowsSelected) => {
    console.log("---RowSelect")
    console.log("Row Selected: ", curRowSelected);
    console.log("All Selected: ", allRowsSelected);
  }

并使用此索引来从数据列表中获取数据

Mui数据表上的selectRow

3 个答案: