Yahoo!用戶界面博客（YUIBlog）

使用嵌套銳2的DataTable的行展開

像往常一樣，這是對開發商銳論壇來最有趣的問題（提示：這使得論壇流連的好地方）。 最近，有人問以下內容： 使用YUI 2 DataTable的 ，可以嵌套子表提供有關行的詳細信息，當它在主表中的“擴大”？ 有人問前幾次，但我還沒有很好地解決了在過去分享。 現在我有一個解決方案，並且，隨著我的其他例子，你可以找到它這裡 。

這是是什麼樣子：

頂端輸入框實際上是1 2 YUI的自動完成框，您可以先尋找一個特定的音樂藝術家。 當你在下拉列表中找到您正在尋找，選擇它的藝術家將帶來一個DataTable上市下令頂部的最新專輯，藝術家，所有的專輯。 [+]簽名，每行左邊的允許該行擴大;行擴展時，嵌套的DataTable顯示列出所選專輯的曲目。

嵌套子表向右縮進，離開列展開/折疊圍繞它的圖標。 幾個子表可以在同一時間開放。 可以排序的主表和子表將與他們的主記錄。

我們在這裡使用的技術涉及到改變主表中的行的高度，所以它留下足夠的空間為子表重疊。 在示例代碼中的註釋，所以這裡我只是描述邏輯。 首先，子表的創建和附加到document.body並從頁面流（中刪除position:absolute ）。 寬度設置主表的寬度減去展開/折疊列的寬度。 只有這樣，孩子測量表的高度，因為縮小可以導致子表的一個單元包裝（如在第二軌道）上的文字，增加高度。 主行的高度，增加了子表的高度。 事實上，它是含有細胞，被調整的切換圖標的高度，該行只會匹配最高的細胞。 孩子的位置，然後設置主排的位置，抵銷權，以清除“展開/折疊列，清除主行。

重要的是要做到這一點的所有信息的軌道。 DataTable中的記錄是這樣做的好去處。 A記錄的對象可以採取超越了原本由DataSource讀取額外的信息。 如果您使用setData()方法，在一個新的領域，這一領域將創建的，如果它不存在。 我們所有相關信息存儲在相關領域展開/折疊列，被稱為__NESTED__並持有的對象具有以下屬性：

• td ：在主表中展開/折疊細胞
• tdOrigHeight ：該細胞的原始高度，作為一個子表中的偏移
• tdNewHeight ：子表的高度，擴大了第二次使用時，
• dt ：子DataTable實例的引用
• div ：子DataTable的容器的參考
• expanded ：該行是否擴大或不

為這一領域的價值（不是undefined）的存在告訴我們，子表的expanded:true是否可見（ expanded:true ）或不存在。

定位在兩個步驟完成。 創建表時，水平位置（左屬性）設置一次。 垂直位置（頂部）設置在與其他記錄的第二個步驟。 而左邊的位置是穩定的，展開和折疊行或排序的主表的行向上或向​​下移動（而不是水平），當這一切發生的時候，所有的子表的垂直位置需要移動。 （ 注：從定位的角度來看，它可能更容易使孩子的父表和使用表的一部分position:relative 。讓瀏覽器，我們移動它，雖然它使得定位更容易，這種做法造成其他潛在的問題由於子表將成為作為主DOM樹的同一分支的一部分，風格會傳播從主表到孩子，從子表中的事件，將泡沫主，依此​​類推。）

在這個例子中，你可以保持不同的藝術家，這意味著一個新的主表和新的子表查詢。 這一點很重要，不要忘記那些子表和離開他們的背後。 當一個新的藝術家要求，我們一定要摧毀所有的子表和它們的容器，先通過記錄，這些記錄的情況下，有一個__NESTED__領域，我們稱之為destroy()子表，然後取出整個兒從DOM樹。

YQLDataSource：從YQL的獲取數據

