使用YUI TreeView和數據表連同

十月12，2009在下午05:33由卡洛斯布埃諾|在開發 | 4評論

當你想提出一個複雜的層次結構，並列出屬性， 樹視圖和數據表控制在YUI 2很好地協同工作。

對於這篇文章我們將瀏覽器的Web服務器日誌。 樹視圖顯示文件和文件夾的​​路徑，以及數據表將顯示個別行日誌。 點擊一個文件或文件夾中的樹會造成數據表過濾掉所有，但該路徑。 （ 點擊這裡工作演示 。）

截圖 TreeView和DataTable的例子

為了簡潔起見，我將使用靜態數據。 在實踐中你會使用動態數據的技術細節在這裡和在這裡做過濾在服務器上。 例如靜態後，我們將討論更詳細的動態數據 。

位要注意的是聯動之間的TreeView的labelClicked事件和數據源的sendRequest()方法。 （你可以找到所有的依賴關係在這個例子中的YUI 2配置 。） 

 <！ - 組合 - 處理 YUI的CSS文件： - >
 <鏈接 REL =“樣式”類型 =“文/ CSS”
 <！ - 組合 - 處理 YUI JS文件： - >
 <腳本類型 =“文/ JavaScript的” 

 <！ - 創建容器的DIV的TreeView和數據表 - >
 <body class="yui-skin-sam">
   <TABLE>
   <TR>
     <td valign="top">
     <div id="myTree" style="width:160px"> </ DIV>
     </ TD>
     <td valign="top">
     <div id="myContainer"> </ DIV>
     </ TD>
   </ TR>
 </ TABLE>
 </ BODY>

 <SCRIPT>
 YAHOO.util.Event.addListener（窗口，“負載”，
