treeble：使用嵌套銳2數據源的行展開

4月14日，2010 8:00由約翰Lindal上午| 開發 | 32評論

約翰Lindal （ @ jafl5272在twitter上）是雅虎建設的基礎上率先工程師 APT是建成。 此前，他曾在雅虎出版商網絡。

丹尼爾·巴雷羅最近關於嵌套表後提醒我，這是關於時間，我完成了我的“treeble”部件。 “Treeble”來自合併“樹”和“表”。原始動機是將每一行後面的細節，以使鑽在一個表中，例如，開始與一個表，其中顯示每個大陸的銷售數字，然後深入到每個國家，地區和城市。 當然，一旦我開始建設，自然的設計是支持任何數據的層次結構。 作為一個例子，它可以顯示一個這樣的樹：

（點擊玩這個例子的截圖。）

概觀

treeble部件由兩部分組成。 首先是打開/關閉樹中的節點的一個小擴展了YUI的DataTable。 （這樣做是通過擴大的DataTable，以便它的工作與現有擴展到DataTable中，最引人注目ScrollingDataTable透明。）第二treeble部分是一個重要延伸到YUI的數據源，被稱為TreebleDataSource，合併結果，從簡單的平面數據來源。 樹是動態生成的，所以你不要有一次加載所有的數據。

棘手的部分是分頁樹：知道已開通的節點子集，僅要求可見項。 TreebleDataSource提供兩種選擇：

  1. 分頁頂級節點，所以他們的孩子可以在同一頁上可見（默認）
  2. 分頁，以便固定數目的節點是可見的

＃1時，是理想的樹是淺，只有每個節點的幾個孩子。 ＃2有必要時，有可能是一個非常大的數目每個節點的兒童。 配置選項控制這種行為是paginateChildren 。 為了分頁工作，從每一個簡單的數據源的項目提供總數不能改變。

由於從簡單的數據源的所有項目都顯示在單個表中的列單套， 給DataTable的架構必須是工會所有的平面數據源模式 。 例如，在上面的截圖中，DataTable中必須有一個數量的列，即使它只是定義為葉節點。

顯然，表中的行不再直接映射到簡單的數據源中的記錄。 相反，每個DataTable中的記錄有三個特殊的成員：

_yui_node_ds

從中檢索記錄的DataSource。 如果允許內聯編輯，這告訴你哪個數據源保存新值時使用。 （您可以在編輯的數量列活生生的例子 。）

_yui_node_depth

樹中的節點的深度。 頂級節點的深度為零。 縮進子節點，在上面的截圖，這是非常有用的。

_yui_node_path

數組節點指數領先紀錄。 例如， [2,5,1]轉化為第二個孩子的第六個孩子的第三個頂級節點。 DataTable.rowIsOpen()和DataTable.toggleRow()需要這個數組，以確定該節點。

YUIDoc為TreebleDataSource的擴展到DataTable的是在這裡 。

配置的DataTable

若要與TreebleDataSource，您的YUI的DataTable中，必須正確配置： 

 var目錄myDataSource =新YAHOO.util.TreebleDataSource（...）;
 VAR myDataTable =新YAHOO.widget.DataTable（容器，列myDataSource
 {
   dynamicData：真實，
   generateRequest：YAHOO.widget.DataTable.generateTreebleDataSourceRequest，
   displayAllRecords： 您TreebleDataSource paginateChildren值相反 ，
   其他配置，例如，paginator
 }）;

需要特殊版本generateRequest因為TreebleDataSource需要接收一個已知的數據格式，以便它可以正確地生成個人簡單的數據源的請求。

構建TreebleDataSource

當你構建TreebleDataSource，你必須通過銳的一個實例的DataSource作為oLiveData 。 此數據源的數據架構中的一列必須有它的解析器設置或者"datasource"或一個自定義的解析函數，做同樣的工作：建立一個新的YUI數據源列值。 默認的數據源分析器可忽略falsey價值觀和構建從任何truthy的價值，例如，一個對象數組，一個XHR網址，或對象定義的數據源dataType和liveData 。 複製從父數據源配置為新的數據源（包括responseSchema treebleConfig ）。 在這篇文章中寫一個自定義的數據源分析器，將在以後討論。

