use this

tree

var ViewId;
var groupId;
var op;
var enterpriseId;
$(function(){
   enterpriseId = $("#enterpriseId").val();
   $("#bAddGroupView").click(function() {
   changeRightPanel('addEditDeleteGroupView.jsp?op=add&enterpriseId='+enterpriseId);
   return false;
   });
   refreshViewsTree();
   setTimeout(function(){$("#demoTree").jstree("close_all", -1);},50); 

});

function refreshViewsTree() {
$.ajax({
    url: './GroupViewServlet?op=getTreeView&t=' + new Date().getTime(),
   type: 'GET',
   data: {'enterpriseId':enterpriseId},
   dataType: 'json',
   success: function (d1) {
   drawViewsTree(d1);
},
error: handleError
});
}

function handleError(xhr, status, error){
$("#errMsg").html(unableToConnectToServer + lastAttemptedAt+ " : " + new Date().toLocaleTimeString());
}

function drawViewsTree(json_data) {
var types=[ [] , [] , [] ,[] ];

var model = json_data;

for (var k=0;k<model.length; k++){
 if(model[k].attr.rel == "Site_gv" ){
   types[2].push(model[k]);
 }else if(model[k].attr.rel == "Team_gv" ){
   types[3].push(model[k])
 }else if(model[k].attr.rel == "EP_gv" ){
   types[0].push(model[k]);
 }else if(model[k].attr.rel == "Queue_gv"){
   types[1].push(model[k]);
 }
};



//COMPARE METHOD USED IN SORTING ARRAY OF OBJECTS
var compare =function(a,b) {
  if (a.data.toLowerCase() < b.data.toLowerCase())
     return -1;
  if (a.data.toLowerCase() > b.data.toLowerCase())
    return 1;
  return 0;
};

var compareTypes =function(a,b) {
  if (a[0].data.toLowerCase() < b[0].data.toLowerCase())
     return -1;
  if (a[0].data.toLowerCase() > b[0].data.toLowerCase())
    return 1;
  return 0;
}

//ITERATE AND SORT ALL ARRAYS
for(var i=0;i<types.length;i++){
   types[i].sort(compare);
};

types.sort(compareTypes);

//Collapses the tree on load if expanded
$("#demoTree").jstree({ 
   "collapse": (function () { 
$("demoTree").jstree("close_all", -1);
}),
"types" : {
"valid_children" : [ "EP_gv", "Queue_gv", "Site_gv", "Team_gv" ],
"types" : {
"EP_gv" : {
"icon" : { 
"image" : "images/inbound_entry_point.gif" 
},
"valid_children" : [ "group" ],
"max_depth" : 1
},
"Queue_gv" : {
"icon" : { 
"image" : "images/inbound_queue.gif" 
},
"valid_children" : [ "group" ],
"max_depth" : 1
},
"Site_gv" : {
"icon" : { 
"image" : "images/site_open.gif" 
},
"valid_children" : [ "group" ],
"max_depth" : 1
},
"Team_gv" : {
"icon" : { 
"image" : "images/team_open.gif" 
},
"valid_children" : [ "group" ],
"max_depth" : 1
},
"group" : {
"icon" : { 
"image" : "images/agentprofiles.gif" 
},
"max_depth" : 0
},
"default" : {
"valid_children" : [ "default" ]
}
}
},

"json_data" : {
"data" : types
},

"ui" : {
select_limit: 1
},
"themes" : {
theme : "classic"
},
"cookies" : {
save_selected: false
},
core: { 
animation: 200
},
"plugins" : ["themes", "json_data", "ui", "types", "cookies"]
}).bind("select_node.jstree", function (e, data) {
var node = data.rslt.obj;
var type = node.attr('type');
var id = node.attr('id');
switch(type) {
case "view":
displayGroupViewDetails(id);
break;
case "group":
displayGroupDetails(id);
break;
}
});
}



function displayGroupViewDetails(viewId) {

// truncate the 'gv_' part
viewId = viewId.substring(3);
var url = 'addEditDeleteGroupView.jsp?op=view&viewId='+viewId+'&enterpriseId='+enterpriseId;
changeRightPanel(url);
}

function displayGroupDetails(groupId) {

// truncate the 'gr_' part
groupId = groupId.substring(3);
var url = 'addEditDeleteGroup.jsp?op=view&groupId='+groupId+'&enterpriseId='+enterpriseId;
changeRightPanel(url);
}

function changeRightPanel(url) {
$("#viewDetailFrame").attr('src', url);

refreshViewsTree();
}