2011-08-15 64 views
0

我有一個jQuery的TreeView這是我從http://jquery.bassistance.de/treeview/demo/慢jQuery的樹形裝載

當節點和子節點的數目較少我沒有問題,加載樹抓起,但隨着內容的增加負載正在很長時間幾乎到了使用樹視圖似乎是一個壞主意的地步。

這是我構建樹形視圖

<script type="text/javascript"> 

    $(function() { 
     $("#Ul1").treeview({ 

      collapsed: true, 
      prerendered: true 

     }); 


    }); 

</script> 

<ul id="Ul1" class="treeview-black"> 
<% 
    foreach (var t in (IEnumerable<itemSpecifications>)ViewData["items"]) 
{%> 

    <li class="expandable"><span><%=Html.RouteLink(t.itemName, null, new { controller = "RQA", action = "itemaction", policyname = t.itemName})%></span> 
    <%if (t.itemCount > 0) 
     {%> 

       <%for(int i=0;i<t.itemCount ;i++){%> 
                <ul> 
                   <li class="expandable"><span><%=Html.RouteLink(t.subitems[i].Name, null, new { controller = "controller1", action = "itemUpdate", rule = t.subitems[i] })%></span></li> 


                </ul> 
               <%}%> 


     <%}%> 

<% }%> 
</li> 

</ul> 

我的視圖的一部分,並且所述控制器包含以下代碼:

public ActionResult Index() 
    {  

      items1 = (from itemsInfo itemInfo in _itemInfoCollection 
         where itemInfo.Name == "val1" 
         select new itemSpecifications 
         { 
          itemName = itemInfo.Name, 
          itemCount = GetItemscount(),         subitems = GetSubItems()        }); 

       ViewData["items"] = items1 ; 
       return View(); 
    } 

有時整個的裝載頁面需要很長時間纔會導致頁面基本崩潰(無法加載),有時頁面還會丟失ds成功,我點擊節點旁邊的任何加號,需要很長時間打開子項。值得一提的是,平均子節點400個項目,任何意見將不勝感激,我使用MVC3,它是在IE

感謝

+0

什麼版本的IE? – Joshua

+0

我正在使用IE9謝謝 – Sue

+0

如果您碰巧知道頁面上有多少個節點(父母+孩子+孩子的孩子等),您有沒有機會? – Joshua

回答

0

這聽起來/看起來有問題的網頁加載初始負載時的整個結構。這是「預渲染」標誌所做的。由於列表太大(每個節點x個節點+ 400個項目),因此您正在查看重大的客戶端性能問題,尤其是在較老的IE瀏覽器中,這對於JS操作而言表現非常糟糕。

可能更好,如果你動態加載每個子菜單,而不是預渲染它。唯一的問題是隨着DOM的增長,它最終會變慢。

您能否提供您試圖渲染的對象深度的示例以及每個參數的數量?不需要REAL數據,只需要計數。即節點級別1具有5個參數,並且級別1上可以有多達500個節點;節點級別2有12個參數,並且級別2上可以有400個節點等。

+0

有27個原始節點/類(每個節點是類的名稱,還有類的其他成員本身也是其他類的列表),這27個節點平均有250到450個節點,有些節點當然少得多。而原有的27個節點只有一層子節點,因此沒有其他層深入。正確理解您的建議我有一個問題,雖然我讀了關於單擊時加載每個節點,但我沒有找到一個示例代碼,因此創建一個相關的ajax函數可以獲取節點名稱並返回該類節點 – Sue

+0

因此,可以是從500到10,000以上的任何地方。在這種情況下,500實際上是一個相當大的數字 - 聽起來像TreeView將一個或多個函數綁定到每個節點。好奇它在另一個瀏覽器中表現如何 - 例如Chrome? – Joshua

+0

對於AJAX,您必須在單獨的服務器調用中將節點公開爲JSON,然後能夠在單擊樹時將參數傳遞給它,以便抓取該節點並呈現它們。 – Joshua