v5.20191.603
|

CollectionView クラス

ICollectionView インタフェースを実装して、標準JavaScript配列内の データを公開するクラス。

CollectionView クラスは、次のインタフェースを実装します。

  • ICollectionView: 現在のレコードの管理、カスタムソート、 フィルタ処理、およびグループ化を提供します。
  • IEditableCollectionView: 項目を編集、追加、および削除するための メソッドを提供します。
  • IPagedCollectionView: ページングを提供します。

CollectionView クラスを使用するには、最初にクラスを宣言し、標準の配列を データソースとして渡します。次に、filtersortDescriptionsgroupDescriptionspageSize の各プロパティを使用して ビューを構成します。最後に、items プロパティを使用してビューにアクセスします。 次に例を示します。

// 新しいCollectionViewを作成します
var cv = new wijmo.collections.CollectionView(myArray);

// amountで項目を降順にソートします
var sd = new wijmo.collections.SortDescription('amount', false);
cv.sortDescriptions.push(sd);

// amountが100より大きい項目だけを表示します
cv.filter = function(item) { return item.amount > 100 };

// ソートおよびフィルタ処理した結果をコンソールに表示します
for (var i = 0; i < cv.items.length; i++) {
  var item = cv.items[i];
  console.log(i + ': ' + item.name + ' ' + item.amount);
}

次の例では、CollectionView を使用して、一部の生データをソートする方法を示しています。

Example

階層

コンストラクタ

constructor

  • new CollectionView(sourceCollection?: any, options?: any): CollectionView
  • CollectionView クラスの新しいインスタンスを初期化します。

    引数

    • オプション sourceCollection: any

      この{@link CollectionViewのソースとする配列}。

    • オプション options: any

      コントロールの初期化データを含むJavaScriptオブジェクト。

    戻り値 CollectionView

プロパティ

canAddNew

canAddNew: boolean

コレクションに新しい項目を追加できるかどうかを示す値を取得します。

canCancelEdit

canCancelEdit: boolean

適用前の変更を破棄して編集されたオブジェクトの元の値を復元できるかどうかを示す値を取得します。

canChangePage

canChangePage: boolean

pageIndex 値を変更できるかどうかを示す値を取得します。

canFilter

canFilter: boolean

このビューがfilter プロパティによってフィルタリングをサポートしているかどうかを示す値を取得します。

canGroup

canGroup: boolean

このビューがgroupDescriptions プロパティによってグループ化をサポートしているかどうかを示す値を取得します。

canRemove

canRemove: boolean

コレクションから項目を削除できるかどうかを示す値を取得します。

canSort

canSort: boolean

このビューがsortDescriptions プロパティによってソートをサポートしているかどうかを示す値を取得します。

currentAddItem

currentAddItem: any

現在の追加トランザクションの間に追加される項目を取得します。

currentEditItem

currentEditItem: any

現在の編集トランザクションの間に編集される項目を取得します。

currentItem

currentItem: any

ビューの現在の項目を取得します。

currentPosition

currentPosition: number

ビューの現在の項目の順序位置を取得します。

filter

filter: IPredicate

項目がビューに含める対象として適しているかどうかを判断するために使用されるコールバックを取得または設定します。

このコールバック関数がtrueを返した場合、 パラメーターとして渡された項目はビューに含まれます。

メモ: フィルタ関数でスコープ(すなわち、有効な'this'値)が必要な場合は、 'this'オブジェクトを指定した'bind'関数を使用してフィルタを設定します。 例:

  collectionView.filter = this._filter.bind(this);

getError

getError: Function

項目の特定のプロパティに検証エラーが含まれているかどうかを判定するコールバックを取得または設定します。

指定すると、コールバックは、検証する項目とプロパティを含む2つのパラメータを受け取り、 エラーを説明する文字列を返します(エラーがない場合はnull)。

次に例を示します。

import { CollectionView } from '@grapecity/wijmo';
var view = new CollectionView(data, {
    getError: function (item, property) {
        switch (property) {
            case 'country':
                return countries.indexOf(item.country) &lt; 0
                    ? 'Invalid Country'
                    : null;
            case 'downloads':
            case 'sales':
            case 'expenses':
                return item[property] &lt; 0
                    ? '負にはできません。'
                    : null;
            case 'active':
                return item.active && item.country.match(/US|UK/)
                    ? 'USまたはUKではアクティブな項目が許可されません。'
                    : null;
        }
        return null;
    }
});

