然后引用JSTREE
html
html = "<div style='overflow:auto;height:250px'><div id='myTree'></div></div>"
js
var addId = "";
var path= $('#path').val();
$.ajaxSetup({cache:false});
//这个是为了树的准确性做的一个缓存区清理的工作
最好加上,否则IE会出现问题
$("#myTree").tree({
data:{
async : false,
// 设为true后会自动请求原来的树。添加到此节点下
type : "json",
opts : {
method:"GET",
url: path+"/pub/cacheHierarchyList.do"
}
},
ui : {
theme_name : "classic",
context : []
},
lang : {
new_node
: "新栏目",
loading
: "加载中 ..."
},
rules:
{
draggable
: "all"
//这个设置可以使得节点进行拖动操作
},
plugins: {
contextmenu:{}
},
callback : {
onselect : function(NODE){
var id = $(NODE).attr("id");
var name = $(NODE).find("a:first").text().replace(/(^\s*)|(\s*$)/g, "");
$("#hierarchyId").val(id);
$("#hierarchyName").val(name);
$("#mask").css("display","none");
$("#tree").css("display","none");
},
beforerename: function(NODE,LANG,TREE_OBJ) {
var tmpId = $(NODE).attr("id");
// 当前ID()
var parentId = $(NODE).parent().parent().attr("id");
// 父节点ID
if(parentId=="myTree"){
alert("此栏目不允许重命名!");
return false;
}
return true ;
},
onrename : function(NODE,TREE_OBJ,RB){
var newName=$.trim($(NODE).find("a:first").text());
// 新名称
var tmpId = $(NODE).attr("id");
// 当前ID()
var myUrl = path+"/pub/ajaxTreeMethod.do";
if (tmpId == "") {
var params={
method:3,
hierarchyId:addId,
hierarchyName:$.trim(newName)
};
$.post(myUrl,params,function(data){
if(data==1){
alert("添加节点"+newName+"成功");
}else {
alert("添加失败");
}
});
return;
}
if(confirm("你确定要重命名吗?")){
var params={
method:3,
hierarchyId:tmpId,
hierarchyName:$.trim(newName)
};
$.post(myUrl,params,function(data){
if(data==1){
alert("修改名称"+newName+"成功");
}else {
alert("修改栏目名称失败");
}
return true;
});
}
},
beforedelete : function(NODE,TREE_OBJ){
if(confirm("你确定删除吗?")){
return true;
}
},
ondelete : function(NODE,TREE_OBJ){
var tmpId = $(NODE).attr("id");
// 当前ID()
var myUrl = path+"/pub/ajaxTreeMethod.do";
var params={
method:2,
hierarchyId:tmpId
};
$.post(myUrl,params,function(data){
if(data==1){
alert("删除成功");
}else {
alert("删除失败");
}
return true;
});
},
oncreate:function(NODE, REF_NODE, TYPE, TREE_OBJ, RB) {
var newName=$(NODE).find("a:first").text();
// 新名称
var tmpId = $(NODE).attr("id");
// 当前ID()
var parentId = $(NODE).parent().parent().attr("id");
// 父节点ID
var level=$(NODE).parent().parent().attr("level");
if(parseInt(level)==2){
alert("不能再新建子节点");
$.tree.focused().refresh(TREE_OBJ.parent(NODE));
return false;
}
if(parentId=="" || parentId==null){
parentId=0;
level=1;
}else{
level=parseInt(level)+1;
}
var myUrl = path+"/pub/ajaxTreeMethod.do";
var params={
method: 1,
hierarchyName:$.trim(newName),
parentId:parentId,
num:level
};
$.ajax({
type:"post",
dataType:"json",
data:params,
url:myUrl,
success:function(data){
addId = data;
}
});
}
}
});
$('#newMenu').live('click',function(){
if($(current_node).find("a:first").text()==""){
alert("你还未选中要处理的栏目");
return false;
}else{
$.tree.focused().create();
}
});
$('#renameMenu').live('click',function(){
if($(current_node).find("a:first").text()==""){
alert("你还未选中要处理的栏目");
return false;
}else{
$.tree.focused().rename();
}
});
$('#deleteMenu').live('click',function(){
if($(current_node).find("a:first").text()==""){
alert("你还未选中要处理的栏目");
return false;
}else{
$.tree.focused().remove();
}
});