jquery下jstree简单应用 - v1.0

所属分类: 网络编程 / JavaScript 阅读数: 310
收藏 0 赞 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>
更多精彩内容其他人还在看

jQuery LigerUI 使用教程表格篇(1)

ligerGrid是ligerui系列插件的核心控件,用户可以快速地创建一个美观,而且功能强大的表格,支持排序、分页、多表头、固定列等等
收藏 0 赞 0 分享

JavaScript中常用的运算符小结

JavaScript中常用的运算符小结,需要的朋友可以参考下。
收藏 0 赞 0 分享

深入理解JavaScript系列(13) This? Yes,this!

在这篇文章里,我们将讨论跟执行上下文直接相关的更多细节。讨论的主题就是this关键字。实践证明,这个主题很难,在不同执行上下文中this的确定经常会发生问题
收藏 0 赞 0 分享

javascript (用setTimeout而非setInterval)

javascript (用setTimeout而非setInterval)如果用setInterval 可能出现 下次调用会在前一次调用前调用
收藏 0 赞 0 分享

JavaScript中两个感叹号的作用说明

用两个感叹号的作用就在于,如果明确设置了o中flag的值(非null/undefined/0""/等值),自然test就会取跟o.flag一样的值;如果没有设置,test就会默认为false,而不是null或undefined
收藏 0 赞 0 分享

javascript写的简单的计算器,内容很多,方法实用,推荐

最近用javascript写了一个简单的计算器,自己测试感觉还好,代码都给了注释,非常不错,推荐大家学习。
收藏 0 赞 0 分享

js的表单操作 简单计算器

javascript写的简单的加减乘除计算器,里面涉及到一些方法还是很实用的哦,新手不要错过
收藏 0 赞 0 分享

Jquery中删除元素的实现代码

empty用来删除指定元素的子元素,remove用来删除元素,或者设定细化条件执行删除
收藏 0 赞 0 分享

javaScript 利用闭包模拟对象的私有属性

JavaScript缺少块级作用域,没有private修饰符,但它具有函数作用域。作用域的好处是内部函数可以访问它们的外部函数的参数和变量(除了this和argument
收藏 0 赞 0 分享

为JavaScript类型增加方法的实现代码(增加功能)

大家在js开发过程中有些功能已经满足不了我们的需求,或没有我们需要的功能,那么我们就可以自己扩展下,个性化js
收藏 0 赞 0 分享
查看更多