Jstee performance issue

We need to add about 5000 nodes on expand click of jstree , 

but it seems it is taking too long time and also I receive  script unresponsive 
issue. 

Please advice what is the way to fix this

following is the entire sample code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>

<link rel="stylesheet" href="../public/css/base/jquery.ui.all.css" />
<script src="../public/js/jquery-1.8.2.js" type="text/javascript"></script>
<script src="../public/js/jquery.bgiframe-2.1.2.js" 
type="text/javascript"></script>
<script src="../public/ui/jquery.ui.core.js" type="text/javascript"></script>
<script src="../public/ui/jquery.ui.widget.js" type="text/javascript"></script>
<script src="../public/ui/jquery.ui.mouse.js" type="text/javascript"></script>
<script src="../public/ui/jquery.ui.draggable.js" 
type="text/javascript"></script>
<script src="../public/ui/jquery.ui.position.js" 
type="text/javascript"></script>
<script src="../public/ui/jquery.ui.resizable.js" 
type="text/javascript"></script>
<script src="../public/ui/jquery.ui.dialog.js" type="text/javascript"></script>
<script src="../public/ui/jquery.ui.button.js" type="text/javascript"></script>
<script src="../public/ui/jquery-ui-1.8.22.custom.js" 
type="text/javascript"></script>
<script src="../public/ui/jquery.ui.tabs.js" type="text/javascript"></script>
<script src="../public/js/jqgrid/jquery.jqGrid.min.js" 
type="text/javascript"></script>
<script src="../public/js/treeview/jquery.jstree.js" 
type="text/javascript"></script>
<link rel="stylesheet" type="text/css" 
href="../public/css/ui-lightness/demos.css" />
<link rel="stylesheet" type="text/css" href="../public/css/efc.css" />
<link rel="stylesheet" type="text/css" 
href="../public/css/jq_grid/ui.jqgrid.css" />

<script type="text/javascript">

$(function () {

        $('#mainJSTree').jstree({
            "json_data": {
                "data" : [ ]

            },

            "core": {
                "animation": 0
            },
            "themes": {
                "theme" : "apple",
                "dots" : true,
                "icons" : false

            },
            "dnd" : {
                "drop_target" : false,
                "drag_target" : false
            },

            "plugins": ["themes", "json_data", "ui", "crrm","dnd","checkbox"]
        })
        .bind("loaded.jstree", function (e, data) {

            $("#mainJSTree").jstree("create_node", $('#mainJSTree'),
                    "last", {
                        "attr" : {
                            "id" : "Byhierarchy" ,"menu":"no"
                        },
                        "data" : {
                            "title" :"By Hierarchy"
                        }
                    }, false, false);

            var hideId = "#Byhierarchy";
            $(hideId).find('a .jstree-checkbox').hide();

            var treeClassNameToChange = "#mainJSTree"+" #Byhierarchy";
            $(treeClassNameToChange).removeClass("jstree-leaf");
            $(treeClassNameToChange).addClass("jstree-closed");

        }).bind("open_node.jstree",function(event,data){

            }).bind("close_node.jstree",function(event,data){

            }).bind("after_open.jstree",function(event,data){
                var nodeId =data.rslt.obj.attr('id');   

                if(nodeId=="Byhierarchy"){

                 $(data.rslt.obj).find("li").each( function( idx, listItem ) {

                    var id =$(listItem).attr("id");

                    var node = $.jstree._reference('#mainJSTree')._get_node("#"+id);

                    $("#mainJSTree").jstree("delete_node",node);

                  });

                 var idToChange = "#mainJSTree"+" #"+nodeId;
                 $(idToChange).removeClass("jstree-closed");
                 $(idToChange).removeClass("jstree-leaf");
                 $(idToChange).addClass("jstree-open");

                for(var i=0;i<500;i++){

                $("#mainJSTree").jstree("create_node", "#"+nodeId,
                        "inside", {
                            "attr" : {
                                "id" : "Byyear"+i ,"menu":"no"
                            },
                            "data" : {
                                "title" :"By year"+i
                            }
                        }, false, false);

                }

                }//if   

            });

});

    </script>
    </head>
    <body>

    <div id="mainJSTree" >

</body>
</html>
Original issue reported on code.google.com by khandalk...@gmail.com on 18 Dec 2012 at 12:44
OdinaSpb / jstree

Jstee performance issue #1002
