web-dev-qa-db-ja.com

AG-Gridで列を非表示にする方法は？

AG-Gridで列を非表示にする方法、およびツールパネルに表示されないようにする方法...

var columnDefs = [{ headerName: "Stone_ID", field: "Stone_ID", width: 100, hide: "true" }]
ag-grid
8
nkota

suppressToolPanel のcolumnプロパティをtrueに設定すると、これを実現できます。

var columnDefs = [
    {
       headerName: "Stone_ID",
       field: "Stone_ID",
       width: 100,
       hide: true,
       suppressToolPanel: true
    }
]
13
Ishwor Timilsina

あなたが探しているなら動的に列の表示/非表示は以下に従います：

setColumnVisibleまたはsetColumnsVisibleを使用できます。

注：これらの関数は、columnDefsで設定したフィールドに関連するcolKey（s）を予期します。

columnDefs = [
    {
       headerName: "Name", 
       field: "name", // => that!
       width: 150
    },
    {
       headerName: "Last Name", 
       field: "last_name", // => that!
       width: 150
    },
    // ...
];

setColumnVisibleを使用すると、単一の列を表示/非表示にできます

gridOptions.columnApi.setColumnVisible('name', false) //In that case we hide it

setColumnsVisibleを使用すると、複数の列を表示/非表示にできます

gridOptions.columnApi.setColumnsVisible(['name', 'last_name'], true) //In that case we show them
6
roli roli

これをプログラムで行うには、以下を使用できます。

列を非表示：

this.agGrid.columnApi.setColumnsVisible(["COL_ID_1", "COL_ID_2"], false);

列を表示：

this.agGrid.columnApi.setColumnsVisible(["COL_ID_1", "COL_ID_2"], true);

列グループ全体に対してこれを行うには、以下を使用できます。

  const group = this.columnApi.getColumnGroup("MY_GROUP");
  group.children.forEach(child => this.columnApi.setColumnsVisible(child, false));
3
Vojtech Ruzicka
var columnDefs = [{ headerName: "Stone_ID", field: "Stone_ID", width: 100, hide: true }]
1
Pathi

非表示：文字列「true」ではなく値trueを取得する必要があります（幅：「100」ではなく100を取得するなど）

0
ScottG