CollectionView 의미, 사용 예

컬렉션 보기

Wijmo 라이브러리

JavaScript에서 데이터를 관리하고 조작하기 위한 클라이언트측 데이터 구조

다음과 같은 용도로 사용됩니다.

'추천 관련글,

쉬운 목차

1. 데이터 소스 관리

로컬 어레이 또는 원격 서버에서 데이터 가져오기 데이터 필터링, 정렬, 그룹화 및 페이지수 있는 구조를 제공

이를 통해 그리드 및 목록과 같은 UI 컨트롤에 표시하기 전에 데이터를 효율적으로 처리할 수 있습니다.

– 그룹화

appData.groupedOrders = new wjCore.CollectionView(orders, {
    groupDescription: (
    	'customer.city'
    )
});

이 방법 도시별로 그룹화된 주문 데이터 하다

변수 “orders”는 주문 데이터를 생성하고 초기화하는 데 사용됩니다.

모든 주문 “주문ID, 주문일자, 발송일자, 주문금액, 고객정보, 발송자”. 정보를 포함하여

“orders” 배열은 나중에 여러 CollectionView 인스턴스 만들기사용

예를 들어, `appData.groupedOrders` 인스턴스를 생성할 때 `orders` 배열이 전달됩니다.
이렇게 하면 그룹화된 주문 데이터를 표시하는 컬렉션 보기가 생성됩니다.

– 컬렉션 뷰에 주문 정보를 전달하여 그리드에 주문 정보가 표시되나요?

컬렉션 보기에 주문 정보를 전달하면 그리드에서 해당 정보를 사용하여 데이터를 표시합니다.

예를 들어, 이전에 제공된 코드에서 appData.orders 인스턴스를 생성할 때 “Orders” 배열을 전달합니다.
기본 주문 세부정보 보기컬렉션 보기 만들기

appData.orders = new wjCore.CollectionView(orders);

또한 “orders” 배열은 다른 CollectionView 인스턴스가 생성될 때 전달됩니다.

예를 들어 다음과 같이 그룹화된 주문을 표시하는 컬렉션 보기를 만듭니다.

appData.groupedOrders = new wjCore.CollectionView(orders, {
    groupDescription: (
    	'customer.city'
    )
});

마지막으로 “주문” 정보를 컬렉션 보기에 전달하면 그리드는 적절한 데이터를 표시하고 필요에 따라 필터링, 정렬, 그룹화 및 페이징과 같은 기능을 사용합니다.

– 인스턴스를 appData.groupedOrders 형식으로 설정하는 이유

애플리케이션 데이터이 예제에서 사용된 사용자 지정 개체입니다.

이 개체 여러 컬렉션 보기 인스턴스 및 데이터 저장 및 관리사용

`appData.groupedOrders`동일한 형식을 사용하는 이유는 편의성 때문입니다.

appData 개체에는 다음과 같이 여러 Data 및 CollectionView 인스턴스가 포함되어 있습니다.

appData.orders = new wjCore.CollectionView(orders);
appData.groupedOrders = new wjCore.CollectionView(orders, { /*...*/ });
appData.pagedOrders = new wjCore.CollectionView(orders, { /*...*/ });
appData.addNewOrders = new wjCore.CollectionView(orders, { /*...*/ });

이렇게 하면 여러 CollectionView 인스턴스를 쉽게 참조하고 사용할 수 있습니다.

이 구조는 일반적인 JavaScript 구조입니다.

여기에 사용된 appData는 기본 JavaScript 문이나 내장 개체가 아닌 사용자 지정 개체일 뿐입니다.

이 구조는 코드 가독성과 유지 관리를 돕기 위해 사용됩니다.

– appData.orders에서 appData를 생략하고 다른 변수 이름을 사용할 수 있습니까?

appData 개체 없이 각 CollectionView 인스턴스를 별도의 변수로 선언할 수 있습니다.

let ordersCV = new wjCore.CollectionView(orders);
let groupedOrdersCV = new wjCore.CollectionView(orders, { /*...*/ });
let pagedOrdersCV = new wjCore.CollectionView(orders, { /*...*/ });
let addNewOrdersCV = new wjCore.CollectionView(orders, { /*...*/ });

다음과 같이 appData 객체를 사용하지 않고 각 CollectionView 인스턴스를 단일 변수로 선언하면 appData 개체의 초기 선언 및 반환은 필요하지 않습니다.

