雅虎用戶界面博客（YUIBlog）

Treeble與銳3的DataTable

測試版的數據表 3.3.0在銳給了我們一個非常強大的組件一起玩。 踢輪胎以有用的方式，我決定更新我的Treeble例子使用的DataTable。 （Treeble使分層數據顯示在表中 。）

令我高興的是，這是一件輕而易舉的！ 所有的辛勤工作是在TreebleDataSource ，擴展銳3數據源，所以我所要做的就是將其插入DataTable中使用Y.Plugin.DataTableDataSource ，然後配置列：

風險值=新局副局長華 TreebleDataSource (...),
	皮克=新華 Paginator (...),
	表;

函數 sendRequest（）{
	 table.datasource.load（{
		要求：{
			從 startIndex：pg.getStartIndex（）
			 resultCount：pg.getRowsPerPage（）
		 }
	 }）;
 }

 cols的風險值= [
     {碼：'yui33 -下鍋'，標籤：''}，
     {
        關鍵：'treeblenub'，標籤：''，
        格式化：Y.Treeble.buildTwistdownFormatter（sendRequest）
     }，
     {
        關鍵：'標題'，標籤：'標題'，
        格式化：Y.Treeble.treeValueFormatter
     }，
     ...
 ];

表=新Y.DataTable.Base（{columnset：cols的}）;
 table.plug（Y.Plugin.DataTableDataSource，{數據源：副}）;

要查看完整的源代碼，指的是活生生的例子 。

唯一美中不足的是蒼蠅：

• 該yui33 -劈列。 由於一個錯誤，在銳3.3.0 DataTable中時， td的元素傳遞給一列格式化實際上是由前一列。 因此，第一列的表顯示 twistdown，第二欄是空的。
• 未定義值的數據顯示為{value} ，而不是空格（ 錯誤2529858 ）。

為了使Treeble更容易使用，我加入了薩姆的皮膚樣式的CSS類寫出由Y.Treeble格式化。

盡情享受吧！

作者簡介： 約翰林達爾 （ @ jafl5272在Twitter）是一種領先的工程師構建基礎上， 雅虎 APT的建立。 此前，他曾在雅虎出版商網絡。

查找談話： bloglines | Technorati的

共享和擴展： 書籤和書籤 | Digg它！ | reddit！