如何獲取和設置 ag-grid 狀態？

Question

如何獲取並重新設置 ag-grid 表的狀態？ 我的意思是，正在顯示哪些列，以什么順序，以什么排序和過濾等。

更新： getColumnState 和 setColumnState 似乎接近我想要的，但我無法弄清楚我應該保存和恢復狀態的回調。 我嘗試在 onGridReady 中恢復它，但是當實際的行被加載時，我失去了狀態。

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

Answer 2

我相信您正在尋找Docs 的這一頁。 這描述了列 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 文檔的鏈接頁面獲得

Answer 3

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

我在這里創建了一個 plunker 來說明它是如何工作的（注意我正在從硬代碼字符串恢復狀態，但同樣的原則適用）： https ://plnkr.co/edit/YRH8uQapFU1l37NAjJ9B。 加載后 1 秒將rowData設置為超時

Answer 4

要保留過濾器值，您可以使用 filterParams: {newRowsAction: 'keep'}

Answer 5

這是我的方法。 它只涉及使用與實例化 agGrid 相同的 API 創建一個包裝函數。

這個函數的一些有趣的事情

• 保存/加載到本地存儲
• 一旦將options對象傳遞給Grid函數，它就會使用addEventListener 。
• 附加到options對象的onGridReady回調，而不刪除可能已經定義的內容。

用法：

newAgGrid(document.getElementById('my-grid'), options);
    
static newAgGrid(element, options) {
    const ls = window.localStorage;
    const key = `${location.pathname}/${element.id}`;
    const colStateKey = `${key}colstate`;
    const sortStateKey = `${key}sortState`;
    function saveState(params) {
        if (ls) {
            ls.setItem(colStateKey, JSON.stringify(params.columnApi.getColumnState()));
            ls.setItem(sortStateKey, JSON.stringify(params.api.getSortModel()));
        }
    }
    function restoreState(params) {
        if (ls) {
            const colState = ls.getItem(colStateKey);
            if (colState) {
                params.columnApi.setColumnState(JSON.parse(colState));
            }
            const sortState = ls.getItem(sortStateKey)
            if (sortState) {
                params.api.setSortModel(JSON.parse(sortState));
            }
        }
    }
    // monitor the onGridReady event.  do not blow away an existing handler
    let existingGridReady = undefined;
    if (options.onGridReady) {
        existingGridReady = options.onGridReady;
    }
    options.onGridReady = function (params) {
        if (existingGridReady) {
            existingGridReady(params);
        }
        restoreState(params);
    }
    // construct grid
    const grid = new agGrid.Grid(element, options);
    // now that grid is created, add in additional event listeners
    options.api.addEventListener("sortChanged", function (params) {
        saveState(params);
    });
    options.api.addEventListener("columnResized", function (params) {
        saveState(params);
    });
    options.api.addEventListener("columnMoved", function (params) {
        saveState(params);
    });
    return grid;
}

Answer 6

我們可以使用useRef()引用<AgGridReact>元素以通過以下方式訪問 getColumn 和 setColumn 狀態。

const GridRef = useRef()

GridRef.current.columnApi.getColumnState() //  get Column state value
GridRef.current.columnApi.setColumnState() //  set Column state value

<AgGridReact
   enableFilter={true}
   rowStyle={rowStyle}
   ref={GridRef}
></AgGridReact>

Answer 7

第1步 ：

首先，您需要為項目添加依賴項。 在package.json中，添加以下代碼：

"dependencies": {
 ...
 "ag-grid": "6.1.0",
 "ag-grid-ng2": "6.1.0"
 }

確保擁有最新版本的ag-Grid。

第2步 ：

更新System.config.js以在項目中使用ag-grid。

System.config({
 packages: {
  ...
  'ag-grid-ng2': {
    defaultExtension: "js"
   },
  'ag-grid': {
    defaultExtension: "js"
  }
 },
 map: {
  ...
  'ag-grid-ng2': 'node_modules/ag-grid-ng2',
  'ag-grid': 'node_modules/ag-grid'
 }
});

第3步：

在模塊中導入要使用它的AgGridModule。

import {AgGridModule} from 'ag-grid-ng2/main';

