How do I get and set ag

How can I obtain and re-set the state of an ag-grid table? I mean, which columns are being show, in what order, with what sorting and filtering, etc.

Update : getColumnState and setColumnState seem to be close to what I want, but I cannot figure out the callbacks in which I should save and restore the state. I tried restoring it in onGridReady but when the actual rows are loaded, I lose the state.

---

I believe you are looking for this page of the Docs. This describes the column api and what functions are available to you. The functions that are of most relevance would be:

getAllDisplayedColumns() - used to show what columns are able to be rendered into the display. Due to virtualization there may be some columns that aren't rendered to the DOM quite yet, iff you want only the columns rendered to the DOM then use getAllDisplayedVirtualColumns() - both functions show the order as they will be displayed on the webpage

The Column object that is returned from these functions contains sort and filter attributes for each of the columns.

I believe that all you need would be available to you from that function which would be called like this gridOptions.columnApi.getAllDisplayedColumns()

Other functions which might be useful:

Available from gridOptions.columnApi :

getColumnState() - returns objects with less detail than the above funciton - only has: aggFunc, colId, hide, pinned, pivotIndex, rowGroupIndex and width

setColumnState(columnState) - this allows you to set columns to hidden, visible or pinned, columnState should be what is returned from getColumnState()

Available from gridOptions.api :

getSortModel() - gets the current sort model

setSortModel(model) - set the sort model of the grid, model should be the same format as is returned from getSortModel()

getFilterModel() - gets the current filter model

setFilterModel(model) - set the filter model of the grid, model should be the same format as is returned from getFilterModel()

There are other functions that are more specific, if you only want to mess with pinning a column you can use setColumnPinned or for multiple columns at once use setColumnsPinned and more functions are available from the linked pages of the AG-Grid docs

---

The gridReady event should do what you need it to do. What I suspect is happening is your filter state is being reset when you update the grid with data - you can alter this behaviour by setting filterParams: {newRowsAction: 'keep'}

This can either by set by column, or set globally with defaultColDef .

Here is a sample configuration that should work for you:

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

I've created a plunker here that illustrates how this would work (note I'm restoring state from hard code strings, but the same principle applies): https://plnkr.co/edit/YRH8uQapFU1l37NAjJ9B . The rowData is set on a timeout 1second after loading

---

The following needs to be done.

Include a div for the grid in your html

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

On the js side

//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);

Check this pen out for more features. https://codepen.io/mrtony/pen/PPyNaB . Its done with angular

链接地址: http://www.djcxy.com/p/95600.html

上一篇: 将多个弹簧网站项目合并为一个可展开的战争

下一篇: 我如何获得并设置ag