Jquery jsTree-渲染优化|具有2000个节点的超长渲染
我使用jsTree(1.0-rc3)和选项来通过AJAX加载数据,但我在通过它加载大约2000个child节点时遇到了一个问题。虽然服务器在几秒钟内做出响应,但jsTree只需约40秒即可在浏览器(chrome,FF)中呈现结果。除此之外,FF从“jquery-1.7.2.min.js”返回关于没有响应的信息。相同数量的数据冻结,即,是否数据过载?还是某种虫子?是否有任何可变因素可以帮助我更快地渲染Jquery jsTree-渲染优化|具有2000个节点的超长渲染,jquery,ajax,browser,rendering,jstree,Jquery,Ajax,Browser,Rendering,Jstree,我使用jsTree(1.0-rc3)和选项来通过AJAX加载数据,但我在通过它加载大约2000个child节点时遇到了一个问题。虽然服务器在几秒钟内做出响应,但jsTree只需约40秒即可在浏览器(chrome,FF)中呈现结果。除此之外,FF从“jquery-1.7.2.min.js”返回关于没有响应的信息。相同数量的数据冻结,即,是否数据过载?还是某种虫子?是否有任何可变因素可以帮助我更快地渲染 jQuery( "#dependency-tree" ).jstree( {
jQuery( "#dependency-tree" ).jstree(
{
'plugins':['themes', 'json_data', 'ui', 'core', 'types', 'sort'],
"json_data":{
"progressive_render": true,
"data":initData,
cache:false,
"ajax":{
"url":function ( node )
{
return appContext + 'GetUnitsNode/'
+ node.attr( 'id' );
},
dataType:"text",
"success":function ( data )
{
if ( data == "none" )
{
return false;
}
return jQuery.parseJSON( data );
}
}
},
"ui":{
'select_limit':1
},
"core":{
'animation':0,
'html_titles':true
},
"themes":{
"theme":"rules",
"dots":true,
"icons":true
},
"types":{
"types":{
"default":{
"icon":{
"image":appContext + "/img/orange.png"
}
}
}
},
"sort":function ( a, b )
{
return this.get_text( a ).toUpperCase() > this.get_text( b ).toUpperCase() ? 1 : -1;
}
} ).bind( "select_node.jstree", function ( event, data )
{
submitedNodeId = data.rslt.obj.attr( 'id' );
submitedNodeTypeId = data.rslt.obj.attr( "typeId" );
submitedNodeLast = data.inst.is_leaf( data.rslt.obj );
g_node_text = jQuery( data.rslt.obj ).children().eq(1).html();
} );
你试过了吗
- 渐进式渲染 布尔值。默认值为false。 如果此选项设置为true,则仅返回的JSON的可见(打开的节点)部分转换为DOM节点,所有隐藏部分都会保存起来并按需解析(当节点变为可见时)。当您有一个大型嵌套树,这将导致一个沉重的DOM时,这非常有用
- AJAX加载