MultiRow入門 | Wijmo
Wijmo

MultiRow入門

このページでは、Wijmo MultiRowコントロールを使用する基本的な方法を示します。

はじめに

MultiRowコントロールは、従来のグリッドレイアウトを拡張し、複数の行を使用して各データ項目を表現します。

MultiRowコントロールでは、従来のグリッドのように表形式でデータを表示して編集できます。 従来のグリッドと異なるのは、MultiRowは各データ項目を複数の行にまとめて、最小限の水平スクロールで多数の列を表示できるフォーム状のインタフェースを作成できることです。

MultiRowコントロールはFlexGridコントロールの拡張コントロールです。FlexGridの使用方法を知っていれば、すぐにMultiRowを使用できます。 新しい重要なプロパティは、グリッド行とセルのレイアウトを記述するlayoutDefinitionオブジェクトです。

MultiRowコントロールは、単に従来のグリッドの代わりに使用されるだけでなく、ある種の用途にぴったり合う特殊ツールです。

アプリケーションでMultiRowコントロールを使用するには、wijmowijmo.grid、およびwijmo.grid.multirowモジュールへの参照を追加し、次にページ内のホスト要素を指定してMultiRowコントロールをインスタンス化します。または、AngularJSを使用している場合はwj-multi-rowディレクティブを追加します。

