我需要将 GridToolbarColumnsButton（MUI 中的 DataGrid 子组件）中的切换开关更改为复选框

Question

我正在一个网站上工作，其中一个页面包含表格数据，其中数据来自后端用于过滤该表格我使用了 datagrid({...data}components={{toolbar: CustomToolbar) 中的 Mui 过滤器}}），其中之一是 GridToolbarColumnsButton 过滤器，我在此处上传了图片，我需要“复选框”而不是那些开关，我应该为此做什么？

我尝试过使用检查元素并使用：

componentsProps={{
    panel: {

      sx: {
        '& .MuiPopper-root': {
          // color: 'red',
          fontSize: 15,
          backgroundColor:'red'
        },
       }
     }
   }}

数据网格内的此代码用于覆盖，但它不会发生

Answer 1

从数据网格版本 v6.13.0 开始，没有直接的方法来覆盖 GridToolbarColumnsButton。

我们可以借助 api 参考 useGridApiContext 实现相同的目标，就像我在下面所做的那样，

输出：

（我跳过了导入语句，请添加它...） 自定义弹出复选框：

export default function CustomPopupCheckboxes(props) {
  const apiRef = useGridApiContext();

  const [visibleColumns, setVisibleColumns] = useState([]);
  const [columns, setColumns] = useState(apiRef.current.getVisibleColumns());

  useEffect(() => {
    setVisibleColumns(apiRef.current.getVisibleColumns());
  });

  return (
    <Menu
      id="long-menu"
      anchorEl={props.moreMenuAnchorEl}
      open={props.openColumnsMenu}
      onClose={() => props.setOpenColumnsMenu(!props.openColumnsMenu)}
    >
      {columns.map((column) => {
        let isVisible = visibleColumns.filter((x) => x.field == column.field);
        return (
          <div style={column.hideable ? {} : { display: "none" }}>
            <Checkbox
              checked={isVisible.length != 0 ? true : false}
              onChange={(e) => {
                apiRef.current.setColumnVisibility(
                  column.field,
                  e.target.checked
                );
                setVisibleColumns(apiRef.current.getVisibleColumns());
              }}
            />
            {column.headerName}
          </div>
        );
      })}
    </Menu>
  );
}

自定义工具栏：

export default function CustomToolbar(props) {
  const [openColumnsMenu, setOpenColumnsMenu] = useState(false);
  const [columnsMenuAnchorEl, setColumnsMenuAnchorEl] = useState(null);

  return (
    <GridToolbarContainer
      style={{
        display: "inline-block",
        textAlign: "right",
        marginBottom: "10px",
      }}
    >
        <CustomIconButton
          onClick={(event) => {
            setOpenColumnsMenu(!openColumnsMenu);
            setColumnsMenuAnchorEl(event.currentTarget);
          }}
        >
          <img src="./Icons/Columns.svg" />
        </CustomIconButton>
        <CustomPopupCheckboxes
          moreMenuAnchorEl={columnsMenuAnchorEl}
          openColumnsMenu={openColumnsMenu}
          setOpenColumnsMenu={(value) => setOpenColumnsMenu(value)}
        />
      </div>
    </GridToolbarContainer>
  );
}

在我的场景中，我必须创建 IconButton，单击该按钮后我必须打开一个带有复选框的弹出窗口。