web-dev-qa-db-ja.com

ag-grid状態を取得および設定するにはどうすればよいですか？

Ag-gridテーブルの状態を取得して再設定するにはどうすればよいですか？つまり、どの列が表示されているのか、どの順序で、どの並べ替えやフィルタリングが行われているのかなどです。

更新：getColumnStateとsetColumnStateは、私が望むものに近いように見えますが、状態を保存および復元するコールバックを見つけることができません。 onGridReadyで復元しようとしましたが、実際の行が読み込まれると状態が失われます。

ag-grid
14
pupeno

ドキュメントのこのページ を探していると思います。これは、列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ドキュメントの

7
Jarod Moser

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秒のタイムアウトで設定されます

5
Sean Landsman

彼らのウェブサイトには、あなたがやろうとしていることの詳細を提供する非常に具体的な例があります： 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');
}
5
Hamid

以下を行う必要があります。

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 その角度で完了

0
zapping

フィルター値を保持するには、filterParams：{newRowsAction： 'keep'}を使用します

0
aswininayak