Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jsTree - rendering optimization | very long rendering with 2000 nodes

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();
        } );
like image 666
moss Avatar asked Nov 22 '12 09:11

moss


1 Answers

Have you tried?

  • progressive_render

    progressive_render A 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 loading

like image 108
Radek Avatar answered Oct 29 '22 12:10

Radek