Yahoo!のユーザーインターフェイスブログ（YUIBlog）

YUI 2 DataTableの簡易編集モード

YUI 2 DataTableには、滑らかなインライン編集を提供します。 ときにdisableBtns列の設定でオンになっている、文字列や数値のような単純な値を編集するだけでExcelのように感じている。 各変更は、通常（または拒否！）新しい値を格納するためにサーバへXHRのコールを必要とするためしかし、経験は、デスクトップアプリケーションのように応答することはできません。 ユーザーが表示されている値の多くを変更する必要がある場合、それは遅いとイライラする経験をすることができます。 これを解決するために、私はQuickEditDataTableを開発した。 これは、DataTableには、編集可能なすべての値が1つの一括操作で変更できるクイック編集モードを、追加して拡張します。

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

概要

クイック編集モードに入るには、呼び出しstartQuickEdit() クイック編集モードを終了するには、呼び出しcancelQuickEdit()

それは、呼び出す前に変更内容を保存する責任がありますcancelQuickEdit() このタスクを簡素化するために、QuickEditDataTableは提供getQuickEditChanges() これは、オブジェクト、行ごとに1つの配列を返します。 各オブジェクトは、列のidがオフキーと、その行に変更された値のみが含まれています。 例えば、テーブルが4列（タイトル、著者、年、数量）を持つ、とユーザーはわずか20に1つの行の量を変更した場合、その行のオブジェクトは次のようになります{quantity:20} 。 他の値は省略されます。

QuickEditDataTableは簡単に拡張できますYAHOO.widget.ScrollingDataTable 、その機能が必要な場合。 これを必要な場合は、単にソースファイルのコピーを作成し、基本クラスを変更してください。

コンフィギュレーション

クイック編集は編集可能な列のセルのフォーマッタがスワップアウトして生成する特殊なフォーマッタで置換されているモーダル状態であるinput 、 textarea 、またはselectの要素を。 持っている列だけquickEdit設定が編集可能になります。 設定オプションは次のとおりです。

copyDown

trueの場合、列の一番上のセルは、行の残りの部分に値をコピーするボタンが表示されます。

formatter

適切なフォームフィールドをレンダリングするセルのフォーマッタ：の<input type="text">、<textarea>の、または<select>の。 デフォルトでは、細胞のフォーマッタYAHOO.widget.QuickEditDataTable.textQuickEditFormatter入力要素を生成するためにすべてのセルに使用されます。 取得するtextarea要素を、使用する列を構成YAHOO.widget.QuickEditDataTable.textareaQuickEditFormatter代わりにする。 また、カスタムのクイック編集フォーマッタを書くことができます - 以下を参照してください。

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.displayQuickEditMessage(...)エラーを表示するために、その後falseを返します。

msg

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

regex

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

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

カスタムクイック編集フォーマッタ

簡易編集モードのカスタムセルのフォーマッタを作成するには、次のように機能を構築する必要があります。

機能myQuickEditFormatter（oColumnエル、oRecord、、ODATA）{
   VARマーク=
     "<input type="text" class="{yiv} yui-quick-edit yui-quick-edit-key:{key}"/>'+
     YAHOO.widget.QuickEditDataTable.MARKUP_QE_ERROR_DISPLAY;
     el.innerHTML = lang.substitute（マークアップ、{
      キー：oColumn.key、
       yiv：oColumn.quickEdit.validation？  （oColumn.quickEdit.validation.css | | ''）：''
     }）;
     el.firstChild.value = extractMyEditableValue（ODATA）;
     YAHOO.widget.QuickEditDataTable.copyDownFormatter.apply（この、引数）;
 };

を使うことができますtextareaまたはselectの代わりのinputですが、1つのフィールドを作成することができます。

extractMyEditableValue()別の関数である必要はありませんまたそれをのみ使用することに限定されている必要がありますoData 。 作業は通常、フォーマッタ関数でインライン行われますが、サンプル関数の名前は、ポイントを明確にすべきである。

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

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

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