Yahoo!用戶界面博客（YUIBlog）

問薩蒂揚：行擴張和嵌套數據表

薩蒂揚（又名丹尼爾·巴雷羅）是一個長期的YUI貢獻者和最豐富的，慷慨的專家之一YUI的論壇 。 他也是新書上YUI的2.8.0，2.8.0銳作者：圖書館學習 。 這在“向薩蒂揚”系列文章，建議由阿爾貝托桑蒂尼和布賴恩·凱恩 。 薩蒂揚將被作為該系列的一部分YUIBlog回答在未來幾週內的一些其他問題。

這是一個在信息架構中的常見問題：你有表格數據，你需要顯示更多的信息，對每個表行所代表的實體。 通常，這是實現由“擴大”上點擊或選擇行和顯示下方直接選擇行的數據。 有時，這種額外的數據來進一步DataTable的方式，其中可能也有其行擴展到更多的嵌套級別。 我們稱之為鑽成一行行擴張的基本使用情況;使用案件涉及每一行進一步的表格數據時，該功能被描述為一個嵌套的DataTable。

到目前為止，已經有幾個嚴重的嘗試，以支持這些功能與銳2的DataTable 。 DataTable的例子自己的名單，包括一條記錄擴展 Gelinas由Eric的例子。 約翰Lindal介紹前一段時間他在銳博客文章 Treeble 版本庫中的一個銳3 。 我也試過與我NestedDataTable項目。

這些解決方案都不是完全令人滿意，問題往往復發，事實上，兩個人問問問薩蒂揚系列的一部分， 。 在這篇文章中，我將深入和探索戰略和期權交易行擴張和嵌套數據表。

一個要考慮的幾個問題

DataTable中讓幾個很基本的假設。 其一是記錄的序號位置對應一排在相同的序號位置<tbody>標記。 我算的財產17的發生sectionRowIndex返回一個序號<tr>元素（也就是說，它載內的的<tbody> ， <thead>或<tfoot> ）在其第。 也有許多發生記錄的序號位置作為一個入行數組索引使用。 例如，在該行擴展的例子，讓運行到結束，展開“任何中途表的行，然後執行以下兩個語句在調試控制台：

  YAHOO.example.Basic.oDT.getTrEl（YAHOO.example.Basic.oDT.getRecord（17）ID）。 

 YAHOO.example.Basic.oDT.get 下一步 TREL（YAHOO.example.Basic.oDT.getRecord（17）ID）。 

雙方將顯示yui-rec17的答案，這是不正確的，因為第二個語句應該返回下一行的id。 如果你沒有擴展或使用低的數量，擴大行之前的行相同，第二條語句將正確返回yui-rec18 。

顯然，所有的例子中列出了他們的基本形式工作;以上的“錯誤”一招款項證明。 如果您的應用程序保持在安全的邊界，你的罰款。 然而，功能添加到您的應用程序，在稍後的時間，使有關DataTable的內部是如何操作的更深的假設，可能會導致一些問題。 （對於什麼是價值，DataTable是非常強大的。其內置功能是非常安全的，排序列，編輯單元格，選擇，並強調精細，據我測試它。我是不是能夠打破其最流行的內置在功能）。

在DataTable中的嵌套結構，還邀請了一些其他並發症：點擊擴展的自定義行的地方可能是麻煩，因為嵌套元素上點擊泡沫包含的DataTable亂七八糟的東西了，。 你必須記住這一點時，聽如事件cellClickEvent以來報告的目標細胞可能不屬於父表，但嵌套在父表上-所以取記錄或列的單元格可能會失敗。

最後，有一些概念上的問題。 不getNextTrEl什麼意思？ 它包括DataTable的自己行（我們姑且稱之為數據行 ），還是應該包括自定義行補充後，象現在這樣嗎？ 我會說，它應該只包括自自定義行，數據行被嵌套，是不是數據行，但兒童的兄弟姐妹，雖然HTML標記迫使我們使用純<TR>元素，從理論上講，他們沒有兄弟姐妹。 然後，如果你以某種方式達成<TR>元素，並要求其相應的使用方法中包含的DataTable的記錄getRecord()如果<TR>是一個自定義行，什麼是其相應的記錄： null （因為它doesn' ţ屬於包含的DataTable，但嵌套）或數據行的記錄，它是一個孩子嗎？

