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

    계층적 그리드의 Ignite UI for React 상태 지속 React 개발자가 그리드 상태를 쉽게 저장하고 복원할 수 있게 합니다. ReactIgrGridState​IgrHierarchicalGrid에 적용하면 개발자가 어떤 상황에서도 상태 지속성을 달성하기 위해 사용할 수 있는 방법들을 노출getState​getStateAsString​applyState​applyStateFromString 합니다.

    Supported Features

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

    • RowIslands
      • 계층 구조 아래의 모든 하위 그리드에 대한 저장/복원 기능
    • Sorting
    • Filtering
    • AdvancedFiltering
    • 페이징
    • CellSelection
    • 행 선택
    • ColumnSelection
    • RowPinning
    • 확장
    • Columns
      • Multi column headers
      • 열 순서
      • 인터페이스에서IColumnState 정의된 열의 속성.

    Usage

    이 메서드는getState 모든 상태 정보를 포함하는 객체의IgrGridStateInfo 그리드 상태를 반환합니다. 이를 구하기 위해 추가 절차가 필요할 수 있습니다.

    이 도구는getStateAsString 직렬화된 JSON 문자열을 반환하기 때문에 개발자들은 이를 가져와 데이터베이스, 클라우드, 브라우저 localStorage 등 어떤 데이터 저장소에도 저장할 수 있습니다.

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

    <IgrHierarchicalGrid>
    <IgrGridState ref={gridStateRef}></IgrGridState>
</IgrHierarchicalGrid>

    // get an `IgrGridStateInfo` object, containing all features original state objects, as returned by the grid public API
const state: IgrGridStateInfo = gridStateRef.current.getState([]);

// get all features` state in a serialized JSON string
const stateString: string = gridStateRef.current.getStateAsString([]);

// get the sorting and filtering expressions
const sortingFilteringStates: IgrGridStateInfo = gridStateRef.current.getState(['sorting', 'filtering']);

    applyState- 메서드는 객체를IgrGridStateInfo 인자로 받아들이며, 객체나 지정된 특징에서 발견된 각 특징의 상태를 두 번째 인자로 복원합니다.

    applyStateFromString- 메서드는 직렬화된 JSON 문자열을 인자로 받아들이며, JSON 문자열이나 지정된 두 번째 인자로 지정된 각 특징의 상태를 복원합니다.

    gridStateRef.current.applyState(gridState, []);
gridStateRef.current.applyStateFromString(gridStateString, []);
gridStateRef.current.applyState(sortingFilteringStates, [])

    객체는options 인터페이스를 구현하므로IgrGridStateOptions, 각 키(특정 기능의 이름)마다 해당 기능 상태가 추적될지 여부를 나타내는 불리언 값이 있습니다.getState /getStateAsString 메서드는 이 특징들의 상태를 반환된 값에 넣지 않으며,applyState​applyStateFromString 메서드는 해당 특징들의 상태를 복원하지 않습니다.

    <IgrGridState options={{ cellSelection: false, sorting: false }}></IgrGridState>

    사용하기 쉬운 단일 포인트 API는 단 몇 줄의 코드만으로 완전한 상태 영속성을 달성할 수 있게 합니다. 아래에서 코드를 복사해서 붙여넣으세요. 사용자가 현재 페이지를 떠날 때마다 브라우저LocalStorage 객체에 그리드 상태를 저장합니다. 사용자가 메인 페이지로 돌아올 때마다 그리드 상태가 복원됩니다. 매번 복잡한 고급 필터링과 정렬 표현식을 설정할 필요가 없고, 한 번만 설정하면 아래 코드가 나머지 작업을 사용자 대신 처리해 주세요:

    <IgrHierarchicalGrid onRendered={restoreGridState}>
    <IgrGridState ref={gridStateRef}></IgrGridState>
</IgrHierarchicalGrid>

    useEffect(() => {
    restoreGridState();
    window.addEventListener('beforeunload', saveGridState);
    return () => {
      window.removeEventListener('beforeunload', saveGridState);
    }
}, []);

// Using methods that work with IgrGridStateInfo object.
const saveGridState = () => {
    const state = gridStateRef.current.getState([]);
    window.localStorage.setItem('grid-state', JSON.stringify(state));
}

const restoreGridState = () => {
    const state = window.localStorage.getItem('grid-state');
    if (state) {
        gridStateRef.current.applyState(JSON.parse(state), []);
    }
}

//Or using string alternative methods.
const saveGridState = () => {
    const state = gridStateRef.current.getStateAsString([]);
    window.localStorage.setItem('grid-state', state);
}

const restoreGridState = () => {
    const state = window.localStorage.getItem('grid-state');
    if (state) {
        gridStateRef.current.applyStateFromString(state, []);
    }
}

    Restoring Child Grids

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

    <IgrHierarchicalGrid>
    <IgrGridState options={{ cellSelection: false, sorting: false, rowIslands: true }}></IgrGridState>
</IgrHierarchicalGrid>

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

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

    Demo

    Limitations

    • 모든 그리드 특징을 한 번에 복원할 때(매개변수 없는 API를 사용applyState 해) 루트 그리드의 열 속성이 기본값으로 초기화될 수 있습니다. 이런 현상이 발생하면, 그 다음에는 열이나 열 선택 기능을 별도로 복원하세요:
    state.applyState(gridState);
state.applyState(gridState.columns);
state.applyState(gridState.columnSelection);
    • getStateAsString메서드는 JSON.stringify() 메서드를 사용하여 원본 객체를 JSON 문자열로 변환합니다. JSON.stringify()는 함수를 지원하지 않기 때문에, 컴포넌트가IgrGridState 열Formatter,filters,Summaries​SortStrategy​CellClasses​CellStyles​HeaderTemplate​BodyTemplate 속성 등을 무시합니다.