グリッド：グリッドと詳細ビュー

最も単純な階層化データの扱い方は、マスター/詳細モデルです。メイン項目を選択するためのコントロールと、メイン項目の詳細を表示するためのいくつかの追加コントロールを使用します。

次の例では、マスターコントロールとしてFlexGridが使用されています。グリッドで項目を選択すると、下のコントロールに詳細が表示されます。

import * as wjCore from '@mescius/wijmo';
import * as wjInput from '@mescius/wijmo.input';
import * as wjGrid from '@mescius/wijmo.grid';

function init() {
    // ランダムデータを作成します
    var countries = 'アメリカ,ドイツ,イギリス,日本,イタリア,ギリシャ'.split(',');
    var products = 'スマートフォン,パソコン,カメラ,オーディオ'.split(',');
    var data = [];
    for (var i = 0; i < 50; i++) {
        data.push({
            id: i,
            country: countries[i % countries.length],
            product: products[i % products.length],
            date: wjCore.DateTime.addDays(new Date(), i),
            sales: Math.random() * 10000,
            expenses: Math.random() * 5000,
        });
    }

    // コンボボックスで国を表示します
    var theCombo = new wjInput.ComboBox('#theCombo', {
        itemsSource: countries,
        selectedIndexChanged: function () {
            view.refresh(); // ビューを更新して国別にフィルタリングします
        }
    });

    // 選択した国のアイテムを表示するためにCollectionViewを作成します
    var view = new wjCore.CollectionView(data, {
        filter: function (item) {
            return item.country == theCombo.text;
        }
    });

    // 選択した国のアイテムを詳細グリッドに表示します
    var theGridDetail = new wjGrid.FlexGrid('#theGridDetail', {
        itemsSource: view
    });

    // グリッドをマスターとして使用します
    var theGridMaster = new wjGrid.FlexGrid('#theGridMaster', {
        itemsSource: data,
        selectionMode: 'Row',
        isReadOnly: true,
        selectionChanged: function (s, e) {
            updateDetailControls();
        }
    });

    // 選択範囲が変更されたときに、詳細コントロールを更新します
    function updateDetailControls() {
        var item = theGridMaster.collectionView.currentItem;
        var bndCtls = document.querySelectorAll('.bnd-ctl');
        for (var i = 0; i < bndCtls.length; i++) {
            var host = bndCtls[i];
            var prop = host.id.substr(3).toLowerCase();
            var ctl = wjCore.Control.getControl(host);
            if (wjCore.isString(item[prop])) {
                ctl['text'] = item[prop];
            }
            else {
                ctl['value'] = item[prop];
            }
        }
    }

    // 現在の項目でプロパティを設定します
    function setProperty(prop, val) {
        var v = theGridMaster.collectionView;
        v.editItem(v.currentItem);
        v.currentItem[prop] = val;
        v.commitEdit();
    }

    // 詳細コントロールを定義します
    var theCountry = new wjInput.ComboBox('#theCountry', {
        itemsSource: countries,
        textChanged: function (s, e) {
            setProperty('country', s.text);
        }
    });
    var theProduct = new wjInput.ComboBox('#theProduct', {
        itemsSource: products,
        textChanged: function (s, e) {
            setProperty('product', s.text);
        }
    });
    var theDate = new wjInput.InputDate('#theDate', {
        valueChanged: function (s, e) {
            setProperty('date', s.value);
        }
    });
    var theSales = new wjInput.InputNumber('#theSales', {
        format: 'n2',
        step: 10,
        valueChanged: function (s, e) {
            setProperty('sales', s.value);
        }
    });
    var theExpenses = new wjInput.InputNumber('#theExpenses', {
        format: 'n2',
        step: 10,
        valueChanged: function (s, e) {
            setProperty('expenses', s.value);
        }
    });
}