TreebleDataSource本身只有一個配置參數， paginateChildren ，控制分頁行為，如前所述。 廣大的treeble相關的配置設置上通過簡單的數據源treebleConfig對象。 這使得配置是每一個簡單的數據源的不同，在下面的混合數據源的部分討論。

使用本地數據源

活生生的例子演示了如何使用本地數據源。 唯一需要的值treebleConfig generateRequest和totalRecordsReturnExpr ： 

新LocalDataSource（ 陣列 ，
 {
   ...
   treebleConfig：
   {
     totalRecordsReturnExpr：'meta.totalRecords“
     generateRequest：功能（狀態，路徑）
     {
      返回的狀態;
     }
   }
 }）;

由於LocalDataSource忽略所有的請求參數， generateRequest實際上可能返回null，但它相呼應的狀態對象，而不是支持擴展，可以對數據進行排序。

的設置totalRecordsReturnExpr信號TreebleDataSource簡單的數據源，將返回所有的記錄，不只是要求片。 實際價值totalRecordsReturnExpr必須是一個OGNL表達式指定的oParsedResponse由TreebleDataSource存儲可見節點總數，基於哪些節點返回的對象是在當前打開的。 在這個例子中，這是oParsedResponse.meta.totalRecords 。 由於DataTable的（必須有！） dynamicData設置為true true ，活生生的例子也覆蓋DataTable.handleDataReturnPayload設置oPayload.totalRecords=oParsedResponse.meta.totalRecords 。 這給paginator計算總頁數，它​​需要的信息。

使用XHR的數據源

一個示例配置，使用的XHR數據源時，將興建頂級的數據源： 

新XHRDataSource（URL，
 {
   ...
   treebleConfig：
   {
     startIndexExpr：“meta.startIndex。”
     totalRecordsExpr：'meta.totalRecords“
     generateRequest：功能（狀態，路徑）
     {
      返回的路徑='+ path.join（'，'）+
                  '＆的startIndex ='+ state.startIndex +
                  '＆結果='+ state.results +
                  “＆排序='+ state.sort +
                  '＆DIR =“+ state.dir;
     }
   }
 }）;

在這個例子中， generateRequest返回查詢ARGS服務器將解釋以返回適當的排序片path所指定的節點兒童。

價值startIndexExpr是一個OGNL表達式指定的oParsedResponse由簡單的數據源返回的對象中返回的第一個節點的索引存儲。 在這個例子中，這是oParsedResponse.meta.startIndex 。

價值totalRecordsExpr是一個OGNL表達式指定存儲在節點總數oParsedResponse 。 在這個例子中，這是oParsedResponse.meta.totalRecords 。 totalRecordsExpr還指定在oParsedResponse對象由TreebleDataSource存儲可見節點的總數，基於哪些節點是目前開放的返回。

由於DataTable的（必須有！） dynamicData設置為true true ，你也來覆蓋DataTable.handleDataReturnPayload設置oPayload.totalRecords=oParsedResponse.meta.totalRecords 。 這給paginator計算總頁數，它​​需要的信息。

使用混合數據源

TreebleDataSource並沒有要求所有簡單的數據源是同一類型。 例如，如果你有大量的頂級節點，但只有一個子女的為每個節點的一棵小樹上，然後它是有道理的返回頂級節點打開時，整個樹。 默認的數據源分析器，實際上處理這種自動的，如果你指定startIndexExpr ， totalRecordsExpr ，和totalRecordsReturnExpr頂級數據源！

如果你只有少數頂級節點，但每個孩子的樹是巨大的，那麼您的頂級數據源可以使用本地數據，你可以建立一個自定義的數據源解析器實例孩子的XHR數據源，設置startIndexExpr ， totalRecordsExpr ，和generateRequest適當。

你只限於你的領悟能力，系統的複雜性！

