Material-UI从DataGrid获取所有行 [英] Material-UI get all rows from DataGrid

问题描述

有人知道如何从Material-UI DataGrid 获取所有行数据吗?例如，我更改了 DataGrid 行中的一些值，并希望在进行更改后获取所有行.示例:

 从"@ material-ui/core"导入{Button，TextField}；从"@ material-ui/data-grid"导入{DataGrid}；从时刻"导入时刻；const列= [{字段:"Col1"，headerName:"Col1"，弹性:1.0，disableClickEventBubbling:是，可排序:假，disableColumnMenu:true}，{字段:"Col2"，headerName:"Col2"，弹性:1.0，disableClickEventBubbling:是，可排序:假，disableColumnMenu:true，renderCell:(params)=>(<>< TextFieldtype ="date"defaultValue = {moment(Date.parse(params.row.Date)).format("YYYY-MM-DD"；)}InputLabelProps = {{缩小:正确}}/></>)}，{字段:"Col3"，headerName:"Col3"，弹性:1.0，disableClickEventBubbling:是，可排序:假，disableColumnMenu:true，renderCell:(params)=>< TextField/>}];常量行= [{id:1，Col1:"col1数据"，Col2:null，Col3:null}，{id:2，Col1:"col2数据"，Col2:null，Col3:null}，{id:3，Col1:"col3数据"，Col2:null，Col3:null}];导出默认函数App(){const handleClickButton =()=>{console.log(rows);//我想查看网格更改的数据};返回 (< div className =" App"><数据网格密度=紧密"行= {行}列= {columns}pageSize = {25}autoHeight = {true}hideFooter = {true}/><按钮变体＝包含".color =原色"onClick = {handleClickButton}>向我显示网格数据</按钮></div>);} 

解决方案

Material-UI 的 DataGrid 在内部存储行数据并具有

Does anyone know how to get all row data from Material-UI DataGrid? For example, I changed some values inside DataGrid rows and want to get all my rows after making changes. Example:

import { Button, TextField } from "@material-ui/core";
import { DataGrid } from "@material-ui/data-grid";
import moment from "moment";

const columns = [
  {
    field: "Col1",
    headerName: "Col1",
    flex: 1.0,
    disableClickEventBubbling: true,
    sortable: false,
    disableColumnMenu: true
  },
  {
    field: "Col2",
    headerName: "Col2",
    flex: 1.0,
    disableClickEventBubbling: true,
    sortable: false,
    disableColumnMenu: true,
    renderCell: (params) => (
      <>
        <TextField
          type="date"
          defaultValue={moment(Date.parse(params.row.Date)).format(
            "YYYY-MM-DD"
          )}
          InputLabelProps={{
            shrink: true
          }}
        />
      </>
    )
  },
  {
    field: "Col3",
    headerName: "Col3",
    flex: 1.0,
    disableClickEventBubbling: true,
    sortable: false,
    disableColumnMenu: true,
    renderCell: (params) => <TextField />
  }
];

const rows = [
  { id: 1, Col1: "col1 data", Col2: null, Col3: null },
  { id: 2, Col1: "col2 data", Col2: null, Col3: null },
  { id: 3, Col1: "col3 data", Col2: null, Col3: null }
];

export default function App() {
  const handleClickButton = () => {
    console.log(rows); //I want to see grid changed data
  };

  return (
    <div className="App">
      <DataGrid
        density="compact"
        rows={rows}
        columns={columns}
        pageSize={25}
        autoHeight={true}
        hideFooter={true}
      />
      <Button variant="contained" color="primary" onClick={handleClickButton}>
        Show me grid data
      </Button>
    </div>
  );
}

解决方案

Material-UI's DataGrid stores the row data internally and has its own API to modify the row data. This is how you update the row data when onChange fires:

{
  field: "Col3",
  headerName: "Col3",
  renderCell: (params) => (
    <TextField
      onChange={(e) =>
        params.api.updateRows([{ ...params.row, Col3: e.target.value }])
      }
    />
  )
}

To read the current row state of DataGrid, you can use apiRef.current.getRowModels(). But apiRef comes from Material-UI X Pro. If you still want to access it, you have to use the following hack:

function useApiRef() {
  const apiRef = useRef(null);
  const _columns = useMemo(
    () =>
      columns.concat({
        field: "__HIDDEN__",
        width: 0,
        renderCell: (params) => {
          apiRef.current = params.api;
          return null;
        }
      }),
    [columns]
  );

  return { apiRef, columns: _columns };
}

Usage

const { apiRef, columns } = useApiRef();
const handleClickButton = () => {
  console.log(apiRef.current.getRowModels());
};

return (
  <>
    <DataGrid rows={rows} columns={columns} />
    <Button onClick={handleClickButton}>
      Show data
    </Button>
  </>
);

Live Demo

这篇关于Material-UI从DataGrid获取所有行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！