constructor(sourceCollection?: any, options?: any): CollectionView
CollectionViewクラスの新しいインスタンスを初期化します。
Array that serves as a source for this CollectionView.
JavaScript object containing initialization data for the control.
キーが計算フィールドを表し、値が式(関数または文字列)であるオブジェクトを取得または設定します。
計算フィールドにはプロキシが必要になります。 Ie11で使用する場合は、 https://www.npmjs.com/package/proxy-polyfill のようなポリフィルを使用します。
計算フィールドは、外部データを扱う場合に役立ちます。 たとえば、1人当たりの収入フィールド(gnp/pop)または利益フィールド(収益-経費)を追加できます。
計算フィールドは動的です。 計算で使用されるフィールドを変更すると、それらの値は自動的に更新されます。 また、読み取り専用です。 それらの計算に使用されるプロパティの値を変更することはできますが、結果を直接編集することはできません。
FlexGrid cellTemplatesとは異なり、計算フィールドは並べ替え、フィルタリング、およびグループ化に使用できます。 また、チャートやその他のWijmoコントロールで使用することもできます。
計算フィールドは、データ項目を引数または文字列として受け取る関数として定義できます。
以下に例を示します。
```typescript // 通常のデータ項目 interface IDataItem { product: string, brand: string, unitPrice: number, qty: number, shipped: boolean } function getData(): IDataItem[] { return [ { product: 'Banana', brand: 'Chiquita', unitPrice: 45.95, qty: 12, discount: .08, shipped: true }, ... ] } ```
次のように関数ベースの計算フィールドを追加できます。
```typescript // 計算プロパティをIDataItemに追加します interface ICalcDataItem extends IDataItem { fullName: string; allCaps: string; totalPrice: number, tax: number; }
let cv = new CollectionView(getData(), { calculatedFields: { fullName: ($: ICalcDataItem) => [$.brand, $.product].join(' '), allCaps: ($: ICalcDataItem) => $.fullName.toUpperCase(), totalPrice: ($: ICalcDataItem) => ($.unitPrice * $.qty) * (1 - $.discount), tax: ($: ICalcDataItem) => $.totalPrice * 0.12 } }); ``` **関数ベースの計算フィールド** は、次の理由により、通常、文字列ベースの計算フィールドよりも優れています。
1) 設計時のエラーチェックとコマンド補完を提供します。 2) 実行速度が速い 3) コンテンツセキュリティポリシー(CSP)に関する問題はありません。
あるいは、文字列ベースの計算フィールドを追加することもできます。
```typescript let cv = new CollectionView(getData(), { calculatedFields: { fullName: '[$.brand, $.product].join(" ")', allCaps: '$.fullNameStr.toUpperCase()', totalPrice: '($.unitPrice * $.qty) * (1 - $.discount)', tax: '$.totalPrice * 0.12' }); ``` 文字列式は、 項目の元の値と計算された値を含むコンテキスト変数「$」により、現在の項目を参照できます。
**文字列ベースの計算フィールド**には、関数ベースの計算フィールドよりも利点があり、場合によっては重要になることがあります。 いくつかの利点は次のとおりです。
1) 少し簡潔です 2) データとして保存でき、実行時に簡単に変更できます。
現在の追加トランザクションの間に追加される項目を取得します。
現在の編集トランザクションの間に編集される項目を取得します。
ビューの現在の項目を取得します。
項目がビューに含める対象として適しているかどうかを判断するために使用されるコールバックを取得または設定します。
このコールバックがtrueを返した場合、パラメーターとして渡された項目はビューに含まれます。
このプロパティのデフォルト値は**null**,です。これは、データがフィルタリングされないことを意味します。
このCollectionView でフィルターとして使用されるIPredicate 関数の配列を取得します。
項目の特定のプロパティに検証エラーが含まれているかどうかを判定するコールバックを取得または設定します。
メソッドは、データ項目をパラメータとして、検証されるプロパティ、およびタが既に解析されてデータ項目に適用されているかどうか(parsing == false)またはザーが値を編集しようとして予期されたデータ型に解析できない値を入力したかどうかを記述する解析パラメータ(parsing == true)を受け取ります。
このメソッドは、エラーメッセージを含む文字列を返します。エラーが検出されなかった場合はnullを返します。
次に例を示します。
```typescript view = new CollectionView(data, { getError: (item: any, prop: string, parsing: boolean) => {
// 解析に失敗しました」メッセージを表示します。 if (parsing) { if (prop == 'date') { return 'Please enter a valid date in the format "MM/dd/yyyy"'; } else if (prop == 'id') { return 'Please enter a positive number'; } }
// 保存(解析)されたデータが有効であることを確認します。 if (prop == 'date' && item.date < minDate) { return 'Please enter a date after ' + Globalize.formatDate(minDate, 'd'); } else if (prop == 'id' && item.id < 0) { return 'Please enter a positive number'; } } }); ```</>>
コレクションの項目をビューでどのようにグループ化するかを記述するGroupDescription オブジェクトのコレクションを取得します。
ビューの項目を取得します。
コレクションの新しい項目を作成する関数を取得または設定します。
作成関数が提供されない場合、CollectionView は、適切な型の項目を初期化せずに作成しようとします。
作成関数が提供される場合、その関数は、パラメータを受け取らず、コレクションに対して適切な型のオブジェクトを初期化して返す 必要があります。
CollectionView が、アイテムの編集後に結果(ソート、フィルター、およびグループ化を適用する)を自動的に更新するかどうかを決定する値を取得または設定します。
このプロパティはデフォルトで **true** に設定されます。これにより、 編集が完了した後にコレクションが常に正しくソート、フィルタリング、およびグループ化されるようにします。
false に設定する場合、アイテムの編集時に更新を遅延されます。 この場合、ソート、フィルタリング、およびグループ化の基準が変更されるか、 またはExcelと同様にrefresh メソッドが呼び出されるまで、コレクションは更新されません。
ソート時に値の比較に使用する関数を取得または設定します。
指定された場合、ソート比較関数は、パラメータとして任意の型の値を 2つ取り、最初の値が2番目の値と比べて小さい、等しい、または大きいのいずれであるかを示す値-1、0、または+1を返します。ソート比較関数がnullを返す場合は、標準の組み込み比較子が使用されます。
この sortComparer プロパティを使用すると、カスタム比較アルゴリズムを提供でき、単純な文字列比較より、ユーザーが期待する結果によく一致するソートシーケンスが得られる場合があります。
たとえば、 Dave Koele's Alphanum algorithm 参照してください。 このアルゴリズムは、文字列を文字列や数値から成る部分に分割した後、 数値部分は値順に、文字列部分はASCII順にソートします。 Daveは、この結果を「自然なソート順」と呼んでいます。
次の例は、 sortComparer プロパティの一般的な使用方法を示します。
```typescript import { CollectionView, isString } from '@grapecity/wijmo';
// カスタムソート比較子を使用してCollectionViewを作成します const view = new CollectionView(data, { sortComparer: (a: any, b: any) => { return isString(a) && isString(b) ? alphanum(a, b) // use custom comparer for strings : null; // use default comparer for everything else } }); ```
次の例は、 Intl.Collator を使用してソート順を制御する方法を示しています。
```typescript import { CollectionView, isString } from '@grapecity/wijmo';
// Intl.Collatorを使用してソートするCollectionViewを作成します const collator = window.Intl ? new Intl.Collator() : null; let view = new CollectionView(data, { sortComparer: (a, b) => { return isString(a) && isString(b) && collator ? collator.compare(a, b) // 文字列に使用するカスタム比較子 : null; // 文字列以外にはデフォルトの比較子を使用します } }); ```
ソート時の値の変換に使用される関数を取得または設定します。
この関数は、SortDescription、データ項目、および変換する値をパラメーターとして受け取り、変換後の値を返す必要があります。
たとえば、FlexGrid コントロールはこのプロパティを使用して、マップされた列を生の値ではなく表示値を基準にソートします。
以下のサンプルコードでは、CollectionViewが国コードの整数を含む'country'プロパティをソートするときに、 対応する国名を使用してソートされるようにします。
```typescript const countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','); view.sortConverter = (sd: SortDescription, item: any, value: any) => { return sd.property === 'countryMapped' ? countries[value]; // 国IDを名前に変換します。 : value; } ```
次の例では、2つの値を組み合わせています。 この場合、国でソートすると、ビューが都市ごとに分割されます。
```typescript view.sortConverter: (sd: SortDescription, item: any, value: any) => { if (sd.property == 'country') { value = item.country + '\t' + item.city; } return value; } ```
null値のソート方法を決定する値を取得または設定します。
このプロパティはデフォルトで**SortNulls.Last**に設定されます。これにより、コレクションをソートするとNULL値が最後に表示されます。 この動作はExcelと同じです。
基になる(フィルタリングもソートもされていない)コレクションを取得または設定します。
コントロールがデータの変更を追跡するかどうかを決定する値を取得または設定します。
このプロパティのデフォルト値は**false**に設定されているため、CollectionViewはどのデータ項目が変更されたかを追跡しません。
このプロパティが**true**に設定されている場合、CollectionView は、データの変更を追跡し、itemsAdded、itemsRemoved、 itemsEdited の 各コレクションを介して変更を公開します。
変更の追跡は、変更が有効であることをユーザーが確認した後にサーバーを更新する必要がある場合に役立ちます。
変更をコミットまたはキャンセルしたら、clearChanges メソッドを使用して、 itemsAdded、itemsRemoved、itemsEdited の各コレクションをクリアします。
CollectionView は、適切なCollectionView メソッド(editItem /commitEdit、 addNew /commitNew、remove)を使用して行われた変更だけを追跡します。データに直接行われた変更は追跡されません。
安定したソートアルゴリズムを使用するかどうかを取得または設定します。
安定したソートアルゴリズムは、同じキーを持つレコード間の相対的な順序を維持します。 たとえば、「Amount」フィールドを持つオブジェクトのコレクションを考えてみます。 このコレクションを「Amount」でソートする場合、安定したソートでは、 Amount値が同じレコード間で元の順序が保たれます。
このプロパティのデフォルトは false です。この場合は、 高速だが安定ではないJavaScriptの組み込みソートメソッドが CollectionView で使用されます。
Chromeはバージョン70以降、Firefoxバージョン3以降は安定したソートを提供します。 ES2019の場合 、ソートは安定している**必要があります**。 ES2018までのECMAScript第1版では、不安定になることが許可されていました。
useStableSortプロパティをtrueに設定すると、すべてのブラウザー(IE11も含む)で安定したソートが保証されますが、ソートにかかる時間が30%〜50%増加します。
addNew(item?: T, commit?: boolean): T
コレクションに新しい項目を追加します。
このメソッドをパラメータなしで呼び出すと、新しい項目が作成されてコレクションに追加され、 commitNewメソッドで新しい項目がコミットされるか、 cancelNewメソッドでキャンセルされるまで、リフレッシュ操作が保留されます。
次のコードは、addNew メソッドの典型的な使用方法を示します。
```typescript // 新しい項目を作成し、それをコレクションに追加します var newItem = view.addNew();
// 新しい項目を初期化します newItem.id = getFreshId(); newItem.name = 'New Customer';
// ビューをリフレッシュできるように新しい項目をコミットします view.commitNew(); ```
新しい項目をsourceCollection にプッシュしてから、refresh メソッドを呼び出すことで、 新しい項目を追加することもできます。addNew では、 ユーザーが追加操作をキャンセルできるため、ユーザー対話式のシナリオ(データグリッドに新しい項目の追加するなど)で特に便利です。 また、追加操作がコミットされるまで、新しい項目がソートされたり、 フィルタ処理でビューから除外されないようにします。
コレクションに calculatedFields がない限り、新しい項目はデフォルトで空のオブジェクトです。 この場合、新しい項目のプロパティは、データ型に応じた値に設定されます(文字列型プロパティの場合は空の文字列、数値型プロパティの場合はゼロ、その他のデータ型の場合はnull)。
多くの場合、計算フィールドは文字列がnullでないことに依存する式に依存するため、 この動作は便利です。ただし、newItemCreatorプロパティを、 新しい項目を作成して初期化する関数に設定することで、 この動作をカスタマイズできます。
Item to be added to the collection (optional).
Whether to commit the new item immediately.
cancelEdit(): void
現在の編集トランザクションを終了し、可能であれば項目を元の値に戻します。
cancelNew(): void
現在の追加トランザクションを終了し、追加前の新しい項目を破棄します。
clearChanges(): void
itemsAdded 、itemsRemoved 、itemsEdited の各コレクションの全項目をクリアすることによってすべての変更をクリアします。
このメソッドは、変更をサーバーに確定した後またはデータをサーバーから更新した後に呼び出します。
commitEdit(): void
現在の編集トランザクションを終了し、適用前の変更を保存します。
commitNew(): void
現在の追加トランザクションを終了し、追加前の新しい項目を保存します。
contains(item: T): boolean
指定した項目がこのビューに属するかどうかを示す値を返します。
Item to seek.
deferUpdate(fn: Function, force?: boolean): void
beginUpdate/endUpdateブロック内で関数を実行します。
この関数が完了するまでコレクションは更新されません。
deferUpdateメソッドは、update関数が例外を生成した場合でもendUpdate が呼び出されるようにします。
Function to be executed without updates.
Whether to force a refresh when ending the update.
editItem(item: T): void
指定した項目の編集トランザクションを開始します。
Item to be edited.
endUpdate(force?: boolean): void
beginUpdate の呼び出しによって中断された更新を再開します。
Whether to force a refresh when ending the update.
getAggregate(aggType: Aggregate, binding: string, currentPage?: boolean): void
このコレクション内の項目の集計値を計算します。
Type of aggregate to calculate.
Property to aggregate on.
Whether to include only items on the current page.
implementsInterface(interfaceName: string): boolean
Returns true if this object supports a given interface.
Name of the interface to look for.
moveCurrentTo(item: T): boolean
指定した項目をビューの現在の項目に設定します。
Item that will become current.
moveCurrentToPosition(index: number): boolean
ビューの指定したインデックスにある項目を現在の項目として設定します。
Index of the item that will become current.
moveToPage(index: number): boolean
指定したインデックスにあるページに移動します。
Index of the page to move to.
onCollectionChanged(e?: NotifyCollectionChangedEventArgs): void
collectionChanged イベントを発生させます。
Contains a description of the change.
onCurrentChanged(e?: EventArgs): void
currentChangedイベントを発生させます。
onCurrentChanging(e: CancelEventArgs): boolean
currentChangingイベントを発生させます。
CancelEventArgs that contains the event data.
onPageChanged(e?: EventArgs): void
pageChangedイベントを発生させます。
onPageChanging(e: PageChangingEventArgs): boolean
pageChangingイベントを発生させます。
PageChangingEventArgs that contains the event data.
onSourceCollectionChanged(e?: EventArgs): void
sourceCollectionChangedイベントを発生させます。
onSourceCollectionChanging(e: CancelEventArgs): boolean
sourceCollectionChangingイベントを発生させます。
CancelEventArgs that contains the event data.
refresh(): void
現在のソート、フィルタ、およびグループパラメーターを使用してビューを再作成します。
remove(item: T): void
指定した項目をコレクションから削除します。
Item to be removed from the collection.
ICollectionView インタフェースを実装して、標準JavaScript配列内のデータを公開するクラス。
CollectionView クラスは、次のインタフェースを実装します。
CollectionView クラスを使用するには、最初にクラスを宣言し、標準の配列を データソースとして渡します。次に、filter、sortDescriptions、 groupDescriptions、pageSize の各プロパティを使用して ビューを構成します。最後に、items プロパティを使用してビューにアクセスします。 次に例を示します。
```typescript import { CollectionView, SortDescription} from '@grapecity/wijmo';
// データ配列に基づいてCollectionViewを作成します let view = new CollectionView(dataArray);
// amountで項目を降順にソートします let sortDesc = new SortDescription('amount', false); view.sortDescriptions.push(sortDesc);
// amountが100より大きい項目だけを表示します view.filter = (item) => { return item.amount > 100 };
// ソートおよびフィルタ処理した結果をコンソールに表示します view.items.forEach((item, index) => { console.log(index + ': ' + item.name + ' ' + item.amount); }); ```
次の例では、CollectionViewを使用して、一部の生データをソートする方法を示しています。
{@sample Core/CollectionView/CreatingViews/Sorting/Overview デモ}