[]
대부분의 어플리케이션에서 각 레코드와 그룹의 시작이나 끝나는 위치를 표시합니다. 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' }
]
}
]
});