Angular 계층적 그리드 상태 지속성

    igxGridState 지침은 개발자가 그리드 상태를 쉽게 저장하고 복원할 수 있게 합니다.IgxGridState이 지시가 그리드에 적용되면, 개발자가 어떤 상황에서도 상태 지속성을 달성하기 위해 사용할 수 있는 방법들과getState​setState 메서드가 노출됩니다.

    Supported Features

    IgxGridState지침은 다음 기능들의 상태 저장 및 복원을 지원합니다:

    • RowIslands
      • 계층 구조 아래의 모든 하위 그리드에 대한 저장/복원 기능
    • Sorting
    • Filtering
    • Advanced Filtering
    • Paging
    • Cell Selection
    • Row Selection
    • Column Selection
    • Row Pinning
    • Expansion
    • Columns
      • Multi column headers
      • 열 순서
      • 인터페이스에서IColumnState 정의된 열의 속성.
      • 열 템플릿 및 함수는 애플리케이션 수준 코드를 사용하여 복원됩니다. 열 복원 섹션을 참조하세요.
    Note

    지침은IgxGridState 템플릿을 다루지 않습니다. 열식 템플릿 복원 방법을 보려면 '열 복원' 섹션으로 가세요.

    Note

    ​Row Selection이 기능은 속성을 설정해야primaryKey 올바르게 저장/복원할 수 있습니다.

    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-hierarchical-grid [igxGridState]="options"></igx-hierarchical-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 columns

    가능하다면 상태 지침은 새 열 인스턴스를 생성하지 않고 이미 그리드에 존재하는 열을 재사용하도록 합니다. 새로운 인스턴스가 생성되는 유일한 경우는 해당 열(또는 열 그룹의 경우 자식들)이 속성이 없field 어서 일치하는 열을 고유하게 식별하고 재사용할 방법이 없을 때입니다.

    이러한 상황에 대해서는 다음과limitations 같은 조치가 적용됩니다. 이 경우 복잡한 객체 복원은 애플리케이션 수준의 코드로 수행할 수 있습니다. 템플릿 열에 대해 어떻게 하는지 보여드리겠습니다:

    1. 템플릿 참조 변수(아래#activeTemplate 예시에서)를 정의하고 이벤트에 대해columnInit 이벤트 핸들러를 할당합니다:
    <igx-hierarchical-grid id="grid" #grid igxGridState (columnInit)="onColumnInit($event)">
    <igx-column [field]="'IsActive'" header="IsActive">
        <ng-template igxCell #activeTemplate let-column let-val="val">
            <igx-checkbox [checked]="val"></igx-checkbox>
        </ng-template>
    </igx-column>
    ...
</igx-hierarchical-grid>
    1. @ViewChild 또는 @ViewChildren 데코레이터를 사용해 구성 요소 내 템플릿 뷰를 쿼리하세요. 이벤트 핸들러에서columnInit 템플릿을 열(columnbodyTemplate) 속성에 할당하세요:
    @ViewChild('activeTemplate', { static: true }) public activeTemplate: TemplateRef<any>;
public onColumnInit(column: IgxColumnComponent) {
    if (column.field === 'IsActive') {
        column.bodyTemplate = this.activeTemplate;
        column.summaries = MySummary;
        column.filters = IgxNumberFilteringOperand.instance();
    }
}

    Restoring Child Grids

    자식 그리드의 상태 저장/복원은 속성에서rowIslands 제어되며 기본적으로 활성화되어 있습니다.IgxGridState 루트 그리드와 계층 구조 하의 모든 자식 그리드 모두에 대해 동일한 옵션을 사용해 특징을 저장/복원할 것입니다. 예를 들어, 다음 선택지를 통과시킨다면:

    <!-- public options = {selection: false, sorting: false, rowIslands: true} -->
<igx-grid [igxGridState]="options"></igx-grid>

    그 후 API는getState 모든 그리드(루트 그리드 및 자식 그리드) 특징selection에 대해 상태를sorting 반환합니다. 나중에 개발자가 모든 그리드의 상태만filtering 복원하고 싶다면, 다음을 사용하세요:

    this.state.setState(state, ['filtering', 'rowIslands']);

    Demo

    Limitations

    • 모든 그리드 특징을 한 번에 복원할 때(매개변수 없는 API 사용setState) 루트 그리드의 열 속성이 기본값으로 초기화될 수 있습니다. 이런 현상이 발생하면, 그 다음에는 열이나 열 선택 기능을 별도로 복원하세요:
    state.setState(gridState);
state.setState(gridState.columns);
state.setState(gridState.columnSelection);

    API References

    Additional Resources