ヤフーユーザーインターフェイスブログ（YUIBlog）

バルクエディタ·ウィジェット：YUI 3ギャラリーで

簡易プラグインのためにYUI 3 DataTableには、それが簡単に不可能な操作として、レコードのページ全体を編集することができます。 しかし、時にはあなたは、さらに操作を行う必要があります。 たとえば、同時にあなたが快適に単一ページに収まりきらない複数のレコードを編集する必要があります。 または、追加複製、原子操作の一環として、レコードの削除をサポートする必要があります。 または単一の表のセルに配置することにより、視覚的にグループフィールドにたいと思うかもしれません。 バルクエディタのウィジェットは、これらすべての可能性をサポートしています。

（ この例で再生するスクリーンショットをクリックします 。）

概要

バルクエディタ·ウィジェットは3つのコンポーネントから構成されています。

Data source

挿入、削除、および変更された値：これは、YUIのDataSourceおよび変更を管理してラップします。

Base widget

これは、各レコード内のレコードとフィールドを管理することで、編集するための基本的な構造を提供します。 派生クラスではdiv、tbody要素、または他のコンテナかもしれない別々の行 、に各レコードをレンダリングする責任があります。

HTML table implementation

これは、HTMLテーブルのtbody要素には、各レコードをレンダリングするためにベースのウィジェットを拡張します。 列の構成は、表の各列に表示されるフィールドを決定します。 カスタムセルのフォーマッタは、単一の表のセルに複数のフィールドをレンダリングするために使用することができます。

設定

上記のスクリーンショットを生成例では、コンフィギュレーションができるだけ簡単にされています。

fields各レコードの編集可能な値を定義します。 デフォルトのタイプは入力です。 他の有効な型は 、select と textareaがあります。 （ 選択は、値のリストを必要とします）基本的な検証によって提供されているForm Managerのギャラリーモジュール。 これはカバー必須フィールド、長さの制限、および数値の範囲を 。 より複雑な検証を指定することにより行うことができますregex 、または独自の関数（ fn ）。 ここに住んでいる例からの抜粋は、次のとおりです。

 VARフィールド=
 {
	タイトル：
	 {
		タイプ： 'テキストエリア'
	 }
	年：
	 {
		検証：
		 {
			 CSS： "yiv整数：[1500,2100] '
		 }
	 }
	カラー：
	 {
		タイプ： 'SELECT'、
		値：
		 [
			 {値： "赤"、テキスト： 'レッド'}、
			 {値： 'グリーン'は、テキスト： 'グリーン'}、
			 {値： 'ブルー'、テキスト： 'ブルー'}
		 ]
	 }
 };

Y.BulkEditDataSourceインスタンスが必要ですY.DataSource 、次のパラメータを：

uniqueIdKey

各レコードを一意に識別するキーの名前です。

generateRequest

のためにリクエストパラメータを生成する機能Y.DataSource 。 （ので、これは例では空になってY.DataSource.Local常にすべてのデータを返します。）

extractTotalRecords

からレコードの合計数を抽出する機能Y.DataSource応答。

の例では、使用しているのでY.DataSource.Local 、 totalRecordsReturnExprまた必要となります。 応答内のレコードの総数を格納する場所をこのOGNL式を指定します。 （ことに注意してくださいextractTotalRecords 、この値を読み込みます）。

 VAR DS = newはY.BulkEditDataSource（
 {
	 DS：raw_ds、
	 uniqueIdKey： 'id'を、
	 generateRequest：関数（）{}、
	 totalRecordsReturnExpr： 'meta.totalRecords。'
	 extractTotalRecords：関数（レスポンス）
	 {
		 response.meta.totalRecordsを返します。
	 }
 }）;

Y.HTMLTableBulkEditorデータソース、フィールドの設定、および列の設定が必要になります。 カスタムフォーマッタを指定しない限り、列の設定では、キーは、フィールド名です。 ラベルは列のタイトルとして使用されます。 ここに住んでいる例からの抜粋は、次のとおりです。

 VARのカラム=
 [
	 {
		キー： 'チェックボックス'、
		ラベル： '<input type="checkbox" id="select-all" />'、
		フォーマッタ：関数（O）
		 {
			 VARマーク= '<input type="checkbox" class="record-select" id="{id}" />';
			 o.cell.set（ 'innerHTMLプロパティ'、Y.Lang.sub（マークアップ、
			 {
				 ID：this.getRecordId（o.record）
			 }））;
		 }
	 }
	 {キー： 'タイトル'、ラベル： 'タイトル'}、
	 {キー： '年'、ラベル： '年'}、
	 {キー： '色'、ラベル： '色'}
 ];

（ライブの例では、マイナーな拡張子に定義されていることに注意してくださいY.HTMLTableBulkEditorチェックボックスの列を処理するためです。）

またのインスタンスを渡すことができますY.PaginatorするY.BulkEditDataSource 。 これは別の、より複雑で実証されている実際の例 。

ローカルとリモートのデータソース

ローカルまたはリモートデータソースを使用するかどうかを決定するときは、慎重にトレードオフを考慮する必要があります。 トレードオフは明白なのは、改ページ位置を自動修正する場合は、DataSourceローカルが高速であるということですが、最初のページのロードに時間がかかるでしょう、そして、それはクライアント上でより多くのメモリを必要とします。

バルクエディタ·ウィジェットは、しかし、追加のトレードオフを課している。

まず、YUI DataSourceは、不変のデータを返す必要があります。 これは、ローカルのデータソースの自動ですが、リモートデータソースに実装するのが難しいことができます。 あなたは、複数のユーザーがそれらを変更することが許可されている一括編集操作の間、データベーステーブル内の行をロックする必要があります。

第二に、ローカルとリモートのデータソースとの間の選択は、あなたがデータを保存するために許可されている方法に影響を与えます。 あなたは、ローカルデータソースを使用するときは、サーバーへのすべての有効なレコードを保存する、すなわち、 ベストエフォート型の保存を行うことができますが、データソースをローカルからそれらを削除し、ユーザーが無効な値を持つレコードに集中することができます。 すべてのデータが有効である後に、リモート·データ·ソースを使用する場合は、不変性の要件は、あなただけがすべてか無か節約を行うことができ、すなわち、データは保存することができます。

実世界のユースケース

バルクエディタ·ウィジェットのオリジナルの動機は、アップロードされたスプレッドシートの後処理を実行できるようになりました。 後処理のステップを導入するスプレッドシートの値は完璧なものにするために必要がなくなります。 エラーではなく、全体のアップロードを拒否するのバルクエディタウィジェットにフラグを付け、固定することができます。 さらに、サーバー上の処理は各レコードに必要な追加の値の最良の推測の割り​​当てを行うことができ、ユーザーが保存する前にこれらの余分な値をチェックし、修正することができます。 これは、スプレッドシートの初期作成を簡素化します。

このシナリオでは、リモート·データ·ソースが最適です。 アップロードされたデータは、スクラッチ領域に格納され、他のユーザがそれを見ることができませんので、したがって、不変が保証されています。 "オール·オア·ナッシング"は保存が適切である：すべてのエラーが修正されました、保存操作は標準的なアップロード操作のように、アトミックです。

についての著者： ジョンLindalは （ @ jafl5272 Twitter上）の上に土台を構築、リードエンジニアの一つであるYahoo!を APTは、構築されています。 以前に、彼はヤフーパブリッシャーネットワークに取り組みました。

会話を検索： Bloglinesの | テクノラティ

共有および拡張： del.icio.usでブックマーク | Diggそれ！ | reddit！