멀티행 | MultiRow

MultiRow 레이아웃 정의

MultiRow 컨트롤은 각 데이터 항목을 표시하기 위해 여러 행을 사용하여 기존의 그리드 레이아웃을 확장합니다.

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

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

MultiRow 컨트롤은 기존 그리드를 단순하게 대체하는 것이 아닌 일부 특정 시나리오에 매우 적합한 전문 툴입니다.

응용 프로그램에서 MultiRow 컨트롤을 사용하려면 wijmo, wijmo.grid 및 wijmo.grid.multirow 모듈에 대한 참조를 추가한 다음 페이지에 호스트 요소를 제공하여 MultiRow 컨트롤을 인스턴스화합니다.

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

코드 예제

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' }
            ]
        }
    ]    
});

MultoRow에서 축소 가능한 열 머리글

기본적으로 MultiRow 컨트롤은 여러 행에 걸쳐 열 머리글을 만들고 layoutDefinition에서 정의된 각 셀의 헤더를 표시합니다.

이러한 셀별 열 헤더는 기존 그리드에서와 같이 데이터를 정렬하거나 필터링하는 데 사용될 수 있습니다.

경우에 따라 개별 셀이 아닌 그룹 이름만 표시하면서 열 헤더를 한 줄로 축소할 수 있습니다. 이렇게 하면 개별 셀 헤더를 갖는 데 드는 공간을 절약할 수 있습니다. 열 머리글을 접으려면 collapsedHeaders속성을 true로 설정해야 합니다. 이러한 경우에서는 빈 열 머리글을 방지하려면 그룹에 헤더 속성을 설정해야 합니다.

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

var chMultirow = new wjMultiRow.MultiRow('#chMultirow', {
    itemsSource: appData.orders,
    layoutDefinition: appData.ldThreeLines,
    collapsedHeaders: true,
    showHeaderCollapseButton: true
});

MultiRow 스타일링 레코드 그룹과 셀

대부분의 응용 프로그램에서 각 레코드 및 그룹이 시작 또는 끝나는 위치를 표시하고 싶을 수 있습니다. MultiRow 컨트롤을 CSS 클래스 이름을 각 그룹의 첫 번째 행과 마지막 행/열의 셀 요소에 추가하여 활성화할 수 있습니다. 클래스 이름은 wj-record-start, wj-record-end, wj-group-start, wj-group-end입니다.

아래 예제는 CSS 규칙에서 이러한 클래스 이름을 사용하여 레코드 및 그룹 구분 기호 모양을 사용자 지정하는 방법을 보여줍니다. 또한 표준 cssClass 속성을 사용하여 그룹 내 특정 셀의 모양을 사용자 지정할 수 있는 방법도 보여줍니다.

/* custom styling for a MultiRow */

.multirow-css .wj-cell.wj-record-end:not(.wj-header) {
    border-bottom: 1px solid #000; /* thin black lines between records */
}
.multirow-css .wj-cell.wj-group-end {
    border-right: 2px solid #00b68c; /* thick green lines between groups */
}
.multirow-css .wj-cell.id {
    color: #c0c0c0;
}
.multirow-css .wj-cell.amount { 
    color: #014701;
    font-weight: bold;
}
.multirow-css .wj-cell.email {
    color: #0010c0;
    text-decoration: underline;
}

cssClass 속성은 layoutDefinition에 추가할 수 있습니다.

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

var styleMultirow = new wjMultiRow.MultiRow('#styleMultirow', {
    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' }
            ]
        }
    ]
});