groupDescriptions

groupDescriptions: ObservableArray

コレクションの項目をビューでどのようにグループ化するかを記述するGroupDescription オブジェクトのコレクションを取得します。

groups

最上位レベルのグループを表すCollectionViewGroup オブジェクトの配列を取得します。

isAddingNew

isAddingNew: boolean

追加トランザクションが進行中であるかどうかを示す値を取得します。

isEditingItem

isEditingItem: boolean

編集トランザクションが進行中であるかどうかを示す値を取得します。

isEmpty

isEmpty: boolean

このビューに項目が1つも含まれていないかどうかを示す値を取得します。

isPageChanging

isPageChanging: boolean

ページインデックスが変更されているかどうかを示す値を取得します。

isUpdating

isUpdating: boolean

通知が現在中断されているかどうかを示す値を取得します(beginUpdate およびendUpdate を参照)。

itemCount

itemCount: number

ページングを適用する前のビューの既知の項目の数を取得します。

items

items: any[]

ビューの項目を取得します。

itemsAdded

itemsAdded: ObservableArray

trackChanges が有効化されてから、コレクションに追加されたレコードを含むObservableArray を取得します。

itemsEdited

itemsEdited: ObservableArray

trackChanges が有効化されてから、コレクションで編集されたレコードを含むObservableArray を取得します。

itemsRemoved

itemsRemoved: ObservableArray

trackChanges が有効化されてから、コレクションから削除されたレコードを含むObservableArray を取得します。

newItemCreator

newItemCreator: Function

コレクションの新しい項目を作成する関数を取得または設定します。

作成関数が提供されない場合、CollectionView は、適切な型の項目を 初期化せずに作成しようとします。

作成関数が提供される場合、その関数は、パラメータを受け取らず、 コレクションに対して適切な型のオブジェクトを初期化して返す 必要があります。

pageCount

pageCount: number

総ページ数を取得します。

pageIndex

pageIndex: number

現在のページの0から始まるインデックスを取得します。

pageSize

pageSize: number

各ページに表示する項目数を取得または設定します。

sortComparer

sortComparer: Function

ソート時に値の比較に使用する関数を取得または設定します。

指定された場合、ソート比較関数は、パラメータとして任意の型の値を 2つ取り、最初の値が2番目の値と比べて小さい、等しい、または大きい のいずれであるかを示す値-1、0、または+1を返します。ソート比較関数がnullを返す場合は、標準の組み込み比較子が使用されます。

このsortComparer プロパティを使用すると、カスタム比較アルゴリズムを 提供でき、単純な文字列比較より、ユーザーが期待する結果によく 一致するソートシーケンスが得られる場合があります。

たとえば、 Dave Koele's Alphanum algorithmを参照してください。 このアルゴリズムは、文字列を文字列や数値から成る部分に分割した後、 数値部分は値順に、文字列部分はASCII順にソートします。 Daveは、この結果を「自然なソート順」と呼んでいます。

次の例は、sortComparer プロパティの一般的な使用方法を示します。

// カスタムソート比較子を使用してCollectionViewを作成します
var dataCustomSort = new wijmo.collections.CollectionView(data, {
  sortComparer: function (a, b) {
    return wijmo.isString(a) && wijmo.isString(b)
      ? alphanum(a, b) // 文字列に使用するカスタム比較子
      : null; // 文字列以外にはデフォルトの比較子を使用します
  }
});

次の例は、 Intl.Collator を使用してソート順を制御する方法を示しています。

// Intl.Collatorを使用してソートするCollectionViewを作成します
var collator = window.Intl ? new Intl.Collator() : null;
var dataCollator = new wijmo.collections.CollectionView(data, {
  sortComparer: function (a, b) {
    return wijmo.isString(a) && wijmo.isString(b) && collator
      ? collator.compare(a, b) // 文字列に使用するカスタム比較子
      : null; // 文字列以外にはデフォルトの比較子を使用します
  }
});

sortConverter

sortConverter: Function

ソート時の値の変換に使用される関数を取得または設定します。

指定されている場合、この関数は、SortDescription、データ項目、および変換する値をパラメーターとして受け取り、 変換後の値を返す必要があります。

このプロパティはソートの動作をカスタマイズする手段を提供します。 たとえば、 FlexGrid コントロールはこのプロパティを使用して、 マップされた列を生の値ではなく表示値を基準にソートします。

