jsTree-渲染优化|具有2000个节点的非常长的渲染

问题描述

我正在使用jsTree(1.0-rc3)，并具有通过AJAX加载数据的选项，并且在加载约2000个childs节点时遇到问题.尽管服务器在几秒钟内做出响应，但jsTree大约需要40秒才能在浏览器(chrome，FF)中呈现结果.除此之外，FF会返回有关'jquery-1.7.2.min.js'没有响应的信息.相同数量的数据会冻结IE.数据过载了吗?还是某种错误?是否有任何可变因素可以帮助我更快地进行渲染?

I'm using jsTree ( 1.0-rc3 ) with option to load data by AJAX and I have a problem with loading about ~2000 childs node by it. While server responds within several seconds, it takes jsTree about ~40 seconds only to render the results in the browser (chrome, FF). In addition to that, FF returns information about no response from 'jquery-1.7.2.min.js'.The same amount of data freezes IE. Is it overloaded with data ? Or is it some kind of bug ? Are there any changeable factors, that can help me with faster rendering ?

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();
        } );

推荐答案

您尝试过吗?

• progressive_render

progressive_render布尔值.默认为false.如果将此选项设置为true，则仅将返回的JSON的可见(开放节点)部分转换为DOM节点，所有隐藏部分将被保存并按需进行解析(当节点变为可见时).当您有一棵大的嵌套树会导致沉重的DOM时，这很有用

progressive_renderA Boolean. Default is false.If this option is set to true only the visible (open nodes) parts of the returned JSON are converted to DOM nodes, any hidden parts are saved away and parsed ondemand (when a node becomes visible). This is useful when you have a large nested tree which would result in a heavy DOM

AJAX加载

这篇关于jsTree-渲染优化|具有2000个节点的非常长的渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！