5.20202.724
wijmo.grid.immutable Class ImmutabilityProvider Wijmo API クラス

ImmutabilityProvider クラス

wijmo.grid.FlexGridコントロールにアタッチされたImmutabilityProviderオブジェクトを使用すると、後者は基になるデータを変更せずにデータ編集を実行できます。代わりに、このクラスは、変更アクションをRedux _Store_などのグローバル_Store_にディスパッチするために使用できるデータ変更イベントを提供します。

フレームワークの相互運用では、このクラスは通常、フレームワーク固有のコンポーネントで表されます。たとえば、Reactwijmo.react.grid.immutable.ImmutabilityProviderコンポーネントは、フレームワークのコンテキストで使用すると便利です。

制御されたFlexGridコントロールは、その** itemsSource を指定しないでください。代わりに、このクラスインスタンスのitemsSource**プロパティには、_Store_からの不変の配列を割り当てる必要があります。これにより、グリッドが表示および編集されます。

ユーザーがdatagridを通じてデータを編集すると、wijmo.grid.immutable.ImmutabilityProvider.dataChangedイベントがトリガーされ、変更に関するすべての必要な情報が表示されます(項目が変更、追加、または削除されたときに影響を受ける項目など)。このイベントは、対応するデータ変更のアクションを_Store_にディスパッチするために使用します。

FlexGridは行レベルでデータを編集することに注意してください。つまり、同じ行の複数のセル値を変更でき、行からフォーカスを移動した後にのみ、行に対するすべての変更が同時に適用されます。または、_Cancel_キーを押して、行のすべての変更をキャンセルすることもできます。datagridに行を追加する場合も同様です。

また、テキストをdatagridに貼り付けたり、行を削除したりすると、複数の行に影響する可能性があります。この場合、ImmutabilityProviderImmutabilityProvider.dataChangedイベントを複数回、影響を受ける行ごとに個別にトリガーします。これにより、_Store_レデューサーでのデータ変更処理が簡略化されます。

この例は、_Redux Store_からの配列にバインドされたImmutabilityProviderコンポーネントが関連付けられた完全に編集可能なFlexGridコンポーネントを示します。 dataChangedイベントハンドラーは、対応するデータ変更のアクションを_Store_にディスパッチします。

  import { ImmutabilityProvider, DataChangeEventArgs, DataChangeAction } from '@grapecity/wijmo.grid.immutable';
  import { FlexGrid } from '@grapecity/wijmo.grid';
  import { store } from './store';
  import { addItemAction, removeItemAction, changeItemAction } from './actions';

  const grid = new FlexGrid('#grid', {
      allowAddNew: true,
      allowDelete: true
  });
  const provider = new ImmutabilityProvider(grid, {
      itemsSource: store.getState().items,
      dataChanged: (s: ImmutabilityProvider, e: DataChangeEventArgs) => {
         switch (e.action) {
              case DataChangeAction.Add:
                  store.dispatch(addItemAction(e.newItem));
                break;
              case DataChangeAction.Remove:
                  store.dispatch(removeItemAction(e.newItem, e.itemIndex));
                  break;
            case DataChangeAction.Change:
                  store.dispatch(changeItemAction(e.newItem, e.itemIndex));
                  break;
         }
      }
  });
  store.subscribe(() => {
      provider.itemsSource = store.getState().items;
  })

階層

  • ImmutabilityProvider

コンストラクタ

プロパティ

メソッド

イベント

コンストラクタ

constructor

  • 指定されたFlexGridコントロールにアタッチされたImmutabilityProviderのインスタンスを作成します。

    引数

    • grid: FlexGrid

      アタッチするFlexGridコントロール。

    • オプション options: any

      ImmutabilityProviderインスタンスの初期化オプション。

    戻り値 ImmutabilityProvider

プロパティ

collectionView

collectionView: CollectionView

ImmutabilityProviderによって内部的に維持されるCollectionViewオブジェクトを取得します。このCollectionViewでデータを変更することはできません。その代わりに、データの変更は_Store_にディスパッチする必要があります。ただし、並べ替え・グループ・フィルタ設定を変更したり、通貨とデータ変更イベントを使用できます。

grid

grid: FlexGrid

ImmutabilityProviderによって制御されるFlexGridインスタンスを取得します。

itemsSource

itemsSource: any

制御されるFlexGridに表示されるソースデータ配列を取得または設定します。FlexGrid.itemsSourceプロパティは、割り当てるべきではありません。ソース配列の新しいバージョンがStore_に表示されます。 このプロパティは、この新しい配列インスタンスで再割り当てする必要があります。これは、たとえば、_Store changeイベントのハンドラー関数で行うことができます。

メソッド

onCloningItem

onDataChanged

イベント

cloningItem

このイベントは、FlexGridが変更される項目のクローンを作成する必要があるときに発生します。

このイベントを使用すると、項目を複製するためのカスタムロジックを提供できます。 複製された項目は、イベント引数の CloningItemEventArgs.clonedItem プロパティに割り当てられる必要があります。

dataChanged

ユーザーが制御されたFlexGridインスタンスのデータ項目を追加、削除、または変更した後にトリガーされます。対応するデータ変更のアクションを_Store_にディスパッチするために使用できます。