suchen

Heim  >  Fragen und Antworten  >  Hauptteil

So fügen Sie jeder Zeile steuerbare Kontrollkästchen hinzu: Implementierungsmethode in MUI Datagrid

Ich weiß, dass man mit renderCell ein Kontrollkästchen oder ein Textfeld hinzufügen kann, und es funktioniert, ich kann das Kontrollkästchen sehen:

Allerdings verstehe ich nicht, wie ich das Kontrollkästchen/Textfeld jeder Zeile einzeln steuern soll. Was wäre zum Beispiel, wenn ich möchte, dass Zeile 1 die Variante „Füllung“ des TextFields und Zeile 2 die Variante „Umriss“ hat?

import * as React from "react";
import {DataGrid} from "@mui/x-data-grid";
import {Box, Checkbox, TextField} from "@mui/material";

const columns = [
  {field: "id", headerName: "ID", width: 30},
  {field: "col1", headerName: "Column 1", width: 150},
  {field: "col2", headerName: "Column 2", width: 150},
  {field: "col3", headerName: "Column 3", width: 150, renderCell: (params) => <Checkbox />},
];

const rows = [
  {id: 1, col1: "Example", col2: "Content", col3: ??????},
  {id: 2, col1: "Example", col2: "Content", col3: ??????},
  {id: 3, col1: "Example", col2: "Content", col3: ??????},
];

export default function Table() {
  return (
    <Box sx={{}}>
      <DataGrid rows={rows} columns={columns} />
    </Box>
  );
}

Ich habe versucht, eine neue <Checkbox /> ,其中包含诸如 <Checkbox defaultChecked/> ähnliche Requisite hinzuzufügen, aber das hat natürlich nicht funktioniert.

P粉329425839P粉329425839348 Tage vor587

Antworte allen(1)Ich werde antworten

  • P粉402806175

    P粉4028061752024-03-30 00:33:52

    请看一下我为您提供的示例。希望我能回答你的问题。 https://codesandbox.io/s/optimistic-leaf-xm32lk ?file=/Demo.tsx

    import * as React from "react";
    import { DataGrid, GridColDef, GridRenderCellParams } from "@mui/x-data-grid";
    import Checkbox from "@mui/joy/Checkbox";
    
    function RenderCheckBox(props: GridRenderCellParams<any, boolean>) {
      const [checked, setChecked] = React.useState(props.value); // Initiated react binded value with param from `rows`
    
      // Handler for user clicks to set checkbox mark or unset it
      const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        setChecked(event.target.checked);
      };
      //The bind for dynamic mark/unmark: checked={checked}
      //The handler for user clicks: onChange={handleChange}
      return (
        <Checkbox
          label="some text"
          size="lg"
          checked={checked} 
          onChange={handleChange} 
        />
      );
    }
    
    const columns: GridColDef[] = [
      { field: "id", headerName: "ID", width: 30 },
      { field: "col1", headerName: "Column 1", width: 150 },
      { field: "col2", headerName: "Column 2", width: 150 },
      {
        field: "checked",
        headerName: "Column 3",
        width: 150,
        renderCell: RenderCheckBox
      }
    ];
    // Here 'checked' field will pass the param to component.
    const rows = [
      { id: 1, col1: "Example", col2: "Content", checked: true },
      { id: 2, col1: "Example", col2: "Content", checked: false },
      { id: 3, col1: "Example", col2: "Content", checked: false }
    ];
    
    export default function RenderCellGrid() {
      return (
        <div style={{ height: 300, width: "100%" }}>
          <DataGrid rows={rows} columns={columns} />
        </div>
      );
    }

    Antwort
    0
  • StornierenAntwort