Web Components 계층적 그리드 상태 지속성

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

    지원되는 기능

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

    • RowIslands
      • 계층 구조 아래의 모든 하위 그리드에 대한 저장/복원 기능
    • 정렬
    • 필터링
    • AdvancedFiltering
    • 페이징
    • CellSelection
    • 행 선택
    • ColumnSelection
    • RowPinning
    • 확장
    • Columns
      • Multi column headers
      • 열 순서
      • Column properties defined by the IColumnState interface.

    용법

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

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

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

    <igc-hierarchical-grid id="grid">
    <igc-grid-state id="gridState"></igc-grid-state>
</igc-hierarchical-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 배너

    하위 그리드 복원

    자식 그리드의 상태 저장/복원은 속성에 RowIslands 의해 제어되며 기본적으로 활성화되어 있습니다. IgcGridState 루트 그리드와 계층 아래의 모든 자식 그리드 모두에 대해 기능을 저장/복원하기 위해 동일한 옵션을 사용합니다. 예를 들어 다음 옵션을 전달하는 경우:

    gridState.options = { cellSelection: false, sorting: false, rowIslands: true };
ts

    그런 다음 API는 getState and Sorting를 제외한 Selection 모든 그리드(루트 그리드 및 자식 그리드) 기능에 대한 상태를 반환합니다. 나중에 개발자가 모든 그리드의 Filtering 상태만 복원하려면 다음을 사용합니다.

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

    데모

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    이 샘플이 마음에 드시나요? 당사의 완전한 Ignite UI for Web Components 툴킷에 액세스하여 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

    제한 사항

    • 매개 변수가 없는 API를 사용하여 applyState 모든 그리드 기능을 한 번에 복원하는 경우 루트 그리드의 열 속성이 기본값으로 재설정될 수 있습니다. 이 경우 그 후에 열 또는 열 선택 기능을 별도로 복원하십시오.
    state.applyState(gridState);
state.applyState(gridState.columns);
state.applyState(gridState.columnSelection);
typescript