如何禁用 ag-grid 侧边栏选项

Question

我正在使用 Ag-grid 侧边栏并希望将所有列显示为选项以选中或取消选中但有些是只读的。我没有任何数据组。我一直在查看文档，它说我需要将 functionsReadOnly 设置为 tru 但这不起作用

看来我必须设置 pivotMode:true 但这样做会使网格上的所有列消失我希望我的所有列都显示，但只是将侧边栏中的一些选项禁用。这是我的代码

config.js

 { columnDefs: [
    {
      headerName: 'ColA',
      field: 'colA',
    },
    {
      headerName: 'ColB',
      field: 'colB'
      enablePivot: true
    },
    {
      headerName: 'uploadedFiles.fileFormat',
      field: 'formatDescription'
    },
    {
      headerName: 'ColC',
      field: 'colC',
    }
    
  ],
  defaultColDef: {
    sortable: true,
    suppressMenu: false,
    resizable: true,
    suppressColumnsToolPanel: false
  },
  rowSelection: 'single',
  sideBar: {
    toolPanels: [
      {
        id: 'columns',
        labelDefault: 'Columns',
        toolPanel: 'agColumnsToolPanel',
        toolPanelParams: {
          suppressRowGroups: true,
          suppressValues: true,
          suppressPivots: true,
          suppressPivotMode: true,
          suppressSideButtons: true
        }
      }
    ],
    hiddenByDefault: true
  },
  pivotMode:true
}

我希望所有这些列都显示在网格上，所有选项都显示在侧边栏中...我只想禁用 colB 但启用数据透视模式会使所有列在网格上消失，只需使用 functionsReadOnly 在 colB 上什么都不做

Answer 1

您可以使用 toolPanelClass: 'some-class' 将自定义 class 应用到该特定列的工具面板，并使用 css pointer-event: none

或者您可以使用 document.getElementByClassName('some-class') 并根据您的要求操作 DOM。

https://www.ag-grid.com/documentation/javascript/tool-panel-columns/#example-styling

如何禁用 ag-grid 侧边栏选项

How to disable ag-grid sidebar options

reactjs

ag-grid

ag-grid-react