以下のサンプルコードは、国コードの整数を含む'country'プロパティをソートするときに、 対応する国名を使用してソートされるようにします。

var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(',');
collectionView.sortConverter = function (sd, item, value) {
  if (sd.property == 'countryMapped') {
    value = countries[value]; // 国IDを国名に変換します
  }
  return value;
}

sortDescriptions

sortDescriptions: ObservableArray

コレクションの項目をビューでどのようにソートするかを記述するSortDescription オブジェクトの配列を取得します。

sortNullsFirst

sortNullsFirst: boolean

コレクションをソートする時(ソート方向に関係なく)、null値を最初に表示するか最後に表示するかを決定する値を取得または設定します。

このプロパティはデフォルトでfalseに設定されます。これにより、コレクションをソートするとNULL値が最後に表示されます。 この動作はExcelと同じです。

sourceCollection

sourceCollection: any

基になる(フィルタリングもソートもされていない)コレクションを取得または設定します。

totalItemCount

totalItemCount: number

ページングを適用する前のビュー内の項目の合計数を取得します。

trackChanges

trackChanges: boolean

コントロールがデータの変更を追跡するかどうかを決定する値を取得または設定します。

trackChanges がtrueに設定されている場合、CollectionView は、 データの変更を追跡し、itemsAddeditemsRemoveditemsEdited の 各コレクションを介して変更を公開します。変更の追跡は、変更が有効であることをユーザーが確認した後にサーバーを更新する必要がある場合に役立ちます。

変更をコミットまたはキャンセルしたら、clearChanges メソッドを使用して、 itemsAddeditemsRemoveditemsEdited の各コレクションをクリアします。 CollectionView は、適切なCollectionView メソッド(editItem /commitEditaddNew /commitNewremove)を使用して行われた変更だけを追跡します。 データに直接行われた変更は追跡されません。

useStableSort

useStableSort: boolean

安定したソートアルゴリズムを使用するかどうかを取得または設定します。

安定したソートアルゴリズムは、同じキーを持つレコード間の相対的な順序を維持します。 たとえば、"Amount"フィールドを持つオブジェクトのコレクションを考えてみます。 このコレクションを"Amount"でソートする場合、安定したソートでは、 Amount値が同じレコード間で元の順序が保たれます。

このプロパティのデフォルトはfalseです。この場合は、 高速だが安定ではないJavaScriptの組み込みソートメソッドがCollectionView で使用されます。 useStableSort をtrueに設定すると、ソート時間が30%~50%も長くなります。 コレクションが大きいと、かなりの時間の増加になります。

メソッド

addNew

  • addNew(): any
  • 新しい項目を作成し、コレクションに追加します。

    このメソッドは、パラメータを受け取りません。 新しい項目を作成し、それをコレクションに追加し、新しい項目がcommitNew メソッドでコミットされるか、 cancelNew メソッドでキャンセルされるまで、リフレッシュ操作を保留します。

    次のコードは、addNew メソッドの典型的な使用方法を示します。

    // 新しい項目を作成し、それをコレクションに追加します
    var newItem = view.addNew();
    // 新しい項目を初期化します
    newItem.id = getFreshId();
    newItem.name = '新しい顧客';
    // ビューをリフレッシュできるように新しい項目をコミットします
    view.commitNew();
    

    新しい項目をsourceCollection にプッシュしてから、refresh メソッドを呼び出すことで、 新しい項目を追加することもできます。addNew では、 ユーザーが追加操作をキャンセルできるため、ユーザー対話式のシナリオ(データグリッドに新しい項目の追加するなど)で特に便利です。 また、追加操作がコミットされるまで、新しい項目がソートされたり、 フィルタ処理でビューから除外されないようにします。

    戻り値 any

    The item that was added to the collection.

beginUpdate

  • beginUpdate(): void

cancelEdit

  • cancelEdit(): void
  • 現在の編集トランザクションを終了し、可能であれば項目を元の値に戻します。

    戻り値 void

cancelNew

  • cancelNew(): void
  • 現在の追加トランザクションを終了し、追加前の新しい項目を破棄します。

    戻り値 void

clearChanges

  • clearChanges(): void
  • itemsAddeditemsRemoveditemsEdited の各コレクションの全項目をクリアすることによってすべての変更をクリアします。

    このメソッドは、変更をサーバーに確定した後またはデータをサーバーから更新した後に呼び出します。

    戻り値 void

commitEdit

  • commitEdit(): void