你想怎麼行上的條紋是什麼？ 目前，偶數和奇數行的分拆邏輯，不分青紅皂白地，無論是數據行或自定義行，但也許你想自定義行進行相同的背景顏色，它們所屬的數據行。

這些都是一些行擴展功能方面需要定義，對他們的任何決定，只要是一致的和可預見的，可能會滿足大部分用例。

築巢沒有的DataTable

當然，我們可能住有這些限制，但所有DataTable的困擾是什麼？ 如果你想要的是一些嵌套的信息，以表格形式顯示，你可以簡單地使用一個普通的<table>元素或類似的東西。 事實上， 銳3 Treeble版本 （ 例如 ）正是這麼做的，因為目前還沒有一個YUI DataTable的版本要使用，它使用了沒有。 你不如使用YUI做同樣的事，就像在這個例子中 ，在那裡沒有DataTable中也使用的HTML <table>所有。 誠然，這個例子是非常簡單和直觀醜（我從來沒有聲稱自己是藝術），但是，如果這是所有你關心的，至少你知道它不會讓你失望。 只是一個想法，你可能要進行評估，當你做什麼決定。

與DataTable中的行擴張

最後，你可能真的想用一個DataTable。 如果是這樣，我們怎麼去？ 既Treeble和我自己的NestedDataTable巢兩個DataTable。 埃里克Gelinas，相比之下，用另一種方​​法，我覺得這更靈活。 他沒有做出任何假設上正在發生的事情是在擴張。 它採用了rowExpansionTemplate配置屬性，可以採取一個字符串模板或一個函數的引用。 字符串模板通過YAHOO.lang.substitute處理，沿從Record對象擴大為行數據。 我們已經知道，我們並不需要在列定義數組的所有領域，我們已經與數據源讀取定義，我們可以保持在儲備額外的數據源字段，供以後使用。 模板機制，讓我們在擴展行顯示的其他領域，我們沒有在常規行的空間。 例如列出了來自Flickr的圖片名稱，這可能是過大，表明在主要的DataTable的圖像。 組裝URL指向那些照片的領域從一開始就被加載。 鱗次櫛比擴張，這些位放在一起建立了一個<img>標籤和圖片的縮略圖顯示在擴展行。

現在，如果我們設置rowExpansionTemplate一個函數的引用，那麼我們所有的靈活性，我們有可能會想。 我用這個想法在這個例子中 ，但略有不同rowexpansion.js文件。 原來是更側重於使用字符串模板，它假定擴展行，可以摧毀和重建隨時在沒有成本。 這不是擴張的情況下，當是更複雜的東西，如一個嵌套在進一步的DataTable DataTable的。 每次一列進行排序，DataTable將刪除所有行，並重新開始，這將是複雜的內容極其昂貴的，如果它被刪除，以及重建。 相反，我要做的是保持擴張狀態對象的擴展行（在方法描述getExpansionState ），這是在父表中的記錄存儲。 這些數據不會被刪除，因此它更有效地恢復時，同一行的父行重新呈現。

