名站网址导航为大家提供关于网站网页设计设计相关的的教程知识。
- 本篇文章具体介绍如下
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>
好了关于网站网页设计设计相关的这篇文章就给大家介绍到这里不明白的地方给本站留言。声明，本站内容来源于互联网，如果侵犯了你的权益请联系本站删除。,jQuery实战之仿淘宝商城左侧导航效果-jquery
