MultiRow 레이아웃 정의

MultiRow 컨트롤은 각 데이터 아이템을 나타내는 여러 행을 사용하여 기존 그리드 레이아웃을 확장합니다.

MultiRow 컨트롤을 사용하면 다른 기존 그리드와 마찬가지로 표 형식으로 데이터를 보고 편집할 수 있습니다. 그러나 MultiRow는 각 데이터 항목을 여러 행에 바인딩하여, 최소한의 수평 스크롤로 많은 수의 열을 표시할 수 있는 양식과 같은 인터페이스를 생성할 수 있다는 점에서 이러한 그리드와 다릅니다.

MultiRow 컨트롤은 FlexGrid 컨트롤을 확장하므로, FlexGrid 사용 방법을 알고 있다면, MultiRow를 즉시 사용할 수 있습니다. 새 주요 속성은 그리드 행과 셀의 레이아웃을 설명하는 객체를 사용하는 layoutDefinition입니다.

MultiRow 컨트롤은 기존 그리드를 단순하게 대체하지 않습니다; 일부 특정 시나리오에 매우 적합한특수 도구입니다.

어플리케이션에서 MultiRow 컨트롤을 사용하려면 wijmo, wijmo.grid,wijmo.grid.multirow 모듈에 대한 참조를 추가한 다음, 페이지에서 호스트 요소를 제공하여 MultiRow 컨트롤을 인스턴스화합니다.

layoutDefinition 속성은 그리드의 셀 레이아웃을 지정합니다. 여기에는 셀 그룹 개체의 배열이 포함됩니다. 각 셀 그룹은 그룹이 병합되어야 하는 열 수와 각 그룹을 구성하는 셀을 지정합니다.

아래 이미지는 셀 그룹이 어떻게 해석되고 그리드 레이아웃으로 변환되는지를 보여줍니다:

그룹은 3개의 그리드 열이 병합되어 있습니다. 다르게 병합된 6개 셀을 포함하고 있습니다. 레이아웃을 생성할 때 그리드는 각 행에 최대한 많은 셀을 맞추고, 그룹 병합이 되면 다음 행으로 래핑합니다. 각 행의 마지막 셀은 자동으로 확장되어 그룹의 colspan을 채웁니다. 이 프로세스는 문단 생성을 위한 텍스트 래핑과 유사합니다.

layoutDefinition 객체의 모든 그룹에 동일한 프로세스가 적용됩니다.

Code Example

import * as wjMultiRow from '@grapecity/wijmo.grid.multirow';

var multirow = new wjMultiRow.MultiRow('#multirow', {
    itemsSource: appData.orders,
    layoutDefinition: [
        {
            header: 'Order', colspan: 2, cells: [
                { binding: 'id', header: 'ID', colspan: 2, cssClass: 'id' },
                { binding: 'amount', header: 'Amount', format: 'c', colspan: 2, cssClass: 'amount' },
                { binding: 'date', header: 'Ordered' },
                { binding: 'shippedDate', header: 'Shipped' }
            ]
        },
        {
            header: 'Customer', colspan: 3, cells: [
                { binding: 'customer.name', header: 'Name' },
                { binding: 'customer.email', header: 'EMail', colspan: 2, cssClass: 'email' },
                { binding: 'customer.address', header: 'Address', colspan: 2 },
                { binding: 'customer.phone', header: 'Phone' },
                { binding: 'customer.city', header: 'City', dataMap: cityMap },
                { binding: 'customer.state', header: 'State', width: 45 },
                { binding: 'customer.zip', header: 'Zip' },
            ]
        },
        {
            header: 'Shipper', cells: [
                { binding: 'shipper.name', header: 'Shipper' },
                { binding: 'shipper.email', header: 'EMail', cssClass: 'email' },
                { binding: 'shipper.express', header: 'Express' }
            ]
        }
    ]    
});