Как получить и установить состояние ag-grid?

Ответ 1

Я считаю, что вы ищете эту страницу Документов. Это описывает столбец 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 docs

Ответ 2

Событие gridReady должно делать то, что вам нужно. Я подозреваю, что ваше состояние фильтра reset при обновлении сетки данными - вы можете изменить это поведение, установив 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'}
    }
};

Я создал плункер здесь, который иллюстрирует, как это будет работать (обратите внимание, что я восстанавливаю состояние из жестких кодовых строк, но применяется тот же принцип): https://plnkr.co/edit/YRH8uQapFU1l37NAjJ9B. Параметр rowData устанавливается на тайм-аут 1 секунда после загрузки

Ответ 3

На их веб-сайте есть очень конкретный пример, содержащий подробности того, что вы пытаетесь сделать: javascript-grid-column-определений

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

Ответ 4

Необходимо выполнить следующее.

Включить div для сетки в html

<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. Это сделано с помощью angular

Ответ 5

Автоматическое агрегирование, когда пользовательский набор сгруппированных перестанет работать после setColumnState

Ответ 6

Чтобы сохранить значения фильтра, вы можете использовать filterParams: {newRowsAction: 'keep'}

Ответ 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:

И последнее, что нужно включить CSS для ag-Grid. Вы можете сделать это прямо в своем 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" и создайте класс Друзья следующим образом:

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.

Теперь нам нужно обновить наши методы в компоненте. Строки будут непосредственно отображаться, потому что свойство 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;
}

Мы просто извлекаем ключи из данных, добавляем такие свойства, как width и field, и вставляем их в массив.