函數（）{

   DataTable的****/ /****

   / /定義列的DataTable
   VAR myColumnDefs = [
     {鍵：“IP”，標籤：“IP地址”}，
     {鍵：“路徑”，標籤：“路徑”}，
     {鍵：“身份”，標籤：“狀態”}，
     {鍵：“毫秒”，標籤：“時間”}，
     {鍵：“字節”，標籤：“大小”}，
     {鍵：“TS”，標籤：“時間戳”}
   ;

   / /虛擬數據表。
   VAR MYDATA = [
     {TS：“2009年10月10號 14時 33分26秒”，IP：'1 .2.3.4'，路徑：“/ favicon.ico”，狀態：200毫秒：123字節：616}，
     {TS：“2009年10月10號 14時 33分26秒”，IP：'1 .2.3.4'，路徑：“/圖像 / logo.gif”，狀態：200毫秒：213字節：7891}，
     {TS：“2009年10月10號 14時 33分26秒”，IP：'1 .2.3.4'，路徑：“/圖像 / welcome.gif”，狀態：200毫秒：872字節：19357}，
     {TS：“2009年10月10號 14時 33分26秒”，IP：'1 .2.3.4'，路徑：“/ index.html的”，狀態：200毫秒：901字節：13453}，
     {TS：“2009年10月10號 14點 33分27秒”，IP：'4 .5.6.7'，路徑：“/ favicon.ico”，狀態：304毫秒：110字節：616}，
     {TS：“2009年10月10號 14點 33分27秒”，IP：'4 .5.6.7'，路徑：“/圖像 / logo.gif”，狀態：304毫秒：432字節：7891}，
     {TS：“2009年10月10號 14點 33分27秒”，IP：'4 .5.6.7'，路徑：“/圖像 / welcome.gif”，狀態：304毫秒：528字節：19357}，
     {TS：“2009年10月10號 14點 33分27秒”，IP：'4 .5.6.7'，路徑：“/ index.html的”，狀態：304毫秒：562字節：13453}，
     {TS：“2009年10月10號 14點 33分28秒”，IP：'3 .4.5.6'，路徑：“/ favicon.ico”，狀態：200毫秒：313字節：616}，
     {TS：“2009年10月10號 14點 33分28秒”，IP：'3 .4.5.6'，路徑：“/圖像 / logo.gif”，狀態：200毫秒：215字節：7891}，
     {TS：“2009年10月10號 14點 33分28秒”，IP：'3 .4.5.6'，路徑：“/圖像 / welcome.gif”，狀態：200毫秒：324字節：19357}，
     {TS：“2009年10月10號 14點 33分28秒”，IP：'3 .4.5.6'，路徑：“/ index.html的”，狀態：200毫秒：818字節：13453}，
     {TS：“2009年10月10號十四時 33分29秒”，IP：'7 .8.9.5'，路徑：“/ favicon.ico”，狀態：200毫秒：786字節：616}，
     {TS：“2009年10月10號十四時 33分29秒”，IP：'7 .8.9.5'，路徑：“/圖像 / logo.gif”，狀態：200毫秒：604字節：7891}，
     {TS：“2009年10月10號十四時 33分29秒”，IP：'7 .8.9.5'，路徑：“/圖像 / welcome.gif”，狀態：200毫秒：803字節：19357}，
     {TS：“2009年10月10號十四時 33分29秒”，IP：'7 .8.9.5'，路徑：“/ index.html的”，狀態：200毫秒：934字節：13453}
   ;

   / /創建一個靜態的“JSARRAY”數據源使用適當的領域。
   VAR myDataSource =新YAHOO.util.DataSource（MYDATA）;
   myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
   myDataSource.responseSchema = {
    字段：[“IP”，“路徑”，“地位”，“毫秒”，“字節”，“TS”]
   };

   / /創建一個過濾函數將被調用任何時候 sendRequest（）被調用。
   / /僅返回結果的路徑匹配給定的前綴。
   myDataSource.doBeforeCallback =功能（路徑，原材料，RES）{
     VAR數據 = res.results | | [];
     VAR過濾 = [];
    如果（路徑）{
      為（VAR = 0;我<data.length，我+ +）{
        如果（數據 [I]。path.indexOf（路徑）=== 0）{
           filtered.push（數據 [I]）;
         }
       }
       res.results =過濾;
     }
    返回水庫;
   };

   / /創建 DataTable實例給出的HTML元素，列DEFS和數據源。
   VAR myDataTable =新YAHOO.widget.DataTable（“myContainer”，myColumnDefs，myDataSource）;

   TreeView的****/ /****

   / /假樹的數據，描述一個文件夾和一些文件。
   VAR myTreeData = [
     {名稱：“圖像”，兒童：[
        {名稱：“logo.gif”}，
        {名稱：“welcome.gif'}
      ]}，
     {名稱：“的index.html'}，
     {名稱：“favicon.ico'}
   ;

   VAR myTree的=新YAHOO.widget.TreeView（“myTree的”）;

   / /遞歸在樹的數據來構建節點。
   / /展開的第二個層次的文件及文件夾，但保留其餘隱藏。
  功能buildNodes（parentNode，treeData，parentPath，擴）{
    為（VAR = 0;我<treeData.length，我+ +）{
       VAR nodeData = treeData [I];
       VAR節點 =新YAHOO.widget.TextNode（nodeData.name，parentNode，擴）;

       / /建立的完整路徑的節點以供將來參考。
       node.path = parentPath +'/'+ node.label;

       / /遞歸下降，如果此節點有子。
      如果（nodeData.children）{
         buildNodes（節點，nodeData.children，node.path，FALSE）;
       }
     }
   }
   buildNodes（myTree.getRoot（），myTreeData，''，TRUE）;

   / /當樹節點被點擊，篩選 DataTable的記錄
   / /通過戳在數據源的sendRequest（）方法。
   myTree.subscribe（“labelClick”功能（節點）{
     myDataSource.sendRequest（node.path，{
      成功：myDataTable.onDataReturnInitializeTable，
      失敗：myDataTable.onDataReturnInitializeTable，
      範圍：myDataTable，
      參數：myDataTable.getState（）
     }）;

   }）;

   myTree.draw（）;

 }）;

 </ SCRIPT>

使用TreeView和數據表的動態數據

要使用動態的數據，服務器端分頁和排序與一個DataTable， 看看這個例子 。 要使用動態數據在一個TreeView， 參考此例 。 在loadNodeData功能，您可以添加調用myDataSource.sendRequest()像這樣： 

   / /構造一個服務器端調用，將返回記錄匹配給定的路徑
   VAR nodePath = encodeURIComponent（node.path）;
   VAR requestString ='路徑 ='+ nodePath +'＆排序= TS＆DIR = ASC = 0＆＆startIndex的結果 = 25';

   / /捅的數據源使用sendRequest（）
   VAR oCallback = {
    成功：myDataTable.onDataReturnSetRows，
    失敗：myDataTable.onDataReturnSetRows，
    範圍：myDataTable，
    參數：myDataTable.getState（）
   };
   myDataSource.sendRequest（requestString，oCallback）;

查找談話： bloglines | technorati

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

4評論

  1. 這是我們依靠相當多的在我們的產品，我相信這只是最真棒顯示 YUI的迷死人。 我們都添加上下文菜單樹和表額外的樂趣功能。 我們的客戶提供系統，有百萬計的記錄，以搜索/瀏覽 /管理，和YUI幫助我們使它可用。 真棒。

    評論由布賴恩赫魯伯-十月12，2009 ＃

  2. 那麼，讓我們說我使用asp.net MVC和我推到JSON數據的看法。

    什麼是最好的方式然後到：
    VAR myDataSource =新YAHOO.util.DataSource（MYDATA）;

    我不認為把服務器端標籤可以在javascript吧？

    IE瀏覽器。

    VAR myDataSource =新YAHOO.util.DataSource（）;

    讓我們假設這裡 Model.ToJson提供正是你的'MYDATA“一樣。

    如果我能獲得通過理解“融合”這一數據從服務器到JavaScript，將大有幫助了解如何使用這些“控制”。

    （給我發電子郵件，如果你想）

    大後 - 謝謝！

    評論由史蒂夫 - 2009年10月26日＃

  3. 它離開了我的服務器標記在該職位：）

    我試圖通過 ViewData.Model顯示使用服務器端標籤的DataSource通話

    評論由史蒂夫 - 2009年10月26日＃

  4. 有沒有辦法防止過濾從產生另一個請求？ 我只是想抓住一堆數據從另一頁在初始請求建表和樹，然後點擊樹有改變的表。

    評論由喬- 2010年3月17日＃

對不起，評論已關閉在這個時候。

主辦單位雅虎

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

本站由WordPress的關於雅虎 虛擬主機 。