Jak uzyskać i ustawić stan ag-grid?

Question

Jak mogę uzyskać i ponownie ustawić stan tabeli ag-grid? Znaczy, które kolumny mają być show, w jakiej kolejności, z tym, co sortowania i filtrowania, itp

Aktualizacja: getColumnState i setColumnState wydają się być blisko tego, co chcę, ale nie mogę dowiedzieć się zwrotnych, w których Powinienem zachować i przywrócić stan. Próbowałem przywrócić go na GridReady, ale gdy rzeczywiste wiersze są ładowane, tracę stan.

Answer 1

Następujące czynności należy wykonać.

Dołącz div do siatki w html

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

Na stronie 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); 

sprawdzić ten długopis na więcej funkcji. https://codepen.io/mrtony/pen/PPyNaB. Zrobione z kątowym

Answer 2

Wierzę, że szukasz this page of the Docs. To opisuje api kolumny i jakie funkcje są dla ciebie dostępne. Funkcje, które mają największe znaczenie będzie:

• getAllDisplayedColumns() - używane, aby pokazać jakie kolumny mogą być świadczone na wyświetlaczu. W związku z wirtualizacji mogą istnieć pewne kolumny, które nie są świadczone na DOM dość jeszcze, IFF chcesz tylko kolumny świadczone DOM następnie użyć getAllDisplayedVirtualColumns() - obie funkcje pokazują kolejność jak zostaną one wyświetlone na stronie
  • Obiekt Column, który jest zwracany z tych funkcji, zawiera atrybuty sortowania i filtrowania dla każdej z kolumn.

wierzę, że wszystko, co potrzebne byłyby dostępne do was z tej funkcji, które można nazwać jak tego gridOptions.columnApi.getAllDisplayedColumns()

Inne funkcje, które mogą być przydatne:

• Dostępne gridOptions.columnApi :
  • getColumnState() - zwraca obiekty z mniej szczegółów niż wyżej funciton - tylko posiada: aggFunc, colId, ukryć, przypięty, pivotIndex, rowGroupIndex i szerokość
  • setColumnState(columnState) - to pozwala na ustawienie kolumn do ukryte, widoczne lub przypięty, columnState powinna być co wrócił z getColumnState()
• Dostępne od gridOptions.api:
  • getSortModel() - dostaje aktualny porządek modelu
  • setSortModel(model) - ustalenie modelu sortowania siatce model powinien być taki sam format, jak jest wrócił z getSortModel()
  • getFilterModel() - staje obecny model filtra
  • setFilterModel(model) - zestaw modelu filtra siatki, model powinien być taki sam format, co jest zwracany z getFilterModel()

Istnieją inne funkcje które są bardziej szczegółowe, jeśli chcesz tylko zadzwonić z przypinaniem kolumny, możesz użyć setColumnPinned lub dla wielu kolumn jednocześnie, używając setColumnsPinned, a więcej funkcji jest dostępnych na połączonych stronach dokumentów AG-Grid

Answer 3

Zdarzenie gridReady powinno zrobić to, co jest potrzebne. Co Podejrzewam się dzieje jest twój stan filtra zerują podczas aktualizacji siatki z danymi - można zmienić to zachowanie poprzez ustawienie filterParams: {newRowsAction: 'keep'}

Może to albo przez ustawiony przez kolumnę, albo ustawić globalnie defaultColDef.

Oto przykładowa konfiguracja, która powinna pracować dla Ciebie:

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

Utworzyłem plunker tutaj, że pokazuje, jak to będzie działać (nota Jestem przywrócenie stanu z twardych ciągów kodowych, ale to samo Zasada dotyczy): https://plnkr.co/edit/YRH8uQapFU1l37NAjJ9B. RowData jest ustawiony na timeout 1 sekundy po załadowaniu

Answer 4

Krok 1:

Przede wszystkim trzeba dodać zależności do projektu. W swojej package.json dodaj następujący kod:

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

upewnij się, że masz najnowszą wersję ag-Grid.

Krok 2:

Aktualizacja System.config.js używać AG-grid w projekcie.

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

Krok 3:

importu AgGridModule w module, w którym chcesz go używać.

Częścią ForRoot jest zapewnienie, że dostawcy AgGrid są wstrzykiwani na poziomie root.

Krok 4:

I ostatnią rzeczą jest to CSS dla ag-Grid. Możesz to zrobić bezpośrednio w swoim pliku 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" /> 

To wszystko. Konfiguracja została zakończona. ruch

Przejdźmy do wykonania

Utwórz komponent, w którym chcesz korzystać z sieci.

@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{ }** 

W szablonie mamy tag. Jest to dostarczane przez moduł AgGridModule, który wcześniej importowaliśmy. Należy zwrócić uwagę na właściwość "gridOptions", przypisaliśmy ją do zmiennej o nazwie "myGridOptions" i dlatego musimy zainicjować tę zmienną w komponencie. Dodaj następujący kod w składniku:

private myGridOptions: GridOptions = {}; 

Powoduje zainicjowanie pustej siatki. Teraz oczywiście potrzebujemy danych w naszej sieci.

Aby dodać datę do ag-Grid, mamy dwie właściwości GridOptions:

rowData 
columnDefs 

możemy zainicjować oboje na ngOninit. Import OnInit i wdrożenia go do komponentu, a następnie dodaj następujący kod:

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} 
    ] 
} 

// dane zostanie odwzorowany z odpowiednią „pola” klucz z nagłówkami

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"} 
    ]; 
} 
} 

Tutaj mamy dwie metody, które dodaj nagłówki i dane wiersza do siatki.

ten sposób swoją sieć powinna wyglądać następująco:

blog1_1 

Używamy motyw materialny, ale można wybrać dowolny jeden chcesz stąd.

Teraz, w ogólnym scenariuszu, otrzymasz te dane z usługi. Stwórzmy dla tego fałszywą usługę. Ale zanim to zrobimy, powinniśmy stworzyć typ dla naszych danych.

Utwórz plik "przyjaciele.ts”i utworzyć klasę Znajomi następująco:

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

Teraz za usługę udawanym utwórz friends.service.ts plików i dodaj następujący kod:

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

Aby korzystać usługę, dodaj ją do sekcji dostawców twojego modułu.

Teraz musimy zaktualizować nasze metody w komponencie. Wiersze będą bezpośrednio mapowane, ponieważ właściwość rowData wymaga tablicy dowolnego typu, więc wszystko, co musimy zrobić, to zaktualizować metodę 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; 
} 

Po prostu wyodrębnić klucze z danymi, jak dodać właściwości szerokości i pola, i wsuń go do tablicy.