複数行グリッド：スタイル

多くのアプリケーションでは、各レコードやグループがどこで始まりどこで終わるかを示しておくのが普通です。MultiRowコントロールは、各グループの最初と最後の行/列にあるセル要素にCSSクラス名を追加することで、これを可能にしています。クラス名はwj-record-start、wj-record-end、wj-group-start、およびwj-group-endです。

次の例は、これらのクラス名をCSSルールで使用して、レコード区切りとグループ区切りの外観をカスタマイズする方法を示します。また、標準のcssClassプロパティを使用して、グループ内の特定のセルの外観をカスタマイズする方法も示します。

/* MultiRowのカスタムスタイル設定 */
.multirow-css .wj-cell.wj-record-end:not(.wj-header) {
    border-bottom: 1px solid #000; /* レコード間の黒の細線 */
}
.multirow-css .wj-cell.wj-group-end {
    border-right: 2px solid #00b68c; /* グループ間の緑の細線 */
}
.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 '@mescius/wijmo.grid.multirow';

var styleMultirow = new wjMultiRow.MultiRow('#styleMultirow', {
    itemsSource: appData.orders,
    layoutDefinition: [
        {
            header: '受注', colspan: 2, cells: [
                { binding: 'id', header: 'ID', colspan: 2, cssClass: 'id' },
                { binding: 'amount', header: '金額', format: 'c', colspan: 2, cssClass: 'amount' },
                { binding: 'date', header: '受注日' },
                { binding: 'shippedDate', header: '出荷日' }
            ]
        },
        {
            header: '顧客', colspan: 3, cells: [
                { binding: 'customer.name', header: '顧客' },
                { binding: 'customer.email', header: 'メール', colspan: 2, cssClass: 'email' },
                { binding: 'customer.address', header: '住所', colspan: 2 },
                { binding: 'customer.phone', header: '電話番号' },
                { binding: 'customer.city', header: '都道府県', dataMap: cityMap },
                { binding: 'customer.state', header: '国', width: 45 },
                { binding: 'customer.zip', header: '郵便番号' },
            ]
        },
        {
            header: '運送業者', cells: [
                { binding: 'shipper.name', header: '運送業者' },
                { binding: 'shipper.email', header: 'メール', cssClass: 'email' },
                { binding: 'shipper.express', header: '速達' }
            ]
        }
    ]
});

複数行グリッド：スタイル