5.20193.637
wijmo.vue2.grid Wijmo API モジュール

wijmo.vue2.grid モジュール

Vue 2用のWijmo相互運用モジュール。

このモジュールは、Wijmoコントロールをカプセル化したVue 2コンポーネントを提供します。

これを使用するには、Vue 2フレームワーク(RC6以上)への参照、 および 通常のWijmo CSSファイルとjsファイルをアプリケーションに含める必要があります。

VueページにWijmoコントロールを追加するには、 HTMLファイルに適切なタグを含めます。 たとえば、次のコードは、 Vueページに InputNumber コントロールを追加します。

<wj-input-number
format="c2"
placeholder="Sales"
:value="sales"
:value-changed="salesChanged"
:min="0"
:max="10000"
:step="100"
:is-required="false">
</wj-input-number>
// Wijmoイベントハンドラ
// InputNumber値と比較する"sales"値を更新します 
function salesChanged(sender, eventArgs) {
this.sales = sender.value;
}

この例は、次の重要なポイントを示しています。

  1. Wijmoコントロールのタグ名は、"wj"プリフィックスで始まり、 その後に 英小文字とハイフン区切り文字を使用したコントロール名が続きます。
  2. タグ属性名は、コントロールのプロパティやイベントと同じです。
  3. 属性名の前のコロンは、属性値がJavaScript式として 解釈されることを示します ( :min="0"など)。
  4. イベントハンドラは、通常のプロパティと同様に指定します ( :value-changed="salesChanged"など)。
  5. Vue2では、すべての連結が一方向です。上の例では、"salesChanged" イベントハンドラは、 モデル内の"sales"プロパティの値を更新します。 これはVue 1からの変更点です。 Vue 1では、どのような属性にでも ".sync"サフィックスを追加することで、双方向連結を作成できます。

すべてのWijmo Vueコンポーネントには、"initialized"イベントがあります。 これは、コントロールがページに追加されて初期化された後に発生します。 このイベントを使用して、マークアップでプロパティを設定するほかに、 追加的な初期化を実行できます。次に例を示します。

<wj-flex-grid :initialized="initGrid">
</wj-flex-grid>
// Vue アプリケーション
var app = new Vue({
el: '#app',
methods: {
    initGrid: function(s, e) {
    // グリッドにカスタムMergeManagerを割り当てます
    s.mergeManager = new CustomMergeManager(s);
    }
}
});

変数

WjFlexGrid

WjFlexGrid: any

wijmo.grid.FlexGrid コントロールをカプセル化するVueコンポーネント。 次の例は、Vueマークアップで wijmo.grid.FlexGrid コントロールをインスタンス化して初期化する方法を示します。

<wj-flex-grid
:items-source="data">
<wj-flex-grid-column binding="name" header="Name">
</wj-flex-grid-column>
<wj-flex-grid-column binding="sales" header="Sales" format="c0">
</wj-flex-grid-column>
<wj-flex-grid-column binding="expenses" header="Expenses" format="c0">
</wj-flex-grid-column>
<wj-flex-grid-column binding="active" header="Active">
</wj-flex-grid-column>
<wj-flex-grid-column binding="date" header="Date">
</wj-flex-grid-column>
</wj-flex-grid>

このコードは、グリッドデータを含むコレクションをitemsSource プロパティに設定してから、 wj-flex-grid-column コンポーネントを使用して表示する列を指定します。

WjFlexGridCellTemplate

WjFlexGridCellTemplate: any

Vue component for the FlexGrid cell templates.

The wj-flex-grid-cell-template component defines a template for a certain cell type in FlexGrid. The template element must contain a cellType attribute that specifies the {@link wijmo.vue2.grid.CellTemplateType}. Depending on the template's cell type, the wj-flex-grid-cell-template element must be a child of either wijmo.vue2.grid.WjFlexGrid or wijmo.vue2.grid.WjFlexGridColumn components.

Column-specific cell templates must be contained in wj-flex-grid-column components, and cells that are not column-specific (like row header or top left cells) must be contained in the wj-flex-grid component.

The wj-flex-grid-cell-template element may contain an arbitrary HTML fragment with Vue interpolation expressions and other components and directives.

Bindings in HTML fragment can use scoped slot properties that store cell specific data. The properties are col, row, and item, which refer to the Column, Row, and Row.dataItem objects pertaining to the cell.

