JS樹加載時間問題

裝載樹時，我已經實現了樹的js樹，在這裏我得到很多的時間（約1分鐘）..JS樹加載時間問題

我想找到減少時間的方式在我的實施中我已經超過5000 nodes。

在我看來

$("#tree").jstree({ 

     checkbox: { 
      real_checkboxes: true, 
      real_checkboxes_names: function (n) { return [("check_" + (n[0].id || Math.ceil(Math.random() * 10000))), n[0].id] } 
     }, "plugins": ["themes", "html_data", "checkbox", "sort", "ui"] 
    }).bind('check_node.jstree', function (event, data) { 
     $('#SearchView').show(); 

    }).delegate("a", "click", 
     function (event, data) { 
      event.preventDefault(); 
     });

html負載js tree

  <tbody> 
       <div id="tree"> 
        <ul> 
         @HtmlHelpers.RenderjsTree(Model.CurrentNode) 
        </ul> 
       </div> 

      </tbody>

RenderjsTree將遞歸調用並加載樹節點..任何方式，以減少時間？

來源

2013-07-15 LaknathR

如果您使用'jstree' ....您是否嘗試過'progressive_render'選項？ – Bjoern

在我的RenderjsTree方法中，只有節點名將被推送到tree..i treid progressive_render。沒有更多的運氣 – LaknathR

有幾種方法可以解決這個緩慢加載問題。

一種方法是在jstree的json_data插件中使用ajax方法。 Mike Tyka給出了一個非常簡潔的描述 - http://www.miketyka.com/2012/10/lazy-loading-with-jstree-and-ajax/

另一種方法是通過一個簡單的javascript方法 - 如果您打算使用仍處於beta版本的jstree的v3版本。在我的項目中，我有大約2200個節點，並且json數據在不到一秒的時間內通過單個ajax調用從服務器端發出。但json解析需要大約8-10秒，直到頁面停止響應。 Jstree v3有一種在節點打開時從函數中獲取節點數據的方法。我使用了這種方法，頁面現在只需要不到2秒就可以加載。

function initiate_jstree() { 
$("#tree_container").jstree({ 
    "core": { 
     "data": getTree, 
     "themes":{ 
      "icons":false 
     }, 
    }, 
    "plugins": [ "themes", "ui" ,"types"] 

}); 

} 
function makeTreeData(node){ 
if(node.original && node.original.actualData){ 
    data=node.original.actualData; 
}else{ 
    data=gData; 
} 
treeData=[]; 
for(i=0;i<data.length;i++){ 
    iter=data[i]; 
    item={"text": iter.data}; 
    if(iter.children){ 
     item["children"]=true; 
     item["actualData"]=iter.children;    
    } 
    treeData.push(item); 
} 
return treeData; 
} 
var getTree = function (obj, cb) { 
console.log("called"); 
data=makeTreeData(obj); 
cb.call(this, 
    data); 
} 

initiate_jstree();

這裏的gdata變量是一個全局變量，其中要加載的數據以json格式存儲。以下是jsfiddle上的代碼 - http://jsfiddle.net/Lge8C/

來源

2014-01-22 15:24:02

JS樹加載時間問題

回答

相關問題