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

YUI 3 DataTableの簡易編集モード

にもかかわらず、 YUI 3のDataTableはまだ個々のセルのインライン編集を持っていない、それは、クイック編集モードを実装するために比較的簡単です。 簡易編集でDataTableのプラグインYUI 3のギャラリーは DataTable内のすべての可視の値を同時に編集できるようになります。

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

概要

と同様にYUI 2バージョン 、クイック編集モードの核となるアイデアは、フォーム要素、例えば、入力フィールドやドロップダウンで細胞を移入する新しいものにすべてのセルのフォーマッタを入れ替えることです。 ときに行われますstart()以下で説明するコンフィギュレーションに基づいて、呼び出されます。 ユーザーが終了したら、呼び出すことができますgetChanges()変更された値を取得し、それらを永続化する。 クイック編集モードを終了するには、呼び出しcancel() 。 （これはキャンセルではなく、それがすべての変更を破棄することを気付かせるために停止する名前が付けられます。）

クイック編集]ギャラリーのモジュールは、DataTableのプラグインなので、それを使用する前に、あなたのDataTableにプラグインする必要があります。

 my_table.plug（Y.Plugin.DataTableQuickEdit）;

これは、でプラグインを格納qe DataTableのメンバーなので、このようなプラグインの関数を呼び出す必要があります。

 my_table.qe.start（）;

コンフィギュレーション

：クイック編集はすべての列に2つの新たな構成属性を追加してquickEditとqeFormatter 。

列の場合、 quickEditプロパティが定義され、列には、クイック編集モードで編集可能になります。 すべてのデフォルトを受け入れるには、単に設定することができますquickEdit:true 。 より制御するためには、次のプロパティを持つオブジェクトを渡すことができます。

formatter

適切なフォームフィールドをレンダリングするセルのフォーマッタ：の<input type="text">、<textarea>の、または<select>の。 デフォルトでは、細胞のフォーマッタY.Plugin.QuickEdit.textFormatter入力要素を生成するためにすべてのセルに使用されます。 取得するtextarea要素を、使用する列を構成Y.Plugin.QuickEdit.textareaFormatter代わりにする。

validation

列内のすべてのフィールドの検証の構成。

css

基本的な検証ルールをコード化するCSSクラス：

yiv-required

値が空であってはならない。

yiv-length:[x,y]

文字列は、少なくともでなければx最大で文字とy文字。 xとyの少なくとも一つは指定する必要があります。

yiv-integer:[x,y]

整数値は、少なくともでなければxとほとんどでy 。 xとy両方ともオプションです。

yiv-decimal:[x,y]

進値は、少なくともでなければxと最大でy 。 指数は許可されません。 xとy両方ともオプションです。

fn

引数として、その範囲とセルのフォーム要素としてDataTableで呼び出される関数。 値が有効である場合にtrueを返します。 そうでなければ、呼び出しthis.displayMessage(...)エラーを表示するために、その後falseを返します。

msg

基本的なまたは正規表現の検証規則が失敗したときに表示されるメッセージにタイプのマップ。 有効なタイプは次のとおりです： required 、 min_length 、 max_length 、 integer 、 decimal 、およびregex 。 型にはデフォルトがないregexあなたが正規表現検証を設定する場合、そのためには、メッセージを指定する必要があります。 他のタイプのデフォルトのエラーメッセージがで格納されていますY.FormManager.Strings （が提供するギャラリー- formmgr - CSS -検証 ）およびオーバーライドされたおよび/ ​​または局在化させることができる。

regex

値が有効と見なされるために満たさなければならないことを正規表現。

時々、編集不可能な列は、クイック編集モード時には異なるレンダリングする必要があります。 最良の例は、クイック編集モードで悲惨なことができる間、ページから移動するので、リンクを含む列です。 クイック編集中にリンクを削除するには、設定qeFormatterように列にY.Plugin.QuickEdit.readonlyLinkFormatter 。 メールアドレスの場合は、使用Y.Plugin.QuickEdit.readonlyEmailFormatter 。 また、独自のカスタム、読み取り専用のフォーマッタを書くことができます。 単純にデータテーブルのセルのフォーマッタを構築するための通常の規則に従います。

存在しない機能

によるYUI 3.3.0 DataTableのバグ 、 td列のフォーマッタに渡される要素は、 前回のコラムから、実際にです。 これは最初の行のボタンをクリックすると、他のすべての行に値をコピーすることができますここで、 ダウンコピーをサポートするために、それはあまりにも面倒なもの。

バグはまた、DOMを操作するのではなく、テキストを返すために基本的なクイック編集セルのフォーマッタの完全な手直しが必要でした。 カスタムセルのフォーマッタが正式にこの初期リリースではサポートされていない理由です。 あなたが冒険好きな方なら、あなたはまだダウンしてコピーするためのサポートが追加するなど、あなたがそれらを書き直す必要があること、それらを構築するが、覚えておくことができる、一度DataTableのバグが修正されました。

著者について： ジョンリンダ （ @ jafl5272 Twitter上では）上での基盤構築のリードエンジニアの一人であるYahoo!を APTが構 ​​築されています。 以前、彼は、Yahoo!のPublisher Networkに取り組みました。

会話して下さい： Bloglinesの | テクノラティ

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