web-dev-qa-db-fra.com

Comment puis-je obtenir et définir l'état de la grille ag?

Comment puis-je obtenir et réinitialiser l'état d'une table ag-grid? Je veux dire, quelles colonnes sont affichées, dans quel ordre, avec quel tri et filtrage, etc.

pdate: getColumnState et setColumnState semblent être proches de ce que je veux, mais je ne peux pas comprendre les rappels dans lesquels je dois enregistrer et restaurer l'état. J'ai essayé de le restaurer dans onGridReady mais lorsque les lignes réelles sont chargées, je perds l'état.

ag-grid
14
pupeno

Je crois que vous recherchez cette page des documents . Ceci décrit l'api de la colonne et quelles fonctions sont disponibles pour vous. Les fonctions les plus pertinentes seraient:

  • getAllDisplayedColumns() - utilisé pour montrer quelles colonnes peuvent être rendues dans l'affichage. En raison de la virtualisation, il peut y avoir des colonnes qui ne sont pas encore rendues dans le DOM, si vous ne voulez que les colonnes rendues dans le DOM, puis utilisez getAllDisplayedVirtualColumns() - les deux fonctions affichent l'ordre tel qu'elles seront affichées sur la page Web
    • L'objet Column renvoyé par ces fonctions contient des attributs de tri et de filtrage pour chacune des colonnes.

Je crois que tout ce dont vous avez besoin serait à votre disposition à partir de cette fonction qui serait appelée comme ceci gridOptions.columnApi.getAllDisplayedColumns()

Autres fonctions qui pourraient être utiles:

  • Disponible à partir de gridOptions.columnApi :
    • getColumnState() - renvoie des objets avec moins de détails que la fonction ci-dessus - a seulement: aggFunc, colId, hide, pinned, pivotIndex, rowGroupIndex et width
    • setColumnState(columnState) - cela vous permet de définir des colonnes cachées, visibles ou épinglées, columnState devrait être ce qui est renvoyé par getColumnState()
  • Disponible à partir de gridOptions.api :
    • getSortModel() - récupère le modèle de tri actuel
    • setSortModel(model) - définit le modèle de tri de la grille, model doit être du même format que celui renvoyé par getSortModel()
    • getFilterModel() - obtient le modèle de filtre actuel
    • setFilterModel(model) - définit le modèle de filtre de la grille, model doit être le même format que celui renvoyé par getFilterModel()

Il existe d'autres fonctions plus spécifiques, si vous ne voulez jouer qu'avec l'épinglage d'une colonne, vous pouvez utiliser setColumnPinned ou pour plusieurs colonnes à la fois utiliser setColumnsPinned et plus de fonctions sont disponibles à partir des pages liées des documents AG-Grid

7
Jarod Moser

L'événement gridReady doit faire ce dont vous avez besoin. Je soupçonne que votre état de filtre est réinitialisé lorsque vous mettez à jour la grille avec des données - vous pouvez modifier ce comportement en définissant filterParams: {newRowsAction: 'keep'}

Cela peut être défini par colonne ou défini globalement avec defaultColDef.

Voici un exemple de configuration qui devrait fonctionner pour vous:

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'}
    }
};

J'ai créé un plongeur ici qui illustre comment cela fonctionnerait (notez que je restaure l'état à partir de chaînes de code dures, mais le même principe s'applique): https://plnkr.co/edit/YRH8uQapFU1l37NAjJ9B . Le rowData est défini sur un délai d'attente 1 seconde après le chargement

5
Sean Landsman

Il y a un exemple très spécifique sur leur site Web fournissant des détails sur ce que vous essayez de faire: 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');
}

et pour restaurer:

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

Ce qui suit doit être fait.

Inclure un div pour la grille dans votre html

<div id="myGrid" style="width: 500px; height: 200px;"></div>

Du côté 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);

Découvrez ce stylet pour plus de fonctionnalités. https://codepen.io/mrtony/pen/PPyNaB . C'est fait avec angulaire

0
zapping

Pour conserver les valeurs de filtre, vous pouvez utiliser filterParams: {newRowsAction: 'keep'}

0
aswininayak