請注意，當使用一個自定義的數據源分析器，你必須定義childNodesKey在treebleConfig每一個簡單的數據源，所以TreebleDataSource知道數據源列的名稱。 （當您使用默認解析器，這是自動檢測。）

找到的談話： bloglines technorati

共享和擴展： 書籤del.icio.us Digg它！ | reddit！

32評論

  1. 我發現在您點擊treeble演示錯誤（ http://jafl.github.com/yui2/treeble/ ），CS劉易斯行變為重複-重現：

    1）點擊幻想
    2）點擊CS劉易斯
    3）點擊菲利普·普爾曼

    現在有第二個CS劉易斯行菲利普·普爾曼以上。 你可以點擊它折疊CS劉易斯的子集，或您也可點擊/折疊菲利普·普爾曼CS劉易斯第二行消失。

    也許是一個錯誤在你的數據源？

    - 2010年4月14日，馬庫斯·塔克＃

  2. 作為馬庫斯此外，它也發生在第2頁，再次與第一項。

    評論由傑夫·克雷格 - 2010年4月14日， ＃

  3. 我不知道我是多麼想念。 我已經更新了代碼來解決它。

    評論由約翰Lindal - 2010年4月14日， ＃

  4. 我希望，YUI3將包括樹表。 這是我銳和Dojo之間撕裂排名第一的原因。

    評論mikerobi - 4月15日，2010 ＃

  5. 尼斯的工作約翰！

    由保羅- 4月15日，2010 ＃

  6. @ mikerobi：

    您可以使用Treeble使用YUI 3，立即通過銳3.1的由DAV玻璃建成的2-3的功能。

    銳3一旦有一個本地的DataTable，我會移植到YUI的3 Treeble。

    評論由約翰Lindal - 2010年4月15日， ＃

  7. @約翰

    我的意思是建在部件銳的一部分。

    評論mikerobi - 4月15日，2010 ＃

  8. @ mikerobi：我要離開這個決定的核心YUI團隊，但我希望這將使其成為核心！

    評論由約翰Lindal - 2010年4月15日， ＃

  9. mikerobi - 代表YUI的核心團隊，我們聽到你。 這將是部分航運部件或像約翰將建立一個偉大的擴展銳3畫廊，這將是同樣有用的人。 你有選擇。 - 埃里克

    評論由 Eric 米拉利亞 - 4月15日，2010 ＃

  10. 哇，只是我一直在尋找 - 感謝！

    但有一個排序表中的頂級節點的方式來增加嗎？ 例如，它可能由標題排序前鑽取到子節點？

    由J.阿特伍德- 5月5日，2010 ＃

  11. 排序必須做的DataSource。 使用XHR時，因為服務器返回數據的簡單排序，這是很容易的。 由於各組兒童單獨加載，樹結構將保持不變。 使用本地數據源時，你將需要建立一些自定義的JavaScript，因為香草銳LocalDataSource不排序。

    評論由約翰Lindal - 2010年5月5日， ＃

  12. @ mikerobi - TreebleDataSource現在可以在YUI 3畫廊： http://yuilibrary.com/gallery/show/treeble

    評論由約翰Lindal - 6月7日，2010 ＃

  13. 工作約翰很高興。 一個查詢，是有可能突出選定/展開的節點？

    阿米特巴- 6月9日，2010 ＃

  14. @阿米特巴：是的，您的點擊處理程序（安裝在細胞格式化）可以節省切換行，然後細胞格式化可以申請一個CSS類，高亮顯示一行表時，打開/關閉行後，重新呈現。

    評論由約翰Lindal - 2010年6月9日， ＃

  15. 嗨，

    這是一個很好的工作。 謝謝。

    但仍有馬庫斯提到的bug，但這個時候從第二頁時，有2項以上。 （最後一個項目除外）

    檳城- 6月16日，2010 ＃

  16. 盛：我無法重現你的索賠。 您正在測試YUI的2或3銳？ 請提供確切順序的步驟，你得到的不正確的行為。

    評論由約翰Lindal - 6月17日，2010 ＃

  17. 嗨，
    其實，我發現了同樣的錯誤使用YUI 2和YUI 3。
    因此，這裡有重現的步驟：

    1 - 使用的樣本數據，有超過8個頂級節點，包含兒童
    2 - 選擇每頁5行
    3 - 第2頁
    4 - 點擊第一行的第2頁

    - >我們將看到，所有行（頂級節點）以上是重複的

    下面是我使用的例子：
    http://www.chillythanh.com/treebleTesting.html

    檳城- 6月17日，2010 ＃

  18. 謝謝！ 這就是我需要的。

    這是我掀起第二個算法得到我之前釋放的部件。 只表現paginateChildren：虛假的bug。 我已經解決的bug，增強了我的例子來說明，它的作品：

    1 - 選擇2每頁行
    2 - 去第2頁
    3 - 點擊第一行

    與舊的代碼，它打破了，但更新後的代碼工作。 我有固定的銳2和YUI 3的例子。 我還安排了新的CDN推為YUI 3畫廊模塊。

    評論由約翰Lindal - 6月17日，2010 ＃

  19. 太棒了！ 它的工作原理吧！！
    太謝謝你了。

    你的widget在合適的時機“的原因，其實就是我一直在尋找這那種溶液與YUI2工作的，但，我did'nt找到任何與jQuery treetable除外某些功能到目前為止。

    我很感激​​，謝謝！！ :-)

    檳城- 6月17日，2010 ＃

  20. 我好奇這種說法。

    “由於LocalDataSource忽略所有的請求參數，generateRequest實際上可能返回null，但它相呼應的狀態對象，而不是支持擴展，可以對數據進行排序。”

    我想實現客戶端排序，想知道究竟我應延長。 有沒有人放在一起工作的例子嗎？

    謝謝！

    由J.阿特伍德- 7月1日起，2010 ＃

  21. 創建LocalDataSource覆蓋makeConnection（）進行排序，然後返回它的數據陣列。 為了做到這TreebleDataSource，你需要提供一個自定義的解析函數（而不是指定解析器：“數據源”），對根的數據源配置childNodesKey。 這將確保每一個孩子的數據源也將被排序。

    評論由約翰Lindal - 2010年7月1日起， ＃

  22. 感謝您的幫助，約翰！

    我是能夠覆蓋makeConnection（），和現在完全頂層各種。

    剩下的事情我有麻煩，現在只擴大頂層節點切換工作表時，在原來的排序順序是。

    例如： http://web.me.com/jeremiah.atwood/sort_example/sort_example.html

    點擊標題頭升序排序，然後展開科幻小說。 艾薩克·牛頓出現在科幻小說......

    - 耶利米

    由J.阿特伍德- 7月2日，2010 ＃

  23. 你在makeConnection（）排序的解決方案是非常好的！ 我推廣它，並把它添加到的例子。

    我已經更新為YUI 2和YUI 3 TreebleDataSource用一個簡單的，醜陋的修復，以防止被顯示不正確的結果：當您更改排序，一切都將關閉。 不幸的是，這是最好的，可以做沒有更多的信息。

    為了提供一個更好的用戶體驗，我要引入一個新的配置：uniqueIdKey。 如果指定的話，這將被用來重新同步的內部狀態後排序，而不是把它扔全部帶走。 敬請期待！

    評論由約翰Lindal - 2010年7月2日， ＃

  24. 您好約翰，
    我米工作與項目使用YUI的部件很多。 最近我們的項目帶有一個treegrid像你treeble部件要求。 可以請你給我一個例子，使用的XHR數據源。
    提前感謝！

    評論由傑里蔡- 2010年7月15日， ＃

  25. 已經有一些有關如何使用一個XHR數據源的問題。 下面是一個例子：

    VAR paginateChildren = TRUE;

    的功能xhrGenerateRequest（狀態，路徑）
    {
    回報“的startIndex =”+ state.startIndex +
    （state.results == NULL“＆=”+ state.results：！“）
    （state.sort“及排序=”+ state.sort：“”）+
    （state.dir“＆DIR =”state.dir：“？”）
    （路徑&& path.length> 0“＆小子=”+ path.join（“ - ”）？“）;
    };

    VAR root_ds =新YAHOO.util.XHRDataSource（“treeble_data.php嗎？”
    {
    responseSchema：
    {
    resultsList：“記錄”，
    領域：[“ID”，“量”，“量”，{鍵：“小子”，解析器：'數據源'}]，
    metaFields：{startIndex的：“first_index，當前第：”total_records'}
    }，
    treebleConfig：
    {
    generateRequest：xhrGenerateRequest，
    startIndexExpr：“meta.startIndex。”
    totalRecordsExpr：“meta.totalRecords。”
    }
    };

    VAR DS =新YAHOO.util.TreebleDataSource（root_ds，{paginateChildren：paginateChildren}）;

    無功配置=
    {
    initialRequest：從startIndex：0，結果：5}，
    dynamicData：真實，
    generateRequest：YAHOO.widget.DataTable.generateTreebleDataSourceRequest，
    displayAllRecords：！paginateChildren
    handleDataReturnPayload：功能（oRequest，oResponse，oPayload）
    {
    oPayload.totalRecords = oResponse.meta.totalRecords;
    返回oPayload;
    }
    };

    表=新YAHOO.widget.DataTable（ID，COLS，DS，配置）;

    評論由約翰Lindal - 2010年7月19日， ＃

  26. 我已經更新銳2的代碼來支持排序後的恢復狀態。 新的配置是“uniqueIdKey。”所有的細節，請參閱文檔： http://jafl.github.com/yui2/treeble/yuidoc/YAHOO.util.TreebleDataSource.html

    YUI 3版本3.2.0 YUI的等待被釋放，因為這將使簡化需要建設TreebleDataSource配置的重要。

    評論由約翰Lindal - 2010年8月11日， ＃

  27. 真棒！ treeble是動手我發現TreeGrids的最好的選擇。

    謝謝，
    J

    評論由J.阿特伍德- 2010年8月12日， ＃

  28. 只是想知道如果許可證是作為銳相同。

    偉大的工作，

    若昂

    - 2010年8月30日，由若昂·萊亞爾＃

  29. 是的，它的BSD。 我更新的文件，以使這個明確。

    評論由約翰Lindal - 2010年8月30日， ＃

  30. YUI的3.2.0版本Treeble現在是：

    http://jafl.github.com/yui3-gallery/treeble/

    需要配置treeble代碼是簡單的感謝YUI的3.2.0中的變化和自身Treeble現在運行得更快！

    評論由約翰Lindal - 2010年9月8日， ＃

  31. 剛剛發現了一個treeble和正常的DataTable之間的重要區別時，使用1 XHR的數據源。

    在一個正常的DataTable中使用JSON數據源為一個給定頁面的結果沒有匹配自己的位置，在數據源有自己的指標，他們只有在該頁面正確的順序。

    例如：
    結果從20到39的位置有一個數據源的結果為2頁的請求。 響應可能是這樣的：
    {結果：[
    {“行”：20，“阻特”：“一個”}，
    {“行”：21，“阻特”：“B”}，
    ...
    {“行”：39，“阻特”：“Z”}，
    ]
    }

    DataTable中會使該頁面使用這種反應的結果。

    Treeble數據源，預計每個結果相匹配的數據源有自己的指標。 因此，元素從response.results [20]到response.results [39]必須設置。 在上面的例子的反應只有從0到19的元素。

    若昂·萊亞爾- 10月21日，2010 ＃

  32. 解決這個問題可以通過設置'startIndexExpr在treebleConfig，然後通過設置在響應這個值，或在數據源使用的responseParseEvent。

    若昂·萊亞爾- 10月21日，2010 ＃

很抱歉，評論已被封閉，在這個時候。

主辦雅虎

©2006-2012雅虎公司所有權利保留。 隱私政策 - 服務條款

支持WordPress的關於雅虎 虛擬主機 。