Web Components 피벗 그리드 상태 지속성

    Web Components Pivot Grid의 Ignite UI for Web Components 상태 지속성을 통해 개발자는 그리드 상태를 쉽게 저장하고 복원할 수 있습니다. Web Components IgcGridState​ ​IgcPivotGridComponent에 적용되면 개발자가 모든 시나리오에서 상태 유지를 달성하는 데 사용할 수 있는 메서드 GetStateAsString​ ​ApplyStateFromString​ ​ApplyState와 GetState 메서드가 노출됩니다.

    Supported Features

    IgcGridState 지시문은 다음 기능의 상태 저장 및 복원을 지원합니다.

    • Sorting
    • Filtering
    • cellSelection
    • columnSelection
    • Expansion
    • pivotConfiguration
      • Pivot Configuration properties defined by the IPivotConfiguration interface.
      • 피벗 차원 및 값 기능은 애플리케이션 수준 코드를 사용하여 복원됩니다. 피벗 구성 복원 섹션을 참조하세요.
      • 피벗 행 및 열 전략도 애플리케이션 수준 코드를 사용하여 복원됩니다. 피벗 전략 복원 섹션을 참조하세요.

    Usage

    이 메서드는 getState 모든 상태 정보를 포함하는 개체의 그리드 상태를 IgcGridStateInfo 반환합니다. 저장하려면 추가 단계가 필요할 수 있습니다.

    직렬화 된 JSON 문자열을 GetStateAsString 반환하므로 개발자는 이를 가져와 모든 데이터 저장소(데이터베이스, 클라우드, 브라우저 localStorage 등)에 저장할 수 있습니다.

    개발자는 기능 이름이 있는 배열을 인수로 전달하여 특정 기능에 대한 상태만 가져오도록 선택할 수 있습니다. 빈 배열은 기본 상태 옵션을 사용하게 됩니다.

    <igc-pivot-grid id="grid">
    <igc-grid-state id="gridState"></igc-grid-state>
</igc-pivot-grid>
html
    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']);
typescript

    ApplyState- 이 메서드는 객체를 인수로 받아들이고 IgcGridStateInfo 객체 또는 지정된 기능에서 찾은 각 기능의 상태를 두 번째 인수로 복원합니다.

    ApplyStateFromString- 이 메서드는 직렬화된 JSON 문자열을 인수로 허용하고 JSON 문자열에 있는 각 기능 또는 지정된 기능의 상태를 두 번째 인수로 복원합니다.

    gridState.applyState(gridState);
gridState.applyStateFromString(gridStateString);
gridState.applyState(sortingFilteringStates)
typescript

    객체는 Options 인터페이스를 구현 IgcGridStateOptions 합니다, 즉, 특정 기능의 이름인 모든 키에 대해 이 기능 상태가 추적되는지 여부를 나타내는 부울 값이 있습니다. GetState / GetStateAsString methods는 이러한 기능의 상태를 반환된 값에 넣지 않으며 ApplyState / ApplyStateFromString methods는 해당 기능의 상태를 복원하지 않습니다.

    gridState.options = { cellSelection: false, sorting: false };
typescript

    사용하기 쉬운 단일 지점 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);
    }
}
typescript
    Ignite UI for Web Components | CTA Banner

    Restoring Pivot Configuration

    IgcGridState 기본적으로 pivot dimension 함수, value formatter 등을 유지하지 않습니다(제한 사항 참조). 이러한 복원은 응용 프로그램 수준에서 코드를 사용하여 수행할 수 있습니다. IgcPivotGridComponent configuration: DimensionInit and에 있는 사용자 정의 함수를 다시 설정하는 데 사용할 수 있는 두 개의 이벤트를 노출합니다 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));
}
ts

    ​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;
    }
}
ts
    • 이벤트 처리기에서 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;
    }
}
ts

    Demo

    EXAMPLE
    DATA
    TS
    HTML
    CSS
    Edit in:

    Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

    Restoring Pivot Strategies

    IgcGridState 원격 피벗 작업이나 사용자 정의 차원 전략을 유지하지 않습니다.

    이러한 복원은 응용 프로그램 수준에서 코드를 사용하여 수행할 수 있습니다. IgcGridState 그리드 상태가 적용되기 전에 추가로 수정하는 데 사용할 수 있는 라는 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) );
}
ts
    • 에서 상태를 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();
}
ts

    EXAMPLE
    DATA
    TS
    HTML
    CSS
    Edit in:

    Limitations

    • getState method는 JSON.stringify() 메서드를 사용하여 원본 객체를 JSON 문자열로 변환합니다. JSON.stringify()는 함수를 지원하지 않기 때문에 지시문은 IgcGridState 피벗 차원 MemberFunction, 피벗 값 Member, Formatter 사용자 정의 Aggregate 함수 Styles 및 피벗 구성 전략을 ColumnStrategy​ ​RowStrategy 무시합니다.