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

YUI 3のDataTableとTreeble

のベータリリースのDataTable YUI 3.3.0には私たちと遊ぶのが非常に強力なコンポーネントを提供します。 有用な方法でタイヤを蹴るために、私は更新することを決めたTreeble DataTableを使用する例を。 （Treebleは有効に、テーブル内の階層データを表示する 。）

私の喜びに、それは微風だった！ すべてのハードワークがで行われているTreebleDataSource YUI 3は私がしなければならなかったすべてが使用してDataTableに差すとなるように、DataSourceを拡張する、 Y.Plugin.DataTableDataSourceしてから、列を設定します。

 VAR DS =新しいY.はTreebleDataSource (...),
	 PG =新しいY.ネータ(...),
	表;

関数SendRequestの（）{
	 table.datasource.load（{
		リクエスト：{
			 startIndexの：pg.getStartIndex（）、
			 resultCount：pg.getRowsPerPage（）
		 }
	 }）;
 }

 VAR COLS = [
     {キー："yui33 -ハック"、ラベル：''}、
     {
        キー："treeblenub"、ラベル：''、
        フォーマッタ：Y.Treeble.buildTwistdownFormatter（SendRequestの）
     }、
     {
        キー：'タイトル'、ラベル："タイトル"、
        フォーマッタ：Y.Treeble.treeValueFormatter
     }、
     ...
 ];

表=新しいY.DataTable.Base（{columnset：COLS}）;
 table.plug（{データソース：DS}を、Y.Plugin.DataTableDataSource）;

完全なソースコードを参照するには、を参照してくださいライブ例 。

軟膏での唯一のハエは、以下のとおりです。

• yui33 -ハックの列。 によるYUI 3.3.0 DataTableのバグ 、 td列のフォーマッタに渡される要素は、 前回のコラムから、実際にです。 したがって、テーブルの最初の列はtwistdownが表示され、2番目の列は空です。
• データの未定義の値は次のように表示されている{value}の代わりに空白（ バグ2529858 ）。

使いやすくTreebleにするために、私はどのスタイルで書き出されるCSSクラスへのサムのスキンが追加されましたY.Treebleフォーマッタを。

お楽しみください！

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

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

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