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 相关文章推荐
新浪的图片新闻效果
Jan 13 Javascript
javascript this用法小结
Dec 19 Javascript
预加载css或javascript的js代码
Apr 23 Javascript
easyui window refresh 刷新两次的解决方法(推荐)
May 18 Javascript
jQuery判断是否存在滚动条的简单方法
Sep 17 Javascript
图文介绍Vue父组件向子组件传值
Feb 17 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
在vue和element-ui的table中实现分页复选功能
Dec 04 Javascript
js键盘事件实现人物的行走
Jan 17 Javascript
微信小程序自定义扫码功能界面的实现代码
Jul 02 Javascript
vue使用axios实现excel文件下载的功能
Jul 16 Javascript
吃通javascript正则表达式
Apr 21 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 ci 获取表单中多个同名input元素值的代码
2016/03/25 PHP
php实现的读取CSV文件函数示例
2017/02/07 PHP
PHP使用PDO抽象层获取查询结果的方法示例
2018/05/10 PHP
Javascript中定义方法的另类写法(批量定义js对象的方法)
2011/02/25 Javascript
判断复选框是否被选中的两种方法
2014/06/04 Javascript
Javascript学习笔记之函数篇(四):arguments 对象
2014/11/23 Javascript
js实现ifram取父窗口URL地址的方法
2015/02/09 Javascript
javascript HTML+CSS实现经典橙色导航菜单
2016/02/16 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
2016/11/18 Javascript
canvas雪花效果核心代码分享
2017/02/19 Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
2018/11/13 Javascript
如何用JavaScript实现功能齐全的单链表详解
2019/02/11 Javascript
vue router带参数页面刷新或回退参数消失的解决方法
2019/02/27 Javascript
Vue项目路由刷新的实现代码
2019/04/17 Javascript
js常见遍历操作小结
2019/06/06 Javascript
vue基于better-scroll实现左右联动滑动页面
2020/06/30 Javascript
javascript canvas时钟模拟器
2020/07/13 Javascript
[07:48]DOTA2上海特级锦标赛主赛事首日RECAP
2016/03/04 DOTA
python将xml xsl文件生成html文件存储示例讲解
2013/12/03 Python
简单谈谈Python中的闭包
2016/11/30 Python
Python深入06——python的内存管理详解
2016/12/07 Python
小白如何入门Python? 制作一个网站为例
2018/03/06 Python
Python实现的读取电脑硬件信息功能示例
2018/05/30 Python
pandas重新生成索引的方法
2018/11/06 Python
Python_查看sqlite3表结构,查询语句的示例代码
2019/07/17 Python
使用python实现kNN分类算法
2019/10/16 Python
Appium+Python实现简单的自动化登录测试的实现
2021/01/26 Python
详解移动端Html5页面中1px边框的几种解决方法
2018/07/24 HTML / CSS
利物浦足球俱乐部官方网上商店:Liverpool FC Official Store
2018/01/13 全球购物
eDreams葡萄牙:全球最大的在线旅行社之一
2019/04/15 全球购物
全球烹饪课程的领先预订平台:Cookly
2020/01/28 全球购物
EJB的基本架构
2016/09/22 面试题
金融系毕业生自荐书
2014/07/08 职场文书
2014年综合治理工作总结
2014/11/20 职场文书
国庆节主题班会
2015/08/15 职场文书
法制教育讲座心得体会
2016/01/14 职场文书