하지만 애플리케이션 데이터 개체의 사용 관련 데이터를 구조화하여 한 곳으로 모을 수 있습니다.
코드 가독성 및 유지보수성 향상

따라서 앱의 크기와 복잡도에 따라 적절한 방식을 선택하는 것이 필요하다.

2. 데이터 바인딩

데이터 및 UI 컨트롤을 쉽게 연결할 수 있습니다.

이렇게 하면 UI 컨트롤이 자동으로 데이터 변경 사항을 추적하고 데이터 변경에 따라 업데이트합니다.

– appData.IdOneLine : 레이아웃 정의(전통적인 그리드 보기)

appData.ldOneLine = (
    { cells: ({ binding: 'id', header: 'ID', cssClass: 'id', isReadOnly: true }) },
    // ...
    { cells: ({ binding: 'customer.name', header: 'Customer' }) },
    // ...
    { cells: ({ binding: 'shipper.name', header: 'Shipper' }) },
    // ...
);

– appData.IdTwoLines: 레이아웃 정의(압축 보기)

appData.ldTwoLines = (
    {
        header: 'Order', colspan: 2, cells: (
            { binding: 'id', header: 'ID', cssClass: 'id', isReadOnly: true },
            // ...
        )
    },
    {
        header: 'Customer', colspan: 3, cells: (
            { binding: 'customer.name', header: 'Name' },
            // ...
        )
    },
    {
        header: 'Shipper', cells: (
            { binding: 'shipper.name', header: 'Shipper', colspan: 2 },
            // ...
        )
    }
);

– appData.IdThreeLines: 레이아웃 정의(상세 보기)

appData.ldThreeLines = (
    {
        header: 'Order', colspan: 2, cells: (
            { binding: 'id', header: 'ID', colspan: 2, cssClass: 'id' },
            // ...
        )
    },
    {
        header: 'Customer', colspan: 3, cells: (
            { binding: 'customer.name', header: 'Name' },
            // ...
        )
    },
    {
        header: 'Shipper', cells: (
            { binding: 'shipper.name', header: 'Shipper' },
            // ...
        )
    }
);

위의 코드에서 속성은 “바인딩”입니다.
데이터를 특정 셀에 바인딩 사용

여기에 사용된 바인딩 표현은 주문, 고객 및 배송업체 데이터를 나타냅니다.

이와 같이 데이터를 바인딩하면 그리드에 표시된 데이터가 데이터 소스 값을 반영합니다.

– 이와 같이 데이터를 하드코딩하는 대신 서버에서 데이터를 로드하는 방법

// 서버에서 데이터 가져오기
$.ajax({
  url: "your_data_endpoint",
  type: "GET",
  dataType: "json",
  success: function (data) {
    // 데이터를 가져온 후에 CollectionView 인스턴스 생성
    let ordersCV = new wjCore.CollectionView(data);

    // 필요한 경우 CollectionView 인스턴스에 그룹화, 정렬, 필터링, 페이징 등 적용
    // ...

    // 그리드에 CollectionView 인스턴스 바인딩
    let grid = new wjGrid.FlexGrid("#grid", {
      itemsSource: ordersCV
    });

    // 그리드 레이아웃 정의
    let ldOneLine = { ... };
    let ldTwoLines = { ... };
    let ldThreeLines = { ... };

    // 그리드에 레이아웃 적용
    grid.layoutDefinition = ldOneLine; // 기본 레이아웃 선택

    // 사용자 인터페이스를 통해 레이아웃 전환
    // 예를 들어, 버튼 클릭 이벤트에 해당 코드를 연결
    $("#oneLineView").on("click", function () {
      grid.layoutDefinition = ldOneLine;
    });
    $("#twoLineView").on("click", function () {
      grid.layoutDefinition = ldTwoLines;
    });
    $("#threeLineView").on("click", function () {
      grid.layoutDefinition = ldThreeLines;
    });
  },
  error: function (xhr, status, error) {
    console.error("Error fetching data:", error);
  }
});

기존 코드에 레이아웃 정의 객체가 포함됨(ldOneLine, ldTwoLines, ldThreeLines)가 생성되지만 그리드에 자동으로 적용되지는 않습니다.

따라서 그리드의 레이아웃을 변경하려면 기본 레이아웃을 설정해야 합니다.

예를 들어 기본 레이아웃을 IdOneLine으로 설정하려면 다음과 같은 코드를 추가할 수 있습니다.