Angular 트리 그리드 상태 지속성

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

    Supported Features

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

    • Sorting
    • Filtering
    • Advanced Filtering
    • Paging
    • Cell Selection
    • Row Selection
    • Column Selection
    • Row Pinning
    • Expansion
    • Columns
      • NEW: 이제 다중 열 헤더가 기본적으로 지원됩니다.
      • 열 순서
      • 인터페이스에서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-tree-grid [igxGridState]="options"></igx-tree-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-tree-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-tree-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();
    }
}

    Demo

    Limitations

    API References

    Additional Resources