[FlexGrid] ディレクティブ（AngularJS）を使用して作成したグリッドにて列ヘッダとセルのテキストアラインを分けて設定する方法

by Wijmo5_jp

HTML

<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/cultures/wijmo.culture.ja.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/interop/angular/wijmo.angular.min.js"></script>
<div ng-app="app" ng-controller="appCtrl">
    <wj-flex-grid items-source="data">
        <wj-flex-grid-column binding="受注コード" align="center"></wj-flex-grid-column>
        <wj-flex-grid-column binding="会社名" align="center" css-class="css_left"></wj-flex-grid-column>
        <wj-flex-grid-column binding="受注日" align="center" css-class="css_right" format="yyyy/MM/dd"></wj-flex-grid-column>
        <wj-flex-grid-column binding="金額" align="center" css-class="css_right" format="n2"></wj-flex-grid-column>
        <wj-flex-grid-column binding="出荷済" align="center"></wj-flex-grid-column>
    </wj-flex-grid>
</div>

CSS

.css_left{
    text-align: left !important;
}

.css_right{
    text-align: right !important;
}

JavaScript

var app = angular.module('app', ['wj']);
var grid1;
var grid2;

app.controller('appCtrl', function appCtrl($scope) {
    $scope.data = new wijmo.collections.CollectionView(createData(5));
});


function createData(count) {
    var data = [];
    var customers = '小料理なんごく,割烹ふじい,海鮮料理くじら,居酒屋ななべえ,酒蔵でん,寿ストアー,温泉レストラン,大和マーケット,東海道スーパー,小町ストアー'.split(',');
    for (var i = 0; i < count; i++) {
        data.push({
            受注コード: i,
            会社名: customers[random(customers.length)],
            受注日: new Date(Date.now() - random(1000000000)),
            金額: random(1000) * 100,
            出荷済: random(2) === 0
        });
    }
    return data;
}

function random(max) {
    return Math.floor(Math.random() * max);
}