Web Components 계층적 그리드의 Ignite UI for Web Components 상태 지속성을 통해 개발자는 그리드 상태를 쉽게 저장하고 복원할 수 있습니다. Web Components IgcGridState IgcHierarchicalGridComponent에 적용되면 개발자가 모든 시나리오에서 상태 유지를 달성하는 데 사용할 수 있는 메서드 GetStateAsString ApplyStateFromString ApplyState와 GetState 메서드가 노출됩니다.
var gridState = document.getElementById('gridState') as IgcGridStateComponent;
// get an `IgcGridStateInfo` object, containing all features original state objects, as returned by the grid public APIconst state: IgcGridStateInfo = gridState.getState();
// get all features` state in a serialized JSON stringconst stateString: string = gridState.getStateAsString();
// get the sorting and filtering expressionsconst sortingFilteringStates: IgcGridStateInfo = gridState.getState(['sorting', 'filtering']);
typescript
ApplyState- 이 메서드는 객체를 인수로 받아들이고 IgcGridStateInfo 객체 또는 지정된 기능에서 찾은 각 기능의 상태를 두 번째 인수로 복원합니다.
ApplyStateFromString- 이 메서드는 직렬화된 JSON 문자열을 인수로 허용하고 JSON 문자열에 있는 각 기능 또는 지정된 기능의 상태를 두 번째 인수로 복원합니다.
객체는 Options 인터페이스를 구현 IgcGridStateOptions 합니다, 즉, 특정 기능의 이름인 모든 키에 대해 이 기능 상태가 추적되는지 여부를 나타내는 부울 값이 있습니다. GetState / GetStateAsString methods는 이러한 기능의 상태를 반환된 값에 넣지 않으며 ApplyState / ApplyStateFromString methods는 해당 기능의 상태를 복원하지 않습니다.
사용하기 쉬운 단일 지점 API를 사용하면 몇 줄의 코드로 전체 상태 유지 기능을 얻을 수 있습니다. 아래에서 코드를 복사하여 붙여 넣 으십시오 - 사용자가 현재 페이지를 떠날 때마다 브라우저 LocalStorage 개체에 그리드 상태를 저장합니다. 사용자가 기본 페이지로 돌아갈 때마다 그리드 상태가 복원됩니다. 더 이상 원하는 데이터를 얻기 위해 매번 복잡한 고급 필터링 및 정렬 표현식을 구성할 필요가 없습니다 - 한 번만 수행하고 아래 코드가 사용자를 위해 나머지 작업을 수행하도록 합니다.
constructor() {
window.addEventListener("load", () => { this.restoreGridState(); });
window.addEventListener("beforeunload", () => { this.saveGridState(); });
}
// Using methods that work with IgcGridStateInfo object.publicsaveGridState() {
const state = this.gridState.getState();
window.localStorage.setItem('grid-state', JSON.stringify(state));
}
publicrestoreGridState() {
const state = window.localStorage.getItem('grid-state');
if (state) {
this.gridState.applyState(JSON.parse(state));
}
}
// Or using string alternative methods.publicsaveGridStateString() {
const state = this.gridState.getStateAsString();
window.localStorage.setItem('grid-state', state);
}
publicrestoreGridStateString() {
const state = window.localStorage.getItem('grid-state');
if (state) {
this.gridState.applyStateFromString(state);
}
}
typescript
하위 그리드 복원
자식 그리드의 상태 저장/복원은 속성에 RowIslands 의해 제어되며 기본적으로 활성화되어 있습니다. IgcGridState 루트 그리드와 계층 아래의 모든 자식 그리드 모두에 대해 기능을 저장/복원하기 위해 동일한 옵션을 사용합니다. 예를 들어 다음 옵션을 전달하는 경우:
<!DOCTYPE html><html><head><title>Sample | Ignite UI | Web Components | infragistics</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" /><linkrel="stylesheet"href="/src/index.css"type="text/css" /></head><body><divid="root"><divclass="sampleContainer"><divclass="container horizontal"><igc-buttonid="restoreState"variant="contained"><igc-iconname="restore"collection="material"></igc-icon>
Restore
</igc-button><igc-buttonid="saveState"variant="contained"><igc-iconname="save"collection="material"></igc-icon>
Save
</igc-button><igc-buttonid="resetState"variant="contained"><igc-iconname="clear"collection="material"></igc-icon>
Reset
</igc-button><igc-buttonid="leavePage"variant="contained"><igc-iconname="forward"collection="material"></igc-icon>
Leave
</igc-button><igc-buttonid="clearStorage"variant="contained"><igc-iconname="delete"collection="material"></igc-icon>
Clear
</igc-button><igc-buttonid="reloadPage"variant="contained"><igc-iconname="refresh"collection="material"></igc-icon>
Reload
</igc-button></div><divclass="container horizontal"><ul><li>Clicking the SAVE button or leaving the page <aid="leaveLink"href="./grids/hierarchical-grid/state-persistence-about"><strong>here</strong></a> will save grid state to localStorage.</li><li>Use the control buttons to SAVE / RESTORE / RESET / DELETE / grid state or LEAVE the page.</li><li>Select/Deselect checkboxes to control saving / restoring feature state.</li></ul></div><divclass="container horizontal"><igc-checkboxid="allFeatures"checked>All Features</igc-checkbox><igc-checkboxid="advancedFiltering"checked>Adv. Filtering</igc-checkbox><igc-checkboxid="cellSelection"checked>Cell Selection</igc-checkbox><igc-checkboxid="columns"checked>Columns</igc-checkbox><igc-checkboxid="columnSelection"checked>Col Selection</igc-checkbox><igc-checkboxid="expansion"checked>Expansion</igc-checkbox><igc-checkboxid="filtering"checked>Filtering</igc-checkbox><igc-checkboxid="paging"checked>Paging</igc-checkbox><igc-checkboxid="rowPinning"checked>Row Pinning</igc-checkbox><igc-checkboxid="rowSelection"checked>Row Selection</igc-checkbox><igc-checkboxid="sorting"checked>Sorting</igc-checkbox><igc-checkboxid="moving"checked>Moving</igc-checkbox><igc-checkboxid="rowIslands"checked>Row Island</igc-checkbox></div><igc-hierarchical-gridid="grid"name="grid"primary-key="Photo"width="98%"height="500px"auto-generate="false"moving="true"allow-filtering="true"><igc-grid-stateid="gridState"></igc-grid-state><igc-grid-toolbar><igc-grid-toolbar-actions><igc-grid-toolbar-hiding></igc-grid-toolbar-hiding><igc-grid-toolbar-pinning></igc-grid-toolbar-pinning></igc-grid-toolbar-actions></igc-grid-toolbar><igc-action-strip><igc-grid-pinning-actions></igc-grid-pinning-actions></igc-action-strip><igc-paginator></igc-paginator><igc-columnfield="Artist"sortable="true"></igc-column><igc-columndata-type="image"field="Photo"editable="false"sortable="true"></igc-column><igc-columnfield="Debut"data-type="number"sortable="true"></igc-column><igc-columnfield="GrammyNominations"header="Grammy Nominations"data-type="number"sortable="true"></igc-column><igc-columnfield="GrammyAwards"header="Grammy Awards"data-type="number"sortable="true"></igc-column><igc-row-islandheight="null"child-data-key="Albums"id="albumsRowIsland"auto-generate="false"primary-key="Album"allow-filtering="true"><igc-columnfield="Album"sortable="true"></igc-column><igc-columnfield="LaunchDate"header="Launch Date"data-type="date"sortable="true"></igc-column><igc-columnfield="BillboardReview"header="Billboard Review"sortable="true"></igc-column><igc-columnfield="USBillboard200"header="US Billboard 200"sortable="true"></igc-column><igc-row-islandheight="null"child-data-key="Songs"id="songsRowIsland"auto-generate="false"primary-key="Number"allow-filtering="true"><igc-columnfield="Number"header="No."sortable="true"></igc-column><igc-columnfield="Title"sortable="true"></igc-column><igc-columnfield="Released"data-type="date"sortable="true"></igc-column><igc-columnfield="Genre"></igc-column></igc-row-island></igc-row-island><igc-row-islandheight="null"child-data-key="Tours"id="toursRowIsland"auto-generate="false"primary-key="Tour"allow-filtering="true"><igc-columnfield="Tour"sortable="true"></igc-column><igc-columnfield="StartedOn"header="Started on"sortable="true"></igc-column><igc-columnfield="Location"sortable="true"></igc-column><igc-columnfield="Headliner"sortable="true"></igc-column></igc-row-island></igc-hierarchical-grid></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html