如何获取和设置ag-grid状态？

Question

如何获取并重新设置ag-grid表的状态？我的意思是，显示哪些列，按什么顺序显示，排序和过滤等等。

更新：getColumnState和setColumnState似乎接近我想要的，但我无法弄清楚应该保存和恢复状态的回调。我尝试在onGridReady中恢复它但是当加载实际行时，我失去了状态。

Answer 1

我相信你正在寻找this page of the 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 2

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。加载

后，rowData设置为超时1秒

Answer 3

他们的网站上有一个非常具体的示例，其中提供了您要执行的操作的详细信息：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 4

需要完成以下工作。

在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。它完成了角度

Answer 5

要保留过滤器值，您可以使用     filterParams：{newRowsAction：'keep'}

Answer 6

这是我的方法。它只涉及使用与实例化 agGrid 相同的 API 创建一个包装函数。

这个函数中的一些有趣的事情

• 保存/加载到本地存储
• 利用 addEventListener 传递给 options 函数后，该 Grid 对象可用。
• 附加到 onGridReady 对象的 options 回调而不删除可能已经定义的内容。

用法：

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 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的提供者在根级注入。

第4步：

而且，最后一件事是包含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;
}

我们只需从数据中提取密钥，添加宽度和字段等属性，然后将其推送到数组中。