是否可以在 Ag Grid 中切换（显示/隐藏）列菜单答案

【问题标题】：Is it possible to toggle( show/hide ) column menu in Ag Grid是否可以在 Ag Grid 中切换（显示/隐藏）列菜单
【发布时间】：2019-06-12 10:53:17
【问题描述】：

我想为 ag 网格添加条件编辑模式，以便用户只能在单击某些操作按钮后从菜单中固定/取消固定显示/隐藏列。我试图在操作后在列定义中添加“menuTabs”，但它没有更改列标题。请在下面找到我当前的尝试

//最初。这工作正常，网格上没有可见的列菜单

this.gridColumns.map((column) => {
    column['menuTabs'] = [];
    return column;
})

//有条件的。不工作的列菜单仍然丢失

if (condition) {
                this.gridColumns.map((column) => {
                    column['menuTabs'] = ["generalMenuTab",columnsMenuTab"];
                    return column;
                })
                this.gridApi.setColumnDefs(this.gridColumns)
                this.gridApi.refreshHeader();
            }

谢谢

【问题讨论】：

我知道 ag 网格需要 columnsDefs 中的列数组。所以想法是你有两个变量，columnsDefs 和 columnsDefsShowed。你使用 columnsDefsShowed 绑定 ag 网格，并创建这个变量过滤你的 columnsDefs，例如。你有一个包含列“myColumns”和columnsDefsShowed=columnsDefs.filter(x=>myColumns.indexOf(x.field)>=0) 字段的数组

标签： angular ag-grid

【解决方案1】：

您可以尝试创建一个新的 colDef 数组并将其传递给网格选项。
像这样的 -

function updateColDef()
{ 
    let newColDef= [];
    this.gridColumns.forEach(function(colDef) {
                colDef['menuTabs'] = ["generalMenuTab",columnsMenuTab"];
                newColDef.push(colDef);
            });    
  this.gridApi.api.setColumnDefs(newColDef);
  this.gridApi.refreshHeader();
}

另一个ag grid用户面临类似issue

【讨论】：