Web Components 피벗 그리드 상태 지속성
피벗 그리드의 Ignite UI for Web Components 상태 지속성을 통해 개발자 Web Components 그리드 상태를 쉽게 저장하고 복원할 수 있습니다. 가 IgcGridStateComponent
Web Components에 적용되면 개발자가 모든 시나리오에서 상태 지속성을 달성하는 데 사용할 수 있는 메서드가 getState
applyStateFromString
applyState
getStateAsString
노출됩니다. IgcPivotGridComponent
Supported Features
IgcGridStateComponent
다음 기능의 상태 저장 및 복원을 지원합니다.
Sorting
Filtering
CellSelection
ColumnSelection
Expansion
IgcPivotConfiguration
Usage
이 메서드는 getState
모든 상태 정보를 포함하는 개체의 그리드 상태를 IgcGridStateInfo
반환합니다. 저장하려면 추가 단계가 필요할 수 있습니다.
직 getStateAsString
렬화된 JSON 문자열을 반환하므로 개발자는 이를 가져와 모든 데이터 저장소(데이터베이스, 클라우드, 브라우저 localStorage 등)에 저장할 수 있습니다.
개발자는 기능 이름이 있는 배열을 인수로 전달하여 특정 기능에 대한 상태만 가져오도록 선택할 수 있습니다. 빈 배열은 기본 상태 옵션을 사용하게 됩니다.
<igc-pivot-grid id="grid">
<igc-grid-state id="gridState"></igc-grid-state>
</igc-pivot-grid>
var gridState = document.getElementById('gridState') as IgcGridStateComponent;
// get an `IgcGridStateInfo` object, containing all features original state objects, as returned by the grid public API
const state: IgcGridStateInfo = gridState.getState();
// get all features` state in a serialized JSON string
const stateString: string = gridState.getStateAsString();
// get the sorting and filtering expressions
const sortingFilteringStates: IgcGridStateInfo = gridState.getState(['sorting', 'filtering']);
applyState
- 이 메서드는 객체를 IgcGridStateInfo
인수로 받아들이고 객체 또는 지정된 피처에서 발견된 각 피처의 상태를 두 번째 인수로 복원합니다.
applyStateFromString
- 이 메서드는 직렬화된 JSON 문자열을 인수로 받아들이고 JSON 문자열 또는 지정된 기능에서 발견된 각 기능의 상태를 두 번째 인수로 복원합니다.
gridState.applyState(gridState);
gridState.applyStateFromString(gridStateString);
gridState.applyState(sortingFilteringStates)
객체는 options
인터페이스를 구현합니다 IgcGridStateOptions
., 즉 특정 기능의 이름인 모든 키에 대해 이 기능 상태가 추적되는지 여부를 나타내는 부울 값이 있습니다. getState
/ getStateAsString
methods는 이러한 기능의 상태를 반환된 값에 넣지 않으며 applyState
/ applyStateFromString
methods는 해당 기능의 상태를 복원하지 않습니다.
gridState.options = { cellSelection: false, sorting: false };
사용하기 쉬운 단일 지점 API를 사용하면 몇 줄의 코드로 전체 상태 유지 기능을 얻을 수 있습니다. 아래에서 코드를 복사하여 붙여 넣 으십시오 - 사용자가 현재 페이지를 떠날 때마다 브라우저 LocalStorage
개체에 그리드 상태를 저장합니다. 사용자가 기본 페이지로 돌아갈 때마다 그리드 상태가 복원됩니다. 더 이상 원하는 데이터를 얻기 위해 매번 복잡한 고급 필터링 및 정렬 표현식을 구성할 필요가 없습니다 - 한 번만 수행하고 아래 코드가 사용자를 위해 나머지 작업을 수행하도록 합니다.
constructor() {
window.addEventListener("load", () => { this.restoreGridState(); });
window.addEventListener("beforeunload", () => { this.saveGridState(); });
}
// Using methods that work with IgcGridStateInfo object.
public saveGridState() {
const state = this.gridState.getState();
window.localStorage.setItem('grid-state', JSON.stringify(state));
}
public restoreGridState() {
const state = window.localStorage.getItem('grid-state');
if (state) {
this.gridState.applyState(JSON.parse(state));
}
}
// Or using string alternative methods.
public saveGridStateString() {
const state = this.gridState.getStateAsString();
window.localStorage.setItem('grid-state', state);
}
public restoreGridStateString() {
const state = window.localStorage.getItem('grid-state');
if (state) {
this.gridState.applyStateFromString(state);
}
}
Restoring Pivot Configuration
IgcGridStateComponent
기본적으로 피벗 차원 함수, 값 포맷터 등을 유지하지 않습니다(제한 사항 참조). 이러한 중 하나를 복원하는 것은 응용 프로그램 수준의 코드로 수행할 수 있습니다. 구성 IgcPivotGridComponent
에 있는 사용자 지정 기능을 다시 설정하는 데 사용할 수 있는 두 가지 이벤트를 노출합니다. DimensionInit
ValueInit
이 작업을 수행하는 방법을 보여 드리겠습니다.
- 및
ValueInit
이벤트에 대한 이벤트 처리기를DimensionInit
할당합니다.
constructor() {
var grid = document.getElementById('grid') as IgcPivotGridComponent;
grid.pivotConfiguration = this.pivotConfiguration;
grid.addEventListener("valueInit", (ev:any) => this.onValueInit(ev));
grid.addEventListener("dimensionInit", (ev:any) => this.onDimensionInit(ev));
}
DimensionInit
및ValueInit
이벤트는 속성에 정의된 각 값과 차원에 대해 내보내집니다pivotConfiguration
.
- 이벤트 처리기에서
ValueInit
모든 사용자 지정 집계자, 포맷터 및 스타일을 설정합니다.
public onValueInit(event: any) {
const value: IgcPivotValue = event.detail;
if (value.member === 'AmountofSale') {
value.aggregate.aggregator = this.totalSale;
value.aggregateList?.forEach((aggr: any) => {
switch (aggr.key) {
case 'SUM':
aggr.aggregator = this.totalSale;
break;
case 'MIN':
aggr.aggregator = this.totalMin;
break;
case 'MAX':
aggr.aggregator = this.totalMax;
break;
}
});
} else if (value.member === 'Value') {
value.formatter = (value: any) => 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(event: any) {
const dim: IgcPivotDimension = event.detail;
switch (dim.memberName) {
case 'AllProducts':
dim.memberFunction = () => 'All Products';
break;
case 'ProductCategory':
dim.memberFunction = (data: any) => data.ProductName;
break;
case 'City':
dim.memberFunction = (data: any) => data.City;
break;
case 'SellerName':
dim.memberFunction = (data: any) => data.SellerName;
break;
}
}
Demo
Restoring Pivot Strategies
IgcGridStateComponent
원격 피벗 작업이나 사용자 지정 차원 전략을 유지하지 않습니다.
이러한 중 하나를 복원하는 것은 응용 프로그램 수준의 코드로 수행할 수 있습니다. 적용 IgcGridStateComponent
되기 전에 그리드 상태를 추가로 수정하는 데 사용할 수 있는 호출된 StateParsed
이벤트를 노출합니다. 이 작업을 수행하는 방법을 보여 드리겠습니다.
StateParsed
문자열 인수와 함께 사용할SetState
때만 발생합니다.
- 사용자 정의 정렬 전략과 사용자 정의 피벗 열 및 행 차원 전략을 설정합니다.
public pivotConfiguration: IgcPivotConfiguration = {
columnStrategy: IgcNoopPivotDimensionsStrategy.instance(),
rowStrategy: IgcNoopPivotDimensionsStrategy.instance(),
columns: [...],
rows: [...],
values: [...],
filters: [...]
};
private gridState: IgcGridStateComponent;
constructor() {
var grid = document.getElementById("grid") as IgcPivotGridComponent;
this.gridState = document.getElementById('gridState') as IgcGridStateComponent;
grid.pivotConfiguration = this.pivotConfiguration;
PivotNoopData.getData().then((value) => {
grid.data = value;
});
this.gridState.addEventListener('stateParsed', (ev:any) => this.stateParsedHandler(ev) );
}
- 에서 상태를
LocalStorage
복원하고 사용자 지정 전략을 적용하는 방법은 다음과 같습니다.
public restoreGridState() {
const state = window.localStorage.getItem(this.stateKey);
if (state) {
this.gridState.applyStateFromString(state);
}
}
public stateParsedHandler(ev: any) {
const parsedState = ev.detail;
parsedState.pivotConfiguration.rowStrategy = IgcNoopPivotDimensionsStrategy.instance();
parsedState.pivotConfiguration.columnStrategy = IgcNoopPivotDimensionsStrategy.instance();
}
Limitations
getState
메서드는 JSON.stringify() 메서드를 사용하여 원본 개체를 JSON 문자열로 변환합니다. JSON.stringify()는 함수를 지원하지 않으므로 지시문은IgcGridStateComponent
피벗 차원memberFunction
, 피벗 값member
,formatter
사용자 정의aggregate
함수 및styles
피벗 구성 전략:columnStrategy
androwStrategy
를 무시합니다.