Blazor Grid 상태 지속성
Blazor Grid의 Ignite UI for Blazor 상태 지속성을 사용하면 개발자가 그리드 상태를 쉽게 저장하고 복원할 수 있습니다. IgbGridState
Blazor IgbGrid
에 적용되면 개발자가 모든 시나리오에서 상태 지속성을 달성하는 데 사용할 수 있는 and ApplyStateFromString
메서드가 노출 GetStateAsString
됩니다.
Supported Features
IgbGridState
지시문은 다음 기능의 상태 저장 및 복원을 지원합니다.
- Sorting
- Filtering
- 고급 필터링
- 페이징
- CellSelection
- 행 선택
- ColumnSelection
- RowPinning
- 확장
- 그룹화 기준
- Columns
- Multi column headers
- 열 순서
- Column properties defined by the
IColumnState
interface.
Usage
직렬화 된 JSON 문자열을 GetStateAsString
반환하므로 개발자는 이를 가져와 모든 데이터 저장소(데이터베이스, 클라우드, 브라우저 localStorage 등)에 저장할 수 있습니다.
개발자는 기능 이름이 있는 배열을 인수로 전달하여 특정 기능에 대한 상태만 가져오도록 선택할 수 있습니다. 빈 배열은 기본 상태 옵션을 사용하게 됩니다.
<IgbGrid>
<IgbGridState @ref="gridState"></IgbGridState>
</IgbGrid>
@code {
// get all features` state in a serialized JSON string
string stateString = gridState.GetStateAsString(new string[0]);
// get the sorting and filtering expressions
string sortingFilteringStates = gridState.GetStateAsString(new string[] { "sorting", "filtering" });
}
ApplyStateFromString
- 이 메서드는 직렬화된 JSON 문자열을 인수로 허용하고 JSON 문자열에 있는 각 기능 또는 지정된 기능의 상태를 두 번째 인수로 복원합니다.
gridState.ApplyStateFromString(gridStateString, new string[0]);
gridState.ApplyStateFromString(sortingFilteringStates, new string[0])
객체는 Options
IgbGridStateOptions
인터페이스를 구현합니다, 즉, 특정 기능의 이름인 모든 키에 대해 이 기능 상태가 추적되는지 여부를 나타내는 부울 값이 있습니다. GetStateAsString
메서드는 이러한 기능의 상태를 반환된 값에 넣지 않으며 ApplyStateFromString
메서드는 해당 기능의 상태를 복원하지 않습니다.
gridState.Options = new IgbGridStateOptions
{
CellSelection = false,
Sorting = false
};
사용하기 쉬운 단일 지점 API를 사용하면 몇 줄의 코드로 전체 상태 유지 기능을 얻을 수 있습니다. 아래에서 코드를 복사하여 붙여 넣 으십시오 - 사용자가 현재 페이지를 떠날 때마다 브라우저 LocalStorage
개체에 그리드 상태를 저장합니다. 사용자가 기본 페이지로 돌아갈 때마다 그리드 상태가 복원됩니다. 더 이상 원하는 데이터를 얻기 위해 매번 복잡한 고급 필터링 및 정렬 표현식을 구성할 필요가 없습니다 - 한 번만 수행하고 아래 코드가 사용자를 위해 나머지 작업을 수행하도록 합니다.
@using IgniteUI.Blazor.Controls
@using Newtonsoft.Json
@implements IDisposable
@inject IJSRuntime JS
@inject NavigationManager Navigation
<IgbGrid Rendered="OnGridRendered">
<IgbGridState @ref="gridState"></IgbGridState>
<IgbColumn Field="ContactName" Header="Name" MinWidth="200px" ></IgbColumn>
<IgbColumn Field="ContactTitle" Header="Title" MinWidth="200px" Sortable="true" Filterable="true" Groupable="true"></IgbColumn>
<IgbColumn Field="CompanyName" Header="Company" MinWidth="200px" Sortable="true" Filterable="true" Groupable="true"></IgbColumn>
</IgbGrid>
@code {
protected override void OnAfterRender(bool firstRender)
{
Navigation.LocationChanged += OnLocationChanged;
}
void OnLocationChanged(object sender, LocationChangedEventArgs e)
{
SaveGridState();
}
void IDisposable.Dispose()
{
// Unsubscribe from the event when our component is disposed
Navigation.LocationChanged -= OnLocationChanged;
}
void OnGridRendered()
{
RestoreGridState();
}
async void SaveGridState() {
string state = gridState.getStateAsString(new string[0]);
await JS.InvokeVoidAsync("window.localStorage.setItem", "grid-state", state);
}
async void RestoreGridState() {
string state = await JS.InvokeAsync<string>("window.localStorage.getItem", "grid-state");
if (state) {
gridState.ApplyStateFromString(state, new string[0]);
}
}
}
Demo
Limitations
GetStateAsString
메서드는 JSON.stringify() 메서드를 사용하여 원본 객체를 JSON 문자열로 변환합니다. JSON.stringify()는 함수를 지원하지 않으므로IgbGridState
구성 요소가 열,,,,CellClasses
SortStrategy
,Filters
Summaries
및BodyTemplate
HeaderTemplate
CellStyles
속성을 무시합니다.Formatter