@NgModule({
 imports: [
 BrowserModule,
 AgGridModule.forRoot(),
 ...
})

forRoot部分是為了確保AgGrid的提供者在根級注入。

第四步：

而且，最后一件事是包含用於ag-Grid的CSS。 您可以直接在index.html中執行此操作

<link href="node_modules/ag-grid/dist/styles/ag-grid.css" rel="stylesheet" />
<link href="node_modules/ag-grid/dist/styles/theme-material.css" rel="stylesheet" />

而已。 設置完成。

讓我們繼續實施

創建要使用網格的組件。

@Component({
 selector: 'ag-grid',
 template: `
 <ag-grid-ng2 style="width: 80%; margin-left: 10%" #agGrid class="ag-material"
  [gridOptions]="myGridOptions">
 </ag-grid-ng2>`
})

**export class MyGridComponent{ }**

在模板中，我們有標簽。 這是我們之前導入的AgGridModule提供的。 需要注意的是“gridOptions”屬性，我們已將其分配給名為“myGridOptions”的變量，因此我們需要在組件中初始化該變量。 在組件中添加以下代碼：

 private myGridOptions: GridOptions = {};

這會初始化一個空網格。 現在，顯然，我們需要在網格中使用一些數據。

要向ag-Grid添加日期，我們有兩個GridOptions屬性：

rowData
columnDefs

我們可以在ngOninit上初始化它們。 導入OnInit並將其實現到組件，並添加以下代碼：

import { OnInit } from '@angular/core';

export class MyGridComponent implements OnInit{

ngOnInit() {
 this.myGridOptions.rowData = this.createRowData();
 this.myGridOptions.columnDefs = this.createColumnDefs();
}

private createColumnDefs() {
 return [
  {headerName: "NAME", field: "name", width: 100}, 
  {headerName: "AGE", field: "age", width: 100},
  {headerName: "GENDER", field: "gender", width: 100}
  ]
}

//數據被映射到標題的相應“字段”鍵

private createRowData() {          
 return [
  {name: "Geller", age: 30, gender: "Male"},
  {name: "Geller", age: 28, gender: "Female"},
  {name: "Tribbiani", age: 29, gender: "Male"},
  {name: "Bing", age: 30, gender: "Male"},
  {name: "Green", age: 28, gender: "Female"},
  {name: "Buffay", age: 29, gender: "Female"}
  ];
 }
}

這里我們有兩種方法將標題和行數據添加到網格中。

這就是你的網格應該是這樣的：

blog1_1

我們正在使用材料主題，但您可以從這里選擇您喜歡的任何一個。

現在，在一般情況下，您將從服務獲取此數據。 讓我們為此創建一個模擬服務。 但在此之前，我們應該為我們的數據創建一個類型。

創建一個文件“friends.ts”，並創建一個類Friends，如下所示：

export class Friends{
  name: string;
  age: number;
  gender: string;
}

現在，對於模擬服務，創建一個文件friends.service.ts，並添加以下代碼：

import {Friends} from "./friends";
export class FriendsService{

  getDate() {
    let friends: Friends[] = [
      {name: "Geller", age: 30, gender: "Male"},
      {name: "Geller", age: 28, gender: "Female"},
      {name: "Tribbiani", age: 29, gender: "Male"},
      {name: "Bing", age: 30, gender: "Male"},
      {name: "Green", age: 28, gender: "Female"},
      {name: "Buffay", age: 29, gender: "Female"},
    ];
    return friends
  }
}

要使用該服務，請將其添加到ngModule的providers部分。

現在，我們需要更新組件中的方法。 行將直接映射，因為rowData屬性需要任何類型的數組，所以我們需要做的就是更新createColumnDefs方法。

constructor(private friendsService: FriendsService){}

ngOnInit() {
 let data: Friends[] = this.friendsService.getDate();
 this.myGridOptions.rowData = data;
 this.myGridOptions.columnDefs = this.createColumnDefs(data[0]);
}

private createColumnDefs(friends: Friends) {
 let keyNames = Object.keys(friends);
 let headers = [];
 keyNames.map(key => {
 headers.push({
 headerName: key.toUpperCase(),
 field: key,
 width: 100
 })
 });

 return headers;
}

我們只需從數據中提取密鑰，添加寬度和字段等屬性，然后將其推送到數組中。

Answer 8

需要進行以下操作。

在您的 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 。 它用角度完成