function createContextMenuItems(node){
var id=$(node).attr("id");
var type=$(node).attr("nType")
var items={};
var createItem = {
"createPageStyle" : {
"separator_before" : false,
"separator_after" : true,
"label" : "新建",
"action" : function (obj) {
this.create(obj,'last',{attr:{ntype:'leaf'},data:'名称'});
}
}
};
var renameItem={
"rename" : {
"separator_before" : false,
"separator_after" : false,
"label" : "修改名称",
"action" : function (obj) {
this.rename(obj);
}
}
};
var removeItem={
"remove" : {
"separator_before" : false,
"icon" : false,
"separator_after" : false,
"label" : "删除",
"action" : function (obj) {
if(!confirm("确定要删除吗")) {
return;
}
removeTreeNode(obj);
}
}
};
if(type=='root') {
items=createItem;
} else {
items=$.extend({},renameItem,removeItem);
}
return items;
};
function removeTreeNode(obj) {
var nodeData={};
var id=$(obj).attr("id");
var isRemove=false;
if(id){
nodeData.id=id;
isRemove=true;
}
if (!isRemove) {
return;
}
var ajaxData ={pattern:nodeData};
$.ajax({
contentType:"application/json",
dataType:"json",
type: "POST",
url: "<c:url value='' />",
async:false,
data: toJSON(ajaxData).json,
success:function(result,st) {
if(!result.isSuccessed) {
alert(result.msg);
return;
}
$("#professionTree").jstree("remove",obj);
},
error:function(xhr,st,err){
if(err !== undefined)
alert(err);
}
});
};
$("#professionTree").jstree("destroy");
$("#professionTree").jstree({
"plugins" : ["themes", "ui", "json_data", "crrm"<security:authorize ifAllGranted="">, "contextmenu"</security:authorize>],
"core":{initially_open:["-1"], animation:0},
"themes": {
"theme": "classic",
"dots": true,
"icons": true,
"url": "<c:url value='/jquery/jstree/themes/classic/style.css' />"
},
"json_data" : {
data: [{data : "根节点",state:"closed",attr:{id:-1,nType:"root"}}],
"ajax": {
"url" : "<c:url value='' />",
async:false,
"type" : "POST"
}
},
"contextmenu" : {
select_node: true,
show_at_node: true,
items: createContextMenuItems
}
}).bind("reopen.jstree",function(e,data){
var existLeaf = $("li[nType=leaf]").length;
if (existLeaf == 0) {
$("#professionTree").jstree("select_node",$("#-1"));
} else {
$("#professionTree").jstree("select_node",$("li[nType=leaf]:first",$("#-1")));
$("li[nType=leaf]:first a",$("#-1")).click();
}
}).bind("click.jstree",function(e){
var node = $(node).is("li")?$(node):$(e.target).parent("li");
var id = node.attr("id");
var nType = type=$(node).attr("nType");
if(nType=="leaf"){
getUnitGrid(id);
}
}).bind("create.jstree", function (e, data) {
var nodeData={name:data.rslt.name};
var ajaxData ={pattern:nodeData};
$("#professionTree").jstree("select_node",data.rslt.obj);
$("#-1 > a").removeClass("jstree-clicked");
$("a",$(data.rslt.obj).siblings()).removeClass("jstree-clicked");
if(data.rslt.name.length>20){
alert("名称不能大于20个字符!");
window.setTimeout(function(){$("#professionTree").jstree("rename",data.rslt.obj)},100);
return;
}
$.ajax({
contentType:"application/json",
dataType:"json",
type: "POST",
url: "<c:url value='' />",
async:false,
data: toJSON(ajaxData).json,
success:function(result,st) {
if(!result.isSuccessed) {
alert(result.msg);
window.setTimeout(function(){$("#professionTree").jstree("rename",data.rslt.obj)},100);
return;
}
var id = result.ids[0];
$(data.rslt.obj).attr("id", id);
},
error:function(xhr,st,err){
if(err !== undefined)
alert(err);
}
});
}).bind("rename.jstree", function (e, data) {
var nodeData={name:data.rslt.new_name};
var id=$(data.rslt.obj).attr("id");
var isUpdateName=false;
if(id){
nodeData.id=id;
isUpdateName=true;
}
ajaxData ={pattern:nodeData};
if(data.rslt.new_name.length>20){
alert("名称不能大于20个字符!");
window.setTimeout(function(){$("#professionTree").jstree("rename",data.rslt.obj)},100);
return;
}
$.ajax({
contentType:"application/json",
dataType:"json",
type: "POST",
url: "<c:url value='' />",
async:false,
data: toJSON(ajaxData).json,
success:function(result,st) {
if(!result.isSuccessed){
alert(result.msg);
window.setTimeout(function(){$("#professionTree").jstree("rename",data.rslt.obj)},100);
return;
}
if(!isUpdateName) {
var id = result.ids[0];
$(data.rslt.obj).attr("id", id);
}
},
error:function(xhr,st,err){
if(err !== undefined)
alert(err);
}
});
});
构造jstree数据的代码例子:
public List<Map> getTree() {
List ret = new ArrayList();
if (list == null || list.size() == 0) {
return ret;
}
for (Node node : list) {
Map data = new HashMap();
Map attr = new HashMap();
data.put("data", node.getName());
data.put("attr", attr);
attr.put("id", node.getId());
attr.put("name", node.getName());
attr.put("nType", "leaf");
ret.add(data);
}
return ret;
}
至于json数据的来回转换依靠JsonInterceptor实现。
附:jquery core operation的两种执行方式
/* METHOD ONE */
jQuery("some-selector-to-container-node-here").jstree("operation_name" [, argument_1, argument_2, ...]);
/* METHOD TWO */
jQuery.jstree._reference(needle).operation_name([ argument_1, argument_2, ...]); /* NEEDLE can be a DOM node or selector for the container or a node within the container */
NOTE: Functions prefixed with _
can not be called with method one.
Example (Method two):var currentNode = jQuery.jstree._reference("#professionTree")._get_node(null);
(Method one): $("#professionTree").jstree("rename_node", currentNode, patternName);