For cell types like Group and CellEdit, an additional value property containing an unformatted cell value is provided.

To reference slot properties, you can use either a new v-slot directive right on the wj-flex-grid-cell-template element (it's available in Vue 2.6.0 or higher), or an old slot-scope directive on the <template> element nested in wj-flex-grid-cell-template.

For example, here is a FlexGrid control with templates for row header cells and, regular and column header cells of the Country column:

<!-- component.html -->
<wj-flex-grid :itemsSource="data">
  <wj-flex-grid-cell-template cellType="RowHeader" v-slot="cell">
    {{cell.row.index}}
  </wj-flex-grid-cell-template>
  <wj-flex-grid-cell-template cellType="RowHeaderEdit">
    ...
  </wj-flex-grid-cell-template>

  <wj-flex-grid-column header="Country" binding="country">
    <wj-flex-grid-cell-template cellType="ColumnHeader" v-slot="cell">
      <img src="resources/globe.png" />
        {{cell.col.header}}
    </wj-flex-grid-cell-template>
    <wj-flex-grid-cell-template cellType="Cell" v-slot="cell">
      <img :src="'resources/' + cell.item.country + '.png'" />
      {{cell.item.country}}
    </wj-flex-grid-cell-template>
  </wj-flex-grid-column>
  <wj-flex-grid-column header="Sales" binding="sales"></wj-flex-grid-column>
</wj-flex-grid>

The wj-flex-grid-cell-template directive supports the following attributes:

cellType
The CellTemplateType value defining the type of cell to which the template is applied.
autoSizeRows
Indicates whether the cell template will increase grid's default row height to accomodate cells content. Defaults to true.
cellOverflow
Defines the style.overflow property value for cells.
forceFullEdit
For cell edit templates, indicates whether cell editing forcibly starts in full edit mode, regardless of how the editing was initiated. In full edit mode pressing cursor keys don't finish editing. Defaults to true.

The cellType attribute takes any of the following enumerated values:

Cell

Defines a regular (data) cell template. Must be a child of the wijmo.vue2.grid.WjFlexGridColumn component. For example, this cell template shows flags in the cells of Country column:

<wj-flex-grid-column header="Country" binding="country">
  <wj-flex-grid-cell-template cellType="Cell" v-slot="cell">
    <img :src="'resources/' + cell.item.country + '.png'" />
    {{cell.item.country}}
  </wj-flex-grid-cell-template>
</wj-flex-grid-column>

If Group template is not provided for a hierarchical FlexGrid (that is, one with the childItemsPath property specified), non-header cells in group rows of this Column also use this template.

CellEdit

Defines a template for a cell in edit mode. Must be a child of the wijmo.vue2.grid.WjFlexGridColumn component. This cell type has an additional value scoped slot property available for binding. It contains the original cell value before editing, and the updated value after editing.

For example, here is a template that uses the Wijmo InputNumber control as an editor for the "Sales" column:

<wj-flex-grid-column header="Sales" binding="sales">
  <wj-flex-grid-cell-template cellType="CellEdit">
    <wj-input-number v-model="cell.value" :step="1"></wj-input-number>
  </wj-flex-grid-cell-template>
</wj-flex-grid-column>

Note that two-way binding can also be specified using the binding's sync modifier:

<wj-flex-grid-column header="Sales" binding="sales">
  <wj-flex-grid-cell-template cellType="CellEdit">
    <wj-input-number value.sync="cell.value" :step="1"></wj-input-number>
  </wj-flex-grid-cell-template>
</wj-flex-grid-column>

ColumnHeader

Defines a template for a column header cell. Must be a child of the wijmo.vue2.grid.WjFlexGridColumn component. For example, this template adds an image to the header of the "Country" column:

<wj-flex-grid-column header="Country" binding="country">
  <wj-flex-grid-cell-template cellType="ColumnHeader" v-slot="cell">
    <img src="resources/globe.png" />
    {{cell.col.header}}
  </wj-flex-grid-cell-template>
</wj-flex-grid-column>

RowHeader

Defines a template for a row header cell. Must be a child of the wijmo.vue2.grid.WjFlexGrid component. For example, this template shows row indices in the row headers:

<wj-flex-grid :itemsSource="data">
  <wj-flex-grid-cell-template cellType="RowHeader" v-slot="cell">
    {{cell.row.index + 1}}
  </wj-flex-grid-cell-template>
</wj-flex-grid>

Note that this template is applied to a row header cell, even if it is in a row that is in edit mode. In order to provide an edit-mode version of a row header cell with alternate content, define the RowHeaderEdit template.

RowHeaderEdit

Defines a template for a row header cell in edit mode. Must be a child of the wijmo.vue2.grid.WjFlexGrid component. For example, this template shows dots in the header of rows being edited:

<wj-flex-grid :itemsSource="data">
  <wj-flex-grid-cell-template cellType="RowHeaderEdit">
    ...
  </wj-flex-grid-cell-template>
</wj-flex-grid>

Use the following RowHeaderEdit template to add the standard edit-mode indicator to cells where the RowHeader template applies:

<wj-flex-grid :itemsSource="data">
  <wj-flex-grid-cell-template cellType="RowHeaderEdit">
    &#x270e;&#xfe0e;
  </wj-flex-grid-cell-template>
</wj-flex-grid>

TopLeft

Defines a template for the top left cell. Must be a child of the wijmo.vue2.grid.WjFlexGrid component. For example, this template shows a down/right glyph in the top-left cell of the grid:

<wj-flex-grid :itemsSource="data">
  <wj-flex-grid-cell-template cellType="TopLeft">
    <span class="wj-glyph-down-right"></span>
  </wj-flex-grid-cell-template>
</wj-flex-grid>

GroupHeader

Defines a template for a group header cell in a GroupRow. Must be a child of the wijmo.vue2.grid.WjFlexGridColumn component.

The row scoped slot property contains an instance of the GroupRow class. If the grouping comes from CollectionView, the item scoped slot property references the CollectionViewGroup object.

For example, this template uses a checkbox element as an expand/collapse toggle:

<wj-flex-grid-column header="Country" binding="country">
  <wj-flex-grid-cell-template cellType="GroupHeader" v-slot="cell">
    <input type="checkbox" v-model="cell.row.isCollapsed"/>
    {{cell.item.name}} ({{cell.item.items.length}} items)
  </wj-flex-grid-cell-template>
</wj-flex-grid-column>

Group

Defines a template for a regular cell (not a group header) in a GroupRow. Must be a child of the wijmo.vue2.grid.WjFlexGridColumn component. This cell type has an additional value scoped slot property available for binding. In cases where columns have the aggregate property specified, it contains the unformatted aggregate value.

For example, this template shows aggregate's value and kind for group row cells in the "Sales" column:

<wj-flex-grid-column header="Sales" binding="sales" aggregate="Avg">
  <wj-flex-grid-cell-template cellType="Group" v-slot="cell">
    Average: {{formatNumber(cell.value, 'N0')}}
  </wj-flex-grid-cell-template>
</wj-flex-grid-column>

ColumnFooter

Defines a template for a regular cell in a columnFooters panel. Must be a child of the wijmo.vue2.grid.WjFlexGridColumn component. This cell type has an additional value scoped slot property available for binding that contains a cell value.

For example, this template shows aggregate's value and kind for a footer cell in the "Sales" column:

<wj-flex-grid-column header="Sales" binding="sales" aggregate="Avg">
  <wj-flex-grid-cell-template cellType="ColumnFooter" v-slot="cell">
    Average: {{formatNumber(cell.value, 'N0')}}
  </wj-flex-grid-cell-template>
</wj-flex-grid-column>

BottomLeft

Defines a template for the bottom left cells (at the intersection of the row header and column footer cells). Must be a child of the wijmo.vue2.grid.WjFlexGrid component. For example, this template shows a sigma glyph in the bottom-left cell of the grid:

<wj-flex-grid :itemsSource="data">
  <wj-flex-grid-cell-template cellType="BottomLeft">
    &#931;
  </wj-flex-grid-cell-template>
</wj-flex-grid>

NewCellTemplate

Defines a cell in a new row template. Must be a child of the wijmo.vue2.grid.WjFlexGridColumn component. Note that the cell.item property is undefined for this type of a cell. For example, this cell template shows a placeholder in the Date column's cell in the "new row" item:

<wj-flex-grid-column header="'Date'" binding="'date'">
  <wj-flex-grid-cell-template cellType="NewCellTemplate">
    Enter a date here
  </wj-flex-grid-cell-template>
</wj-flex-grid-column>

WjFlexGridColumn

WjFlexGridColumn: any

wijmo.vue2.grid.WjFlexGridwijmo.grid.Column を表す Vueコンポーネント。