jquery下jstree簡單應用 - v1.0

第一篇文章，具體使用也過去很長時間了，直接貼碼：
1.代碼中使用json資料格式（直接在頁面中組裝成的，並非後台組裝，具體方法：function _callBack(d)） 2.提供右鍵菜單及功能實現
3.具有checkbox，提供擷取選中節點ID方法：function getMenuIds()
複製代碼 代碼如下:
<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>