Ag-gridテーブルの状態を取得して再設定するにはどうすればよいですか?つまり、どの列が表示されているのか、どの順序で、どの並べ替えやフィルタリングが行われているのかなどです。
更新:getColumnStateとsetColumnStateは、私が望むものに近いように見えますが、状態を保存および復元するコールバックを見つけることができません。 onGridReadyで復元しようとしましたが、実際の行が読み込まれると状態が失われます。
ドキュメントのこのページ を探していると思います。これは、列apiと使用可能な機能について説明しています。最も関連のある機能は次のとおりです。
getAllDisplayedColumns()
-ディスプレイにレンダリングできる列を示すために使用されます。仮想化のため、DOMにレンダリングされていない列がいくつかある場合があります。DOMにレンダリングされる列のみが必要な場合は、getAllDisplayedVirtualColumns()
を使用します。両方の関数は表示される順序を示しますウェブページColumn
オブジェクトには、各列のソートおよびフィルター属性が含まれます。私は、あなたが必要とするすべてがこのgridOptions.columnApi.getAllDisplayedColumns()
のように呼び出される関数から利用できると信じています
役に立つかもしれない他の機能:
gridOptions.columnApi
_ :から利用可能getColumnState()
-上記の機能よりも詳細度の低いオブジェクトを返します-aggFunc、colId、hide、pinned、pivotIndex、rowGroupIndexおよびwidthのみsetColumnState(columnState)
-これにより、列を非表示、表示、または固定に設定できます。columnState
はgetColumnState()
から返されるものでなければなりませんgridOptions.api
_ :から利用可能getSortModel()
-現在のソートモデルを取得しますsetSortModel(model)
-グリッドのソートモデルを設定します。model
は、getSortModel()
から返される形式と同じである必要がありますgetFilterModel()
-現在のフィルターモデルを取得しますsetFilterModel(model)
-グリッドのフィルターモデルを設定します。model
はgetFilterModel()
から返されるものと同じ形式である必要がありますより具体的な他の関数があります。列を固定するだけで混乱したい場合は、setColumnPinned
を使用できます。または、複数の列に対してsetColumnsPinned
を一度に使用できます。 AG-Gridドキュメントの
gridReady
イベントは、必要な処理を行う必要があります。グリッドをデータで更新すると、フィルターの状態がリセットされているのではないかと思われます。filterParams: {newRowsAction: 'keep'}
これは、列ごとに設定するか、defaultColDef
でグローバルに設定できます。
以下に設定例を示します。
var gridOptions = {
columnDefs: columnDefs,
enableSorting: true,
enableFilter: true,
onGridReady: function () {
gridOptions.api.setFilterModel(filterState);
gridOptions.columnApi.setColumnState(colState);
gridOptions.api.setSortModel(sortState);
},
defaultColDef: {
filterParams: {newRowsAction: 'keep'}
}
};
ここでこれがどのように機能するかを示すプランカーを作成しました(ハードコード文字列から状態を復元していますが、同じ原則が適用されます): https://plnkr.co/edit/YRH8uQapFU1l37NAjJ9B 。 rowDataは、ロード後1秒のタイムアウトで設定されます
彼らのウェブサイトには、あなたがやろうとしていることの詳細を提供する非常に具体的な例があります: javascript-grid-column-definitions
function saveState() {
window.colState = gridOptions.columnApi.getColumnState();
window.groupState = gridOptions.columnApi.getColumnGroupState();
window.sortState = gridOptions.api.getSortModel();
window.filterState = gridOptions.api.getFilterModel();
console.log('column state saved');
}
復元のため:
function restoreState() {
gridOptions.columnApi.setColumnState(window.colState);
gridOptions.columnApi.setColumnGroupState(window.groupState);
gridOptions.api.setSortModel(window.sortState);
gridOptions.api.setFilterModel(window.filterState);
console.log('column state restored');
}
以下を行う必要があります。
HTMLにグリッドのdivを含めます
<div id="myGrid" style="width: 500px; height: 200px;"></div>
Js側で
//initialize your grid object
var gridDiv = document.querySelector('#myGrid');
//Define the columns options and the data that needs to be shown
var gridOptions = {
columnDefs: [
{headerName: 'Name', field: 'name'},
{headerName: 'Role', field: 'role'}
],
rowData: [
{name: 'Niall', role: 'Developer'},
{name: 'Eamon', role: 'Manager'},
{name: 'Brian', role: 'Musician'},
{name: 'Kevin', role: 'Manager'}
]
};
//Set these up with your grid
new agGrid.Grid(gridDiv, gridOptions);
その他の機能については、このペンをご覧ください。 https://codepen.io/mrtony/pen/PPyNaB その角度で完了
フィルター値を保持するには、filterParams:{newRowsAction: 'keep'}を使用します