[FlexGrid] ディレクティブ（AngularJS）を使用して作成したグリッドにJavaScriptからアクセスする方法

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">
    ■方法1 （control属性を使用する方法）
    <wj-flex-grid selection-mode="Row" items-source="data1" control="flex" style="height:200px">
    </wj-flex-grid>
    <input type="button" value="内容取得1" onclick="getGridData1()" />
    <span id="text1"></span>
    <br />
    <br />
    ■方法2 （initialized属性を使用する方法）
    <wj-flex-grid selection-mode="Row" items-source="data2" initialized="init(s,e)" style="height:200px">
    </wj-flex-grid>
    <input type="button" value="内容取得2" onclick="getGridData2()" />
    <span id="text2"></span>
</div>

JavaScript

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

app.controller('appCtrl', function appCtrl($scope) {

    $scope.data1 = new wijmo.collections.CollectionView(createData(20));
    $scope.data2 = new wijmo.collections.CollectionView(createData(20));

    // control属性に設定した文字列でグリッドへの参照を取得します
    $scope.$watch('flex', function () {
        grid1 = $scope.flex;
    });

    // initialized属性に設定した初期化処理にてグリッドへの参照を取得します
    $scope.init = function (s, e) {
        grid2 = s;
    }
});

function getGridData1() {
    var cv = grid1.itemsSource;
    var item = cv.items[grid1.selection.row];
    document.getElementById("text1").innerHTML = item.受注コード + ': ' + item.会社名 + ': ' + item.受注日 + ': ' + item.金額 + ': ' + item.出荷済;
}

function getGridData2() {
    var cv = grid2.itemsSource;
    var item = cv.items[grid2.selection.row];
    document.getElementById("text2").innerHTML = item.受注コード + ': ' + item.会社名 + ': ' + item.受注日 + ': ' + item.金額 + ': ' + item.出荷済;
}

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