所有的自動完成和幾個數據表中的數據讀通過YQLDataSource ，一個子類ScriptNodeDataSource使用YUI 2獲取實用程序來獲取數據直接從YQL的服務。 通常，您不需要提供任何參數時創建的一個實例YQLDataSource 。 它已經指向YQL的服務的URL，所以你不想改變這種狀況。 YQLDataSource會讀它從服務器收到的所有領域。 一方面，這意味著你並不需要提供1 responseSchema.fields領域的清單，但另一方面，它意味著你不應該使用Select *您YQL的查詢，而是列出您想要的特定領域檢索在YQL的聲明。 您仍然可以使用responseSchema.fields陣列重視一些領域的解析器，如果他們是數字（在這個例子中的許多領域），日期，布爾值或特殊格式。

由於YQLDataSource的ScriptNodeDataSource的一個子類，它可以用於任何YUI組件，它使用一個DataSource。 我用於自動完成框一個YQLDataSource，另一主表和一個共享YQLDataSource所有子表。 由於所有子表的格式答复是一樣的，是沒有問題的重用，YQLDataSource他們當中的單一實例。 如果曾有過任何值得策劃，我可能也與YQLDataSource圖表。

YQLDataSource作為其第一個參數的YQL聲明sendRequest()方法。 這意味著在一個DataTable，它是你在設置initialRequest配置屬性的值，或您傳遞給我的requery()方法，這也包括在頁面。 自動完成，你組裝在的的YQL聲明generateRequest()方法，你必須重寫。 在這個例子中使用的所有YQL的語句存儲在代碼的頂部附近的三個YQL_QUERY_ xxxx常數。 YAHOO.lang.substitute用於組裝，其參數的查詢。

展開/陷落柱最初是空的，它有沒有從服務器端傳來的數據。 列被添加在現場，然後相關的數據字段用來存儲嵌套表的設置。 與它相關的格式化增加了一個無形的<a>元素，所以它可以作為一個製表位，可容納一個合適的唱腔的作用和地位。 它有一個className ，作為一個非重複的背景設置[+]號，是這樣的：

  YUI的皮膚。YUI-SAM-DT td.__NESTED__ div.expand {
    背景：透明的URL（http://yui.yahooapis.com/2.8.0r4/build/assets/skins/sam/sprite.png）無重複0-350像素;
 } 

有一個類似的折疊圖標的樣式聲明。 這使得它真正的視覺設計師容易徹底改變頁面的外觀，如果需要的話。 如果我通過格式化列的內容，其內容設置為文本，圖像或按鈕，就沒有辦法去改變它，而無需改變代碼。 這樣，單元格的內容仍然是無形的造型是完全在設計師的手中。

要切換嵌套表，我們響應上的任何點擊，CEL。 要處理的點擊，我們可以簡單地依靠DataTable的cellClickEvent ：

  albumDt.on（“cellClickEvent，功能（oArgs）{
     VAR目標= oArgs.target，事件= oArgs.event的，
        紀錄= this.getRecord（目標），
        列= this.getColumn（目標）;

     / /我們關心的點擊列上的“擴大”和“稱號”
    開關（column.key）{
    情況下，擴大“：
         Event.stopEvent（事件）;
         / /。  。  。  。 

首先，我發現，從事件的目標（是<td>元素），記錄和相應的單元格的列。 從鍵的列，然後，我決定做什麼和記錄，我得到我需要的所有信息。

最後的思考

這是一個例子，它有一些粗糙的邊緣。 如果你調整瀏覽器窗口，子表可能最終會漂浮在奇怪的地方。 將需要進一步的事件監聽器檢測到這種變化，並重新佈局。 另一個增強是利用活區的ARIA子表，發現屏幕閱讀器用戶，在其目前的形式，這方面的例子在一個屏幕閱讀器票價很差，因為子表和相應的行之間的分離主表。

YQL是一個外部表或數據API查詢系統，它不能做任何比它代表的表或API。 全名藝術家搜索，它不會找到部分的名稱，這使得自動完成搜索框的行為有點滑稽藝術家。 不過，對於這個例子的目的，它是最好的表，我能找到的，因為它有三個層次結構：藝術家 - 專輯 - 軌道。

一個更完整的版本，這個例子也可以通用YAHOO.widget.NestedDataTable作為一個單獨的js文件，其中一些原來的缺點是固定的DataTable的子類中定義的對象。

找到的談話： bloglines technorati

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