Angular Pivot Grid State Persistence
igxGridState 지시문을 사용하면 개발자가 그리드 상태를 쉽게 저장하고 복원할 수 있습니다. IgxGridState
지시문이 그리드에 적용되면 개발자가 모든 시나리오에서 상태 지속성을 달성하는 데 사용할 수 있는 getState
및 setState
메서드가 노출됩니다.
Supported Features
IgxGridState
지시문은 다음 기능의 상태 저장 및 복원을 지원합니다.
Sorting
Filtering
Cell Selection
Row Selection
Column Selection
Expansion
Pivot Configuration
- Pivot Configuration properties defined by the
IPivotConfiguration
interface. - 피벗 차원 및 값 기능은 애플리케이션 수준 코드를 사용하여 복원됩니다. 피벗 구성 복원 섹션을 참조하세요.
- 피벗 행 및 열 전략도 애플리케이션 수준 코드를 사용하여 복원됩니다. 피벗 전략 복원 섹션을 참조하세요.
- Pivot Configuration properties defined by the
Usage
getState
- 이 방법은 직렬화된 JSON 문자열로 그리드 상태를 반환하므로 개발자는 이를 가져와 모든 데이터 저장소(데이터베이스, 클라우드, 브라우저 localStorage 등)에 저장할 수 있습니다. 이 메소드는 첫 번째 선택적 매개변수를 허용합니다. serialize
, 여부를 결정합니다. getState
반환합니다 IGridState
객체 또는 직렬화된 JSON 문자열. 개발자는 기능 이름 또는 기능 이름이 포함된 배열을 두 번째 인수로 전달하여 특정 기능에 대한 상태만 가져오도록 선택할 수 있습니다.
// get all features` state in a serialized JSON string
const gridState = state.getState();
// get an `IGridState` object, containing all features original state objects, as returned by the grid public API
const gridState: IGridState = state.getState(false);
// get the sorting and filtering expressions
const sortingFilteringStates: IGridState = state.getState(false, ['sorting', 'filtering']);
setState
-setState
메소드는 직렬화된 JSON 문자열 또는 IGridState
객체를 인수로 받아들이고 객체/JSON 문자열에 있는 각 기능의 상태를 복원합니다.
state.setState(gridState);
state.setState(sortingFilteringStates)
options
-options
개체는 IGridStateOptions
인터페이스를 구현합니다. 즉, 특정 기능의 이름인 모든 키에 대해 이 기능 상태가 추적되는지 여부를 나타내는 부울 값이 있습니다. getState
메소드는 이러한 기능의 상태를 반환된 값에 넣지 않으며 setState
메소드는 해당 기능의 상태를 복원하지 않습니다.
public options = { cellSelection: false; sorting: false; }
<igx-pivot-grid [igxGridState]="options"></igx-pivot-grid>
사용하기 쉬운 단일 지점 API를 사용하면 단 몇 줄의 코드만으로 전체 상태 지속성 기능을 달성할 수 있습니다. 아래 코드를 복사하여 붙여넣으세요. 사용자가 현재 페이지를 떠날 때마다 브라우저 sessionStorage
객체에 그리드 상태가 저장됩니다. 사용자가 메인 페이지로 돌아갈 때마다 그리드 상태가 복원됩니다. 원하는 데이터를 얻기 위해 매번 복잡한 고급 필터링 및 정렬 표현식을 구성할 필요가 없습니다. 한 번만 수행하면 아래 코드가 사용자를 위해 나머지 작업을 수행하게 됩니다.
// app.component.ts
@ViewChild(IgxGridStateDirective, { static: true })
public state!: IgxGridStateDirective;
public ngOnInit() {
this.router.events.pipe(take(1)).subscribe((event: NavigationStart) => {
this.saveGridState();
});
}
public ngAfterViewInit() {
this.restoreGridState();
}
public saveGridState() {
const state = this.state.getState() as string;
window.sessionStorage.setItem('grid1-state', state);
}
public restoreGridState() {
const state = window.sessionStorage.getItem('grid1-state');
this.state.setState(state);
}
Restoring Pivot Configuration
IgxGridState
기본적으로 피벗 차원 함수, 값 포맷터 등을 유지하지 않습니다(limitations
참조). 이들 중 하나를 복원하는 것은 애플리케이션 수준의 코드를 사용하여 수행할 수 있습니다. IgxPivotGrid
는 구성에 포함된 사용자 정의 기능을 다시 설정하는 데 사용할 수 있는 두 가지 이벤트(dimensionInit
및 valueInit
를 노출합니다. 이를 수행하는 방법을 보여드리겠습니다.
-
dimensionInit
및valueInit
이벤트에 대한 이벤트 핸들러를 할당합니다.
<igx-pivot-grid #grid1 [data]="data" [pivotConfiguration]="pivotConfig" [igxGridState]="options"
(valueInit)='onValueInit($event)' (dimensionInit)='onDimensionInit($event)'>
</igx-pivot-grid>
pivotConfiguration
속성에 정의된 각 값과 차원에 대해dimensionInit
및valueInit
이벤트가 발생합니다.
-
valueInit
이벤트 핸들러에서 모든 사용자 정의 수집기, 포맷터 및 스타일을 설정합니다.
public onValueInit(value: IPivotValue) {
// Needed only for custom aggregators, formatter or styles.
if (value.member === 'AmountofSale') {
value.aggregate.aggregator = IgxTotalSaleAggregate.totalSale;
value.aggregateList?.forEach((aggr: IPivotAggregator) => {
switch (aggr.key) {
case 'SUM':
aggr.aggregator = IgxTotalSaleAggregate.totalSale;
break;
case 'MIN':
aggr.aggregator = IgxTotalSaleAggregate.totalMin;
break;
case 'MAX':
aggr.aggregator = IgxTotalSaleAggregate.totalMax;
break;
}
});
} else if (value.member === 'Value') {
value.formatter = (value) => value ? '$' + parseFloat(value).toFixed(3) : undefined;
value.styles.upFontValue = (rowData: any, columnKey: any): boolean => parseFloat(rowData.aggregationValues.get(columnKey.field)) > 150
value.styles.downFontValue = (rowData: any, columnKey: any): boolean => parseFloat(rowData.aggregationValues.get(columnKey.field)) <= 150;
}
}
-
dimensionInit
이벤트 핸들러에서 모든 사용자 정의memberFunction
구현을 설정합니다.
public onDimensionInit(dim: IPivotDimension) {
switch (dim.memberName) {
case 'AllProducts':
dim.memberFunction = () => 'All Products';
break;
case 'ProductCategory':
dim.memberFunction = (data) => data.Product.Name;
break;
case 'City':
dim.memberFunction = (data) => data.Seller.City;
break;
case 'SellerName':
dim.memberFunction = (data) => data.Seller.Name;
break;
}
}
Restoring Pivot Strategies
IgxGridState
기본적으로 원격 피벗 작업이나 사용자 정의 차원 전략(자세한 내용은 피벗 그리드 원격 작업 샘플 참조)을 유지하지 않습니다(limitations
참조). 이들 중 하나를 복원하는 것은 애플리케이션 수준의 코드를 사용하여 수행할 수 있습니다. IgxGridState
는 그리드 상태가 적용되기 전에 추가로 수정하는 데 사용할 수 있는 stateParsed
라는 이벤트를 노출합니다. 이를 수행하는 방법을 보여드리겠습니다.
stateParsed
는 문자열 인수와 함께setState
사용할 때만 방출됩니다.
- 사용자 정의 정렬 전략과 사용자 정의 피벗 열 및 행 차원 전략을 설정합니다.
<igx-pivot-grid #grid [data]="data" [pivotConfiguration]="pivotConfigHierarchy" [defaultExpandState]='true'
[igxGridState]="options" [sortStrategy]="customStrategy" [pivotUI]='{ showConfiguration: false }' [superCompactMode]="true" [height]="'500px'">
</igx-pivot-grid>
@ViewChild(IgxGridStateDirective, { static: true })
public state!: IgxGridStateDirective;
public customStrategy = NoopSortingStrategy.instance();
public options: IGridStateOptions = {...};
public pivotConfigHierarchy: IPivotConfiguration = {
columnStrategy: NoopPivotDimensionsStrategy.instance(),
rowStrategy: NoopPivotDimensionsStrategy.instance(),
columns: [...],
rows: [...],
values: [...],
filters: [...]
};
-
sessionStorage
에서 상태를 복원하고 사용자 정의 전략을 적용하는 것은 다음과 같습니다.
public restoreState() {
const state = window.sessionStorage.getItem('grid-state');
this.state.stateParsed.pipe(take(1)).subscribe(parsedState => {
parsedState.sorting.forEach(x => x.strategy = NoopSortingStrategy.instance());
parsedState.pivotConfiguration.rowStrategy = NoopPivotDimensionsStrategy.instance();
parsedState.pivotConfiguration.columnStrategy = NoopPivotDimensionsStrategy.instance();
});
this.state.setState(state as string);
}
Limitations
getState
메소드는 JSON.stringify() 메소드를 사용하여 원본 객체를 JSON 문자열로 변환합니다. JSON.stringify()는 함수를 지원하지 않으므로IgxGridState
지시문은 피벗 차원memberFunction
, 피벗 값member
,formatter
, 사용자 정의aggregate
함수,styles
및 피벗 구성 전략(columnStrategy
및rowStrategy
을 무시합니다.