javascript 如何从MUI Datagrid列显示/隐藏面板中删除选项

w7t8yxp5 于 2023-02-11 发布在 Java

关注(0)|答案(2)|浏览(148)

我正在尝试控制哪些列将显示在MUI Datagrid工具栏内的<GridToolbarColumnsButton/>组件上（见下图）

首选解决方案：

使用API，因为我还没有找到任何现有的功能，甚至没有任何<GridToolbarColumnsButton/>的文档

到目前为止我的解决方法：

使用vanilla js将面板内包含文本“Commodity”的行作为目标，向该行添加一个类，然后在DataGrid组件Props中为该类传递display:'hide'。
它的问题是，由于列面板没有在初始渲染时安装，它不会隐藏“商品”选项，直到我打开面板，然后强制重新渲染。

useEffect( () => {

    var divs = document.querySelectorAll('div .MuiDataGrid-columnsPanelRow')

    for (let i = 0; i < divs.length; i++) {
      if (divs[i].textContent === 'Commodity') {
        divs[i].classList.add("column-panel-cust");
      }
    }
  })

<DataGridPro
...
   componentsProps={{
            panel: {
              sx: {
                paddingTop: '15px',
                '& .column-panel-cust': {
                  display: 'none',
                },
              },
            },
/>

JavaScript

来源：https://stackoverflow.com/questions/74465531/how-to-remove-an-option-from-mui-datagrid-column-show-hide-panel

2条答案

按热度按时间

4dbbbstv1#

找不到此函数的API钩子，但可以通过向<GridToolbarColumnsButton onBlur={handleOnBlur}/>添加一个onBlur来运行此函数：

const handleOnBlur = () => {

var divs = document.querySelectorAll('div .MuiDataGrid-columnsPanelRow')

    for (let i = 0; i < divs.length; i++) {
      if (divs[i].textContent === 'Commodity') {
        divs[i].classList.add("column-panel-cust");
      }
    }
}

它将column-panel-cust类添加到带有文本商品的div中，该类的样式在DataGrid组件Props：

<DataGridPro
...
   componentsProps={{
            panel: {
              sx: {
                paddingTop: '15px',
                '& .column-panel-cust': {
                  display: 'none',
                },
              },
            },
/>

赞(0）回复(0）举报 2023-02-11

qhhrdooz2#

你也可以只使用一些纯css。你只需要定位列的位置。例如，我在这里做了同样的事情，从GridToolbarColumnsButton（最后一项）隐藏菜单。

<DataGrid
        columns={columnsDataGrid}
        loading={loadingDataSubcriptions}
        rows={supplierList}
        components={{
          Toolbar: customToolbarSupplier,
        }}
        componentsProps={{
          panel: {
            sx: {
              '& .MuiDataGrid-columnsPanelRow:last-child': {
                display: 'none', 
              },
            },
          },
        }}
      />

赞(0）回复(0）举报 2023-02-11

我来回答

javascript 如何从MUI Datagrid列显示/隐藏面板中删除选项

2条答案

相关问题

热门标签

最新问答