jquery下jstree简单应用 - v1.0


Posted in Javascript onApril 14, 2011

第一篇文章,具体使用也过去很长时间了,直接贴码:
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>
Javascript 相关文章推荐
IE和Firefox在JavaScript应用中的兼容性探讨
Apr 01 Javascript
js导航栏单击事件背景变换示例代码
Jan 13 Javascript
JS实现的用来对比两个用指定分隔符分割的字符串是否相同
Sep 19 Javascript
javascript比较两个日期的先后示例代码
Dec 31 Javascript
javascript轻量级库createjs使用Easel实现拖拽效果
Feb 19 Javascript
javascript html5移动端轻松实现文件上传
Mar 27 Javascript
JavaScript仿flash遮罩动画效果
Jun 15 Javascript
详解js中的apply与call的用法
Jul 30 Javascript
vue调用高德地图实例代码
Apr 28 Javascript
深入理解Promise.all
Aug 08 Javascript
JS绘图Flot如何实现动态可刷新曲线图
Oct 16 Javascript
JavaScript实现无限轮播效果
Nov 19 Javascript
JQuery之拖拽插件实现代码
Apr 14 #Javascript
jQuery创建插件的代码分析
Apr 14 #Javascript
Jquery公告滚动+AJAX后台得到数据
Apr 14 #Javascript
jquery中eq和get的区别与使用方法
Apr 14 #Javascript
基于jquery的blockui插件显示弹出层
Apr 14 #Javascript
强大的jquery插件jqeuryUI做网页对话框效果!简单
Apr 14 #Javascript
让textarea自动调整大小的js代码
Apr 12 #Javascript
You might like
php魔术变量用法实例详解
2014/11/13 PHP
PHP7移除的扩展和SAPI
2021/03/09 PHP
jquery 查找iframe父级页面元素的实现代码
2011/08/28 Javascript
JQuery中根据属性或属性值获得元素(6种情况获取方法)
2013/01/17 Javascript
计算新浪Weibo消息长度(还可以输入119字)
2013/07/02 Javascript
利用js实现禁止复制文本信息
2015/06/03 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
2015/08/25 Javascript
JavaScript核心语法总结(推荐)
2016/06/02 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
2016/07/15 Javascript
Javascript中常用类型的格式化方法小结
2016/12/26 Javascript
javascript笔记之匿名函数和闭包
2017/02/06 Javascript
浅谈js for循环输出i为同一值的问题
2017/03/01 Javascript
JS实现简易刻度时钟示例代码
2017/03/11 Javascript
angular实现图片懒加载实例代码
2017/06/08 Javascript
requireJS模块化实现返回顶部功能的方法详解
2017/10/16 Javascript
详解Webpack + ES6 最新环境搭建与配置
2018/06/04 Javascript
js取0-9随机取4个数不重复的数字代码实例
2019/03/27 Javascript
JS实现checkbox互斥(单选)功能示例
2019/05/04 Javascript
WebSocket的简单介绍及应用
2019/05/23 Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
2020/04/29 Javascript
Vue实现背景更换颜色操作
2020/07/17 Javascript
[34:39]Secret vs VG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
跟老齐学Python之永远强大的函数
2014/09/14 Python
Python中的两个内置模块介绍
2015/04/05 Python
python编程实现希尔排序
2017/04/13 Python
Python语言的变量认识及操作方法
2018/02/11 Python
Python FFT合成波形的实例
2019/12/04 Python
python读取Kafka实例
2019/12/23 Python
Windows下python3安装tkinter的问题及解决方法
2020/01/06 Python
使用 prometheus python 库编写自定义指标的方法(完整代码)
2020/06/29 Python
美国波西米亚风格服装品牌:Show Me Your Mumu
2018/01/05 全球购物
Electric官网:美国高级眼镜和配件品牌
2020/06/04 全球购物
十佳护士获奖感言
2014/02/18 职场文书
经营管理策划方案
2014/05/22 职场文书
2015民办小学年度工作总结
2015/05/26 职场文书
2016母亲节感恩话语
2015/12/09 职场文书