最新资讯当前位置:鸿宇娱乐 > 最新资讯 > >

jquery下jstree简单应用 - v1.0

  

[jstree]jquery下jstree简单应用 - v1.0

  第一篇文章,具体使用也过去很长时间了,直接贴码:  
1.代码中使用json数据格式(直接在页面中组装成的,并非后台组装,具体方法:function _callBack(d)) 2.提供右键菜单及功能实现  
3.具有checkbox,提供获取选中节点ID方法:function getMenuIds()  
代码如下:
  
  
  
  
  
  
  
  
鸿宇娱乐平台 height="100%" cellspacing="0" CELLPADDING="0"  
border="5px">  
  
  
  
  
  
  

  
  
退出  

  
  
  
  
style='width: 98%; height: 698px; padding-top: 10px; padding-left: 10px;padding-right: -10px;'>
  
  
  
$("#title").html("js(jstree)和play!framework的学习及应用");  
$("#content").html("js(jstree)和play!framework的学习及应用");  
  
  
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();  
}  
}  
});  
});  
});  
});  
  

(责任编辑:admin)

上一篇:javascript图片预加载实例分析

下一篇:鸿宇娱乐平台:javascript 匿名函数的理解(透彻版

推荐内容

客户服务热线

010-400-12345

在线客服