commitNew

  • commitNew(): void
  • 現在の追加トランザクションを終了し、追加前の新しい項目を保存します。

    戻り値 void

contains

  • contains(item: any): boolean
  • 指定した項目がこのビューに属するかどうかを示す値を返します。

    引数

    • item: any

      調べる項目。

    戻り値 boolean

deferUpdate

  • deferUpdate(fn: Function): void
  • beginUpdate/endUpdate ブロック内で関数を実行します。

    この関数が終了するまでコレクションはリフレッシュされません。 このメソッドは、関数が例外を生成した場合でもendUpdate が呼び出されるようにします。

    引数

    • fn: Function

      更新なしで実行する関数。

    戻り値 void

editItem

  • editItem(item: any): void
  • 指定した項目の編集トランザクションを開始します。

    引数

    • item: any

      編集する項目。

    戻り値 void

endUpdate

  • endUpdate(): void

getAggregate

  • getAggregate(aggType: Aggregate, binding: string, currentPage?: boolean): any
  • このコレクション内の項目の集計値を計算します。

    引数

    • aggType: Aggregate

      計算する集計のタイプ。

    • binding: string

      集計するプロパティ。

    • オプション currentPage: boolean

      現在のページの項目だけを含めるかどうか。

    戻り値 any

    The aggregate value.

implementsInterface

  • implementsInterface(interfaceName: string): boolean
  • 指定したインタフェースがサポートされている場合、trueを返します。

    引数

    • interfaceName: string

      調べるインタフェースの名前。

    戻り値 boolean

moveCurrentTo

  • moveCurrentTo(item: any): boolean
  • 指定した項目をビューの現在の項目に設定します。

    引数

    • item: any

      現在の項目として設定する項目。

    戻り値 boolean

moveCurrentToFirst

  • moveCurrentToFirst(): boolean

moveCurrentToLast

  • moveCurrentToLast(): boolean

moveCurrentToNext

  • moveCurrentToNext(): boolean

moveCurrentToPosition

  • moveCurrentToPosition(index: number): boolean
  • ビューの指定したインデックスにある項目を現在の項目として設定します。

    引数

    • index: number

      現在の項目として設定する項目のインデックス。

    戻り値 boolean

moveCurrentToPrevious

  • moveCurrentToPrevious(): boolean

moveToFirstPage

  • moveToFirstPage(): boolean
  • 最初のページを現在のページとして設定します。

    戻り値 boolean

    True if the page index was changed successfully.

moveToLastPage

  • moveToLastPage(): boolean
  • 最後のページを現在のページとして設定します。

    戻り値 boolean

    True if the page index was changed successfully.

moveToNextPage

  • moveToNextPage(): boolean

moveToPage

  • moveToPage(index: number): boolean
  • 指定したインデックスにあるページに移動します。

    引数

    • index: number

      移動先ページのインデックス。

    戻り値 boolean

    True if the page index was changed successfully.

moveToPreviousPage

  • moveToPreviousPage(): boolean

onCollectionChanged

onCurrentChanged

onCurrentChanging

onPageChanged

  • pageChanged イベントを発生させます。

    引数

    戻り値 void

onPageChanging

onSourceCollectionChanged

  • onSourceCollectionChanged(e?: EventArgs): void

onSourceCollectionChanging

refresh

  • refresh(): void
  • 現在のソート、フィルタ、およびグループパラメーターを使用してビューを再作成します。

    戻り値 void

remove

  • remove(item: any): void
  • 指定した項目をコレクションから削除します。

    引数

    • item: any

      コレクションから削除する項目。

    戻り値 void

removeAt

  • removeAt(index: number): void
  • 指定したインデックスにある項目をコレクションから削除します。

    引数

    • index: number

      コレクションから削除する項目のインデックス。このインデックスは、ソースコレクションに対してではなくビューに対する相対インデックスです。

    戻り値 void

イベント

collectionChanged

collectionChanged: Event

Occurs when the collection changes.

currentChanged

currentChanged: Event

Occurs after the current item changes.

currentChanging

currentChanging: Event

Occurs before the current item changes.

pageChanged

pageChanged: Event

Occurs after the page index changes.

pageChanging

pageChanging: Event

Occurs before the page index changes.

sourceCollectionChanged

sourceCollectionChanged: Event

Occurs after the value of the sourceCollection property changes.

sourceCollectionChanging

sourceCollectionChanging: Event

Occurs before the value of the sourceCollection property changes.