jquery 에서 jstree 간단 한 응용-v 1.0

 
<script type="text/javascript" src="@{'/public/javascripts/jquery-1.4.2.min.js'}"></script> 
<script type="text/javascript" src="@{'/public/javascripts/jsTree/jquery.jstree.js'}"></script> 
<script type="text/javascript" src="@{'/public/javascripts/jsTree/_lib/jquery.hotkeys.js'}"></script> 
<script type="text/javascript" src="@{'/public/javascripts/jsTree/_lib/jquery.cookie.js'}"></script> 
<link type="text/css" rel="stylesheet" href="@{'/public/javascripts/jsTree/_docs/!style.css'}"/> 
<script type="text/javascript"> 
</script> 
<table width="100%" height="100%" cellspacing="0" CELLPADDING="0" 
border="5px"> 
<caption align="top"> 
<div id='title' align="center"></div> 
<br /> 
<input type="button" style='left' id='tmp' value='test' onclick="getMenuIds()"></input> 
<a href='@{UserApplication.logout()}' style="display: block; float: right;">   </a> 
<font color="green"><div id="userinfo" style="display: block; float: right;"></div></font><br/> 
<tr> 
<td style="width: 20%; height: 700px"> 
<div id='tree' style="height: 100%" class='body'></div> 
</td> 
<td> 
<div id='content' class="code_f" 
style='width: 98%; height: 698px; padding-top: 10px; padding-left: 10px;padding-right: -10px;'></div> 
</td> 
</tr> 
</table> 
<script type="text/javascript"> 
$("#title").html("js(jstree) play!framework      "); 
$("#content").html("js(jstree) play!framework      "); 
</script> 
<script type="text/javascript"> 
function getMenuIds(){ 
var idArray = new Array(); 
$("#tree").find(".jstree-checked, .jstree-undetermined ").each(function(){ 
var isChild = true; 
if($(this).find('li').length != 0){ 
idArray.push($(this).attr("id")); 
isChild = false; 
} 
if(isChild){idArray.push($(this).attr("id"));} 
}); 
//var ids=idArray.join(','); 
alert(idArray); 
//alert(ids); 
} 
function nodeEvent(desc,id){ 
$("#content").load("@{Application.codepiece()}",{"desc":desc,"id":id}); 
} 
function _callBack(d){ 
var re = [], expIds = [], attr = {}; 
jQuery.each(d, function(i){ 
var state = 'closed'; 
var data = ''; 
var onclick = ''; 
var href = ''; 
var image = ''; 
if (!d[i].leaf == '0') { 
state = null; 
var desc = d[i].decription; 
var id = d[i].id; 
image = "@{'/public/images/file.png'}" 
onclick = "nodeEvent(\"" + desc + "\"," +id + ")"; 
href = "javascript:nodeEvent(\"" + desc + "\"," + id + ");"; 
}else{ 
onclick = ""; 
//image = "@{'/public/images/folder.png'}" 
} 
re.push({ 
"attr": { 
"id": d[i].id 
}, 
"data": { 
"title": d[i].name, 
"attr": {"onClick" : onclick} 
}, 
"state": state, 
"icon": image 
}); 
}); 
return re; 
} 
$(function () { 
var ctmitems = {}; 
var isadmin = 0; 
var plugins = []; 
#{if user} 
ctmitems = {"ccp": null}; 
plugins = [ "themes", "json_data", "ui","hotkeys", "crrm", 'dnd', "search", "types", "cookies", "contextmenu", "checkbox"]; 
isadmin = 1; 
$('#userinfo').html('   :'+ '${session.get("user")}'); 
#{/if} 
#{else} 
$('#userinfo').html('    :'+ '${session.get("user")}'); 
ctmitems = {"new": null,"ccp": null,"rename": null, "remove": null} 
plugins = [ "themes", "json_data", "ui","hotkeys", "crrm", "search", "types", "cookies", "contextmenu" ]; 
#{/else} 
var tree = $("#tree").jstree({ 
themes: { 
"theme": "apple", 
"dots" : false, 
"icons" : true 
}, 
"json_data": { 
"ajax": { 
"url": '@{Application.getData()}', 
"async": true, 
"data": function(n){ 
return { 
"id" : n.attr ? n.attr("id") : null 
}; 
}, 
"success": function(d){ 
return _callBack(d); 
} 
}, 
"progressive_render" : true 
}, 
"ui":{ 
"initially_select":["1"] 
}, 
"core" : { 
"initially_open" : ["1", "7"] 
}, 
"contextmenu": { 
"select_node":false, 
"show_at_node":true, 
"items": ctmitems 
}, 
"dnd" : { 
"drop_target" : false, 
"drag_target" : false 
}, 
"plugins" : plugins 
}) 
.bind("create.jstree", function (e, data) { 
if(data.rslt.parent.attr("id")); 
$.post( 
"@{Application.addNode()}", 
{ 
"operation" : "create_node", 
"parentID" : data.rslt.parent.attr("id"), 
"name" : data.rslt.name, 
"isleaf" : 0 
}, 
function (r) { 
if(r.status) { 
data.inst.refresh(); 
} 
else { 
$.jstree.rollback(data.rlbk); 
alert("           ！"); 
} 
} 
); 
}) 
.bind("createleaf.jstree", function (e, data) { 
if(data.rslt.parent.attr("id")); 
$.post( 
"@{Application.addNode()}", 
{ 
"operation" : "create_node", 
"parentID" : data.rslt.parent.attr("id"), 
"name" : data.rslt.name, 
"isleaf" : 1 
}, 
function (r) { 
if(r.status) { 
data.inst.refresh(); 
} 
else { 
$.jstree.rollback(data.rlbk); 
alert("           ！"); 
} 
} 
); 
}) 
.bind("move_node.jstree", function (e, data) { 
data.rslt.o.each(function (i) { 
$.ajax({ 
async : false, 
type: 'POST', 
url: "@{Application.moveNode()}", 
data : { 
"operation" : "move_node", 
"id" : this.id, 
"parentID" : data.rslt.np.attr("id"), 
"isadmin" : isadmin 
}, 
success : function (r) { 
if(!r.status) { 
data.inst.refresh(); 
} 
else { 
} 
} 
}); 
}); 
}) 
.bind("rename.jstree", function (e, data) { 
if (data.rslt.new_name == data.rslt.old_name){ 
return ; 
} 
$.post( 
"@{Application.editNode()}", 
{ 
"operation" : "rename_node", 
"id" : data.rslt.obj.attr("id"), 
"name" : data.rslt.new_name 
}, 
function (r) { 
if(!r.status) { 
data.inst.refresh(); 
}else{ 
} 
} 
); 
}) 
.bind("remove.jstree", function (e, data) { 
data.rslt.obj.each(function () { 
$.ajax({ 
async : false, 
type: 'POST', 
url: "@{Application.removeNode()}", 
data : { 
"operation" : "remove_node", 
"id" : this.id 
}, 
success : function (r) { 
if(!r.status) { 
data.inst.refresh(); 
} 
} 
}); 
}); 
}); 
}); 
</script>