然而，有時候，父行會被刪除的目的，或父DataTable從服務器重載，可能不同的數據，這就要求孩子被刷新。 我需要明確在這種情況下，刪除子行，否則他們將保留在內存中的殭屍。 因此，我重寫的幾種方法（ deleteRow ， deleteRows ， initializeTable ， destroy ），並刪除嵌套的內容之前，它的父記錄被刪除。 刪除，但還不夠，因為內容可能需要一些更詳細的處置手段。 DataTable的許多複雜的組件，需要完全清除的實例和其相關聯的事件被稱為1 destroy方法。 我添加的rowExpansionDestroyEvent事件到信號的嵌套行是即將被銷毀，從而使開發商所需處理的內容。 例如：

  albumDT.on（“rowExpansionDestroyEvent，功能（州）{ 

    狀態[NESTED_DT的destroy（）; 

 }）; 

所有事件接收state對象作為其唯一的參數。 在這裡，我使用嵌套的DataTable的引用，我根據我自己的屬性名稱（ NESTED_DT ）存儲和調用其destroy方法。

RowExpansionDataTable增加了自動觸發行擴張，也聽欄上，點擊列。 你不需要做任何該列顯示了活躍。 它總是在構造函數中使用這個簡單的代碼，它增加了左側：

  REDT =功能（elContainer，aColumnDefs，oDataSource，oConfigs）{ 

  aColumnDefs.unshift（{ 

          鍵：ROW_EXPANSION， 

          標籤：“， 

          的className：CLASS_TRIGGER 

      }）; 

      REDT.superclass.constructor.call（這elContainer，aColumnDefs，oDataSource，oConfigs）; 

 }; 
  YAHOO.widget.RowExpansionDataTable = REDT; 

還RowExpansionDataTable設置為偵聽cellClickEvent和檢查，如果單擊列是其主要集中存儲的值在不斷的ROW_EXPANSION ;有沒有我們需要應對這一事件，雖然我們可能要成立進一步聽眾其他列我們自己的目的。

雖然我rowexpansion.js文件的基礎上是埃里克Gelinas的工作，也有許多差異。 我改變 ​​了許多變量，方法和屬性名稱，以符合標準命名約定和固定大量JSLint由標記的錯誤。 然而，在其基礎代碼仍然是埃里克。

例子是很好的註釋和描述的示例表後;的rowexpansion.js檔案很容易遵循，它的API文檔也可用。

堆焊兒童

添加行的另外一種選擇是使父行上述擴大浮動。 我已經用在我自己的這個NestedDataTable例子 。 此示例還使用YQL的表通過YQLDataSource和，因為我在提到以前的文章 ，YQL的藝術家查找表是有些笨拙的使用沿銳2自動完成 ，因為它不會與藝術家名稱帶回部分匹配。

在這裡，當你擴大一行，容器<div>是創建和附加到文檔正文。 容器使用絕對定位，移動到下面一個正在擴大的行權重疊。 容器的涵蓋範圍擴大，使未來的行，此行的高度增加，使空間重疊的容器。

此機制不遺餘力，從我前面提到的兩個問題，我們沒有行被添加到DataTable，記錄和列的序號位置匹配所有的時間和事件不能從容器到DataTable中的泡沫，因為他們的後裔DataTable中。 然而，維持容器的位置，需要注意的幾個事件，並重新計算自己的位置。 開放的排序與幾個孩子的主要表將移動所有的容器，其新職位輕鬆，所以將調整瀏覽器窗口。

這個例子使用兩個嵌套層次，而RowExpansionDataTable例如，可以擴大到任何限制。 我曾嘗試把兩者結合起來，我看不出理論的理由不會成功;然而，在試圖這樣做，我發現有這麼複雜的例子，這是很難描述，在任何合理大小的博客文章。 例如，因為它是具有完全控制在父表和子表，知道當他們擴大或合同，移動，得到重繪或以其他任何方式的變化，並能方便地訪問其中的任何調整其佈局。 在試圖擴展到任意數量的水平，我發現所有這些變化，溝通上下嵌套組件的層次結構，而不是他們一定的DataTable，硬，與變化，可能影響其他分支嵌套組件深的一個分支。

複雜性在於沒有那麼多在傳達這些變化上下，作為對他們在試圖提供標準接口，通用的子元素參與。 如果你有幾個容器和其內容的全面控制，它應該是可控的，但是，它只會使感這樣做，如果在某些特定應用RowExpansionDataTable失敗，我承認這一點，並不能輕易固定。

結論

你並不總是需要真正的DataTable有相互嵌套的表，但如果你這樣做，我的RowExpansionDataTable是一個不錯的選擇，除了就如何擴大的DataTable是一個很好的例子，。 它有一些問題，我這樣描述，如果你碰到他們，你知道去哪裡找你在他們身邊工作。 的DataTable本身是驚人的強大，很好地處理自己。 重疊DataTable中的內容也是一個可能的解決方案，如果信號在孩子們的大小和位置的變化，可以有效地解決，雖然這是很難做到的，在一個通用的組件 - 我沒有嘗試這樣做在這裡。 也不是我嘗試從ScrollingDataTable繼承版本，它是不是我忘了，但相反，我知道這是不是一個平凡的事業。

找到的談話： bloglines technorati

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