React Grid 원격 데이터 작업

    기본적으로 데이터IgrGrid 작업을 수행하는 데 자체 로직을 사용합니다.

    이러한 작업은 원격으로 수행하고, 특정 입력과 이벤트를 활용하여 데이터를IgrGrid 제공할 수 있습니다.IgrGrid​

    Infinite Scroll

    엔드포인트에서 청크별로 데이터를 가져오는 시나리오에서 인기 있는 설계 중 하나는 이른바 무한 스크롤입니다. 데이터 그리드의 경우, 최종 사용자가 맨 아래까지 스크롤하면서 로드된 데이터가 지속적으로 증가하는 것이 특징입니다. 다음 단락에서는 제공되는 API를 활용해 무한 스크롤IgrGrid을 쉽게 구현하는 방법을 설명합니다.

    무한 스크롤을 구현하려면 데이터를 청크로 가져와야 합니다. 이미 가져온 데이터는 로컬에 저장되어야 하며, 청크의 길이와 청크의 수를 결정해야 합니다. 또한 그리드에서 마지막으로 보이는 데이터 행 인덱스를 추적해야 합니다. 이렇게 하여 andStartIndex 속성을 사용하여ChunkSize 사용자가 위로 스크롤해서 이미 가져온 데이터를 보여줘야 하는지, 아니면 아래로 스크롤해서 끝에서 더 많은 데이터를 가져와야 하는지 판단할 수 있습니다.

    가장 먼저 해야 할 일은 데이터의 첫 번째 청크를 가져오는 것입니다. 속성 설정totalItemCount은 그리드가 스크롤바 크기를 정확히 조절할 수 있게 해주기 때문에 중요합니다.

    또한, 출력에DataPreLoad 구독해야 하므로, 그리드가 현재 로드된 청크가 아닌 다른 청크를 표시하려고 할 때 필요한 데이터를 제공할 수 있습니다. 이벤트 핸들러에서는 이미 로컬에 캐시된 데이터를 가져오거나 반환할지 결정해야 합니다.

    Infinite Scroll Demo

    Remote Paging

    페이징 기능은 원격 데이터로 작동할 수 있습니다. 이를 시연하기 위해 먼저 데이터 가져오기를 담당할 서비스를 선언하겠습니다. 페이지 수를 계산하려면 모든 데이터 항목의 수가 필요합니다. 이 로직은 우리 서비스에 추가될 예정입니다.

    const CUSTOMERS_URL = `https://data-northwind.indigo.design/Customers/GetCustomersWithPage`;

export class RemoteService {

    public static getDataWithPaging(pageIndex?: number, pageSize?: number) {
        return fetch(this.buildUrl(CUSTOMERS_URL, pageIndex, pageSize))
        .then((result) => result.json());
    }

    private static buildUrl(baseUrl: string, pageIndex?: number, pageSize?: number) {
        let qS = "";
        if (baseUrl) {
                qS += `${baseUrl}`;
        }

        // Add pageIndex and size to the query string if they are defined
        if (pageIndex !== undefined) {
            qS += `?pageIndex=${pageIndex}`;
            if (pageSize !== undefined) {
                qS += `&size=${pageSize}`;
            }
        } else if (pageSize !== undefined) {
            qS += `?perPage=${pageSize}`;
        }

        return `${qS}`;
    }
}

    서비스를 선언한 후에는 구성 요소 하나를 만들어야 하며, 이 컴포넌트는 구축과 데이터 구독을 담당IgrGrid 합니다.

         <IgrGrid
          ref={grid}
          data={data}
          pagingMode="remote"
          primaryKey="customerId"
          height="600px"
          isLoading={isLoading}
        >
        <IgrPaginator
          perPage={perPage}
          ref={paginator}
          onPageChange={onPageNumberChange}
          onPerPageChange={onPageSizeChange}>
        </IgrPaginator>
          <IgrColumn field="customerId" hidden={true}></IgrColumn>
          <IgrColumn field="companyName" header="Company Name"></IgrColumn>
          <IgrColumn field="contactName" header="Contact Name"></IgrColumn>
          <IgrColumn field="contactTitle" header="Contact Title"></IgrColumn>
          <IgrColumn field="address.country" header="Country"></IgrColumn>
          <IgrColumn field="address.phone" header="Phone"></IgrColumn>
        </IgrGrid>

    그런 다음 상태를 설정합니다.

      const grid = useRef<IgrGrid>(null);
  const paginator = useRef<IgrPaginator>(null);
  const [data, setData] = useState([]);
  const [page, setPage] = useState(0);
  const [perPage, setPerPage] = useState(15);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    loadGridData(page, perPage);
  }, [page, perPage]);

    마지막으로 데이터를로드하는 방법을 설정하십시오.

      function loadGridData(pageIndex?: number, pageSize?: number) {
    // Set loading state
    setIsLoading(true);

    // Fetch data
    RemoteService.getDataWithPaging(pageIndex, pageSize)
      .then((response: CustomersWithPageResponseModel) => {
        setData(response.items);
        // Stop loading when data is retrieved
        setIsLoading(false);
        paginator.current.totalRecords = response.totalRecordsCount;
      })
      .catch((error) => {
        console.error(error.message);
        setData([]);
        // Stop loading even if error occurs. Prevents endless loading
        setIsLoading(false);
      })
  }

    추가 참조는 아래의 전체 샘플을 확인하십시오.

    Grid Remote Paging Demo

    마지막으로 RowIslands에 대한 동작을 설정합니다.

    Known Issues and Limitations

    • 그리드에 세트가 없primaryKey 고 원격 데이터 시나리오가 활성화되어 있을 때(페이징, 정렬, 필터링, 스크롤 시 원격 서버에 표시할 데이터를 가져오기 요청이 트리거될 때), 데이터 요청이 완료된 후 다음 상태가 줄로 사라집니다:

    • 행 선택

    • 행 확장/축소

    • 행 편집

    • 행 고정

    API References

    Additional Resources

    우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.