如何获取和设置 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 。 它用角度完成