jquery下jstree简单应用 - v1.0

所属分类: 网络编程 / JavaScript 阅读数: 297
收藏 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封装的一个js分页

基于jquery封装的一个js分页代码,需要的朋友可以参考下。
收藏 0 赞 0 分享

关于js datetime的那点事

关于js datetime的一些使用经验分享,想要了解datetime日期操作的朋友可以参考下。
收藏 0 赞 0 分享

js 关于=+与+=日期函数使用说明(赋值运算符)

js 关于=+与+=日期函数使用说明(赋值运算符),可以看下,就是一些运算符的使用,看哪个更适合你。
收藏 0 赞 0 分享

JS 操作符整理[推荐收藏]

JS 操作符主要包括算术运算符,赋值运算符,比较(关系)运算符,逻辑运算符,串符(连接作用),条件运算符等
收藏 0 赞 0 分享

让html的text输入框只能输入数字和1个小数点(0-59之间可改)

今天有同事需要这个功能,主要是限制用户输入不符合规范的数字与小数点导致不好计算价格问题,特整理了下面的代码,需要的朋友可以参考下。
收藏 0 赞 0 分享

Jquery 获取checkbox的checked问题

这个郁闷了,今天写这个功能的时候发现了问题,上网找了好多资料对照,更加纠结
收藏 0 赞 0 分享

jQuery EasyUI API 中文文档 - DataGrid数据表格

jQuery EasyUI API 中文文档 - DataGrid数据表格使用说明,需要的朋友可以参考下。
收藏 0 赞 0 分享

jQuery EasyUI API 中文文档 - PropertyGrid属性表格

jQuery EasyUI API 中文文档 - PropertyGrid属性表格使用介绍,需要的朋友可以参考下。
收藏 0 赞 0 分享

20款效果非常棒的 jQuery 插件小结分享

这篇文章向大家推荐20款效果非常棒的 jQuery 插件。jQuery 是一个非常优秀的JavaScript库,它简化了 HTML 文档遍历,事件处理,动画以及 Ajax 交互,同时也改变了很多人编写 JavaScript 代码的方式
收藏 0 赞 0 分享

基于Jquery插件开发之图片放大镜效果(仿淘宝)

公司某个网站,需要实现图片预览效果,并能像淘宝一样实现局部分大,使用jquery的朋友可以参考下。
收藏 0 赞 0 分享
查看更多