HTML
<!DOCTYPE html> <html> <head> <link href="styles/vendor/wijmo.css" rel="stylesheet" /> <script src="scripts/vendor/wijmo.min.js"></script> <script src="scripts/vendor/wijmo.grid.min.js"></script> <script src="scripts/vendor/wijmo.grid.multirow.min.js"></script> <head> <body> <!-- using AngularJS --> <wj-multi-row items-source="data" layout-definition="layoutDef"> </wj-multi-row> <!-- using pure JS --> <div id="multirow"></div> </body> </html>
JS
onload = function() { // create and initialize the MultiRow using pure JavaScript var theMultiRow = new wijmo.grid.multirow.MultiRow('#multirow', { itemsSource: getData(), columnLayout: getColumnLayout() }); }

MultiRowのレイアウト定義

MultiRowコントロールは複数の行を使用して各レコードを表示します。 レコードのレイアウトはlayoutDefinitionプロパティによって定義されます。

layoutDefinitionプロパティには、次のプロパティを持つセルグループオブジェクトの配列が入っています。

次の例は、layoutDefinitonプロパティの使用方法を示します。

ここで、同じデータをさまざまなレイアウトのMultiRowコントロールで表示してみましょう。 コンボボックスを使用してレイアウト定義を選択すると、グリッドにデータをさまざまな方法でグループ化できます。 MultiRowコントロールが、編集、ソート、フィルタ処理、列のサイズ変更などの通常のグリッド機能をすべて提供していることに注目してください。

HTML
<wj-multi-row items-source="orders" layout-definition="layoutDefs.currentItem.def"> </wj-multi-row> <wj-combo-box items-source="layoutDefs" display-member-path="name" selected-index-changed="layoutDefChanged(s,e)"> </wj-combo-box> <p> {​{ layoutDefs.currentItem.description }}</p>
JS
// sample layout definitions $scope.layoutDefs = new wijmo.collections.CollectionView([ { name: 'Traditional', description: 'Traditional grid view, with one row per record. The user must scroll horizontally to see the whole record.', def: [ { cells: [{ binding: 'id', header:'ID' }]}, { cells: [{ binding: 'date', header:'Ordered' }]}, { cells: [{ binding: 'shippedDate', header:'Shipped' }]}, // ... one group per column ... ] }, { name: 'Compact', description: 'This view uses two rows per record. The layout is divided into three column groups: order, customer, and shipper', def: [ { header: 'Order', colspan: 2, cells: [ { binding: 'id', header: 'ID' }, { binding: 'date', header: 'Ordered' }, { binding: 'amount', header: 'Amount' }, { binding: 'shippedDate', header: 'Shipped' } ] }, // ... two more groups for customers and shippers ... ] }, { name: 'Detailed', description: 'This view uses three rows per record. The layout is divided into three column groups: order, customer, and shipper', def: [ { header: 'Order', colspan: 2, cells: [ { binding: 'id', header: 'ID', colspan: 2 }, { binding: 'amount', header: 'Amount', colspan: 2 }, { binding: 'date', header: 'Ordered' }, { binding: 'shippedDate', header: 'Shipped' } ] }, // ... two more groups for customers and shippers ... ] } ]);

結果 (ライブ):

{{ layoutDefs.currentItem.description }}

layoutDefinitionプロパティはグリッド内のセルのレイアウトを指定します。 このプロパティには、セルグループオブジェクトの配列が含まれます。 各セルグループは、グループが占める列の数と、各グループを構成するセルを指定します。

次の図は、セルグループがどのように解釈されてグリッドレイアウトになるかを示します。

cell group

このグループの幅はグリッド列3つ分です。 その中に、さまざまな幅を持つ6つのセルが含まれます。 レイアウトの生成時、グリッドは各行にできるだけ多くのセルを入れ、グループ幅に達すると次の行の先頭にセルを配置します。 各行の最後のセルは、グループのcolspan全体に自動的に拡大されます。 この処理は、テキストの行を折り返して段落を作成する方法に似ています。

同じ処理がlayoutDefinitionオブジェクト内のすべてのグループに適用されます。

折りたたみ可能な列ヘッダー

デフォルトでは、MultiRowコントロールは複数の行から成る列ヘッダーを作成します。ここに、layoutDefinitionで定義された各セルのヘッダーが表示されます。

これらセル固有の列ヘッダーは、標準グリッドと同様に、データのソートやフィルタ処理に使用できます。

列ヘッダーを1行に折りたたみ、個別のセルではなくグループ名だけを表示した方がよい場合もあります。 そうすると、個別のセルヘッダーを表示するよりもスペースの節約になります。 列ヘッダーを折りたたむには、collapsedHeadersプロパティをtrueに設定します。 その場合は、列ヘッダーが空欄にならないように、グループのheaderプロパティを忘れずに設定してください。

HTML
<wj-multi-row items-source="orders" layout-definition="ldThreeLines" collapsed-headers="{​{ true }}" show-header-collapse-button="{​{ true }}" control="hdrGrid"> </wj-multi-row> <label> <input type="checkbox" ng-model="hdrGrid.collapsedHeaders"> CollapsedHeaders </label> <label> <input type="checkbox" ng-model="hdrGrid.showHeaderCollapseButton"> Show Header Collapse Button </label>
JS
// no code required

結果 (ライブ):


完全に展開された列ヘッダー

collapsedHeadersプロパティをtrueに設定すると、グリッドはグループ名を含む列ヘッダーの単一の行を表示します。 falseに設定すると、データと同じレイアウトの行グループとセルの列名が表示されます。

グループ名と列名の両方を表示する場合は、collapsedHeadersプロパティをnullに設定します。

グループと列の両方のヘッダーを表示する場合は、CSSを使用して外観を区別することもできます。 これは、グループヘッダーに追加されたwj-group-headerクラスを使用して簡単に行うことができます。

以下のサンプルで例を示します。

HTML
<wj-multi-row items-source="orders" layout-definition="ldThreeLines" initialized="initExpandAll(s, e)" class="expanded-groups"> </wj-multi-row>
JS
// setting collapsedHeaders to null shows // both group and column headers $scope.initExpandAll = function (s, e) { s.collapsedHeaders = null; }
CSS
/* custom styling for group headers */ .expanded-groups .wj-cell.wj-group-header { background-color: #abcfc7; }

結果 (ライブ):

レコード、グループ、セルのスタイル設定

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

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

HTML
<wj-multi-row class="multirow-css" items-source="orders" layout-definition="ldThreeLines"> </wj-multi-row>
CSS
/* custom styling for a MultiRow */ .multirow-css .wj-cell.wj-record-end:not(.wj-header) { border-bottom-color: #8fabff; /* blue lines between records */ } .multirow-css .wj-cell.wj-group-end { border-right-color: #bc5505; /* brown 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; }

結果 (ライブ):

グループ化

標準のFlexGridと同様に、MultiRowコントロールはCollectionViewベースのグループ化をサポートします。 グループ化を使用するには、生データに基づいてCollectionViewを作成し、1つ以上のGroupDescriptionオブジェクトをコレクションのGroupDescriptions配列に追加します。

HTML
<wj-multi-row items-source="groupedOrders" layout-definition="ldThreeLines" group-header-format="City: <b>{value} </b>({count:n0} items)" control="groupingGrid"> </wj-multi-row> <label> <input type="checkbox" ng-model="groupingGrid.showGroups"> Show Groups </label> <br /> <button class="btn" ng-click="groupingGrid.collapseGroupsToLevel(0)"> Collapse All </button> <button class="btn" ng-click="groupingGrid.collapseGroupsToLevel(10)"> Expand All </button>
JS
// expose grouped orders to the controller $scope.groupedOrders = new wijmo.collections.CollectionView(orders, { groupDescriptions: [ 'customer.city', ], newItemCreator: function () { return { // add empty customer and shipper objects to new orders customer: {}, shipper: {} } }, });

結果 (ライブ):


フィルタ処理

FlexGridと同様に、MultiRowコントロールはフィルタ処理をサポートします。

フィルタ処理はwijmo.grid.filter.FlexGridFilterクラスによって提供されます。 MultiRowにフィルタ処理のUIを追加するには、MultiRowをコンストラクタのパラメータとして渡してFlexGridFilterを作成します。

AngularJSを使用している場合は、wj-flex-grid-filterディレクティブをグリッドのディレクティブの子として埋め込むことで、グリッドにフィルタを追加することもできます。

HTML
<wj-multi-row items-source="orders" layout-definition="ldThreeLines" initialized="initFlexFilter(s, e)"> </wj-multi-row>
JS
// add a filter to the MultiRow $scope.initFlexFilter = function (s, e) { var filter = new wijmo.grid.filter.FlexGridFilter(s); }

結果 (ライブ):

行および列の固定

MultiRowコントロールを使用すると、行や列を固定して、それらを常に表示したままグリッドをスクロールすることができます。 ExcelやFlexGridコントロールと同様に、固定されたセルも通常のセルとして編集したり選択することができます。

次の例では、最初の行グループと列グループを固定するかどうかを切り替えることができます。

HTML
<wj-multi-row items-source="orders" layout-definition="ldTwoLines" control="frozenGrid"> </wj-multi-row> <button class="btn btn-default" ng-click="toggleFreeze(2, 2)"> {​{ frozenGrid.frozenRows == 0 ? 'Freeze' : 'Unfreeze' }} </button>
JS
// toggle frozen rows/columns $scope.toggleFreeze = function (rows, cols) { var flex = $scope.frozenGrid; if (flex) { flex.frozenColumns = flex.frozenColumns ? 0 : cols; flex.frozenRows = flex.frozenRows ? 0 : rows; } }
CSS
/* custom styling for frozen cells */ .wj-cell.wj-frozen:not(.wj-header):not(.wj-group):not(.wj-state-selected):not(.wj-state-multi-selected) { background-color: #f3fbcc; }

結果 (ライブ):

ページング

MultiRowコントロールは、.NETとほぼ同じIPagedCollectionViewインタフェースを介して、ページングをサポートします。 ページングを有効にするには、各ページに表示する項目数をIPagedCollectionView.pageSizeプロパティに設定し、ページ間を移動するためのUIを提供します。

この例では、JavaScriptを使用し、ページあたり4項目を表示します。 いくつかのナビゲーションボタンを追加し、ボタンクリックディレクティブからIPagedCollectionViewのメソッドを呼び出します。 pageIndexプロパティとpageCountプロパティを使用して、現在のページと合計ページ数を表示します。

HTML
<wj-multi-row items-source="pagedOrders" layout-definition="ldThreeLines"> </wj-multi-row> <div class="btn-group"> <button type="button" class="btn" ng-click="pagedOrders.moveToFirstPage()"> <span class="glyphicon glyphicon-fast-backward"></span> </button> <button type="button" class="btn" ng-click="pagedOrders.moveToPreviousPage()"> <span class="glyphicon glyphicon-step-backward"></span> </button> <button type="button" class="btn" disabled style="width:100px"> {{ pagedOrders.pageIndex + 1 | number }} / {{ pagedOrders.pageCount | number }} </button> <button type="button" class="btn" ng-click="pagedOrders.moveToNextPage()"> <span class="glyphicon glyphicon-step-forward"></span> </button> <button type="button" class="btn" ng-click="pagedOrders.moveToLastPage()"> <span class="glyphicon glyphicon-fast-forward"></span> </button> </div>
JS
// expose paged orders to the controller $scope.pagedOrders = new wijmo.collections.CollectionView(orders, { pageSize: 4 });

結果 (ライブ):

レコードの追加と削除

MultiRowコントロールは、FlexGridから提供されるallowAddNewプロパティとallowDeleteプロパティをサポートします。

allowAddNewプロパティをtrueに設定すると、グリッドの下端に「新しい行テンプレート」の行一式が表示されます。 新しい行テンプレートにあるセルの編集を開始すると、ソースコレクションに新しい項目が追加されます。 新しい項目の編集を終了すると(別の行を選択したり、フォーカスを別のコントロールに移動すると)、新しい項目がコミットされます。

allowDeleteプロパティをtrueに設定すると、グリッドはキー入力を監視します。行全体を選択しているときに[Del]キーを押すと、現在の行が削除されます。

HTML
<wj-multi-row items-source="addNewOrders" layout-definition="ldThreeLines" show-groups="false" allow-add-new="true" allow-delete="true" control="addNewGrid"> </wj-multi-row> <label> <input type="checkbox" ng-model="addNewGrid.allowAddNew"> Allow Add New </label> <br/> <label> <input type="checkbox" ng-model="addNewGrid.allowDelete"> Allow Delete </label>
JS
// create 'addNewOrders' collection, start with last item selected $scope.addNewOrders = new wijmo.collections.CollectionView(orders); $scope.addNewOrders.moveCurrentToLast();
CSS
/* custom styling for new row templates */ .wj-cell.wj-new:not(.wj-header):not(.wj-group):not(.wj-state-selected):not(.wj-state-multi-selected) { background-color: #f3fbcc; }

結果 (ライブ):