<div id="treediv">
<ul id='tt'></ul>
{"id":"0",
"text":"根节点",
"state":"open",
"children":[
{"id":6,
"text":"一层子节点1",
"state":"open",
"iconCls":"icon-location",
"children":[
{"id":58,
"text":"二层子节点",
"state":"open",
"iconCls":"icon-location",
"children":[]
}]
}],
"checked":true
}];
$(function(){
ininttree();
});
//初始化树
function ininttree(){
$('#tt').tree({
data :treedata ,
animate : true,
dnd : true,
onDrop: function (target, source, append){
//dragnodeid表示要拖拽的节点的id,"dragnode_name"表示要拖拽节点的名字;aimnodeid表示拖拽后所放位置的父节点id
var targetNode = $(this).tree('getNode',target);
var data = {"dragnodeid":source.id,"aimnodeid":targetNode.id,"dragnode_name":source.text};
$.ajax({
type : "post",
url : "./servlet",
dataType : "json",
data : {
"action" : "edit",
"data" : JSON.stringify(data)
},
success : function(data) {
if (data.result) {
$.messager.alert("错误", data.detail, "error");
}else {
ininttree() //刷新数据
$.messager.alert("成功",'保存成功',"info");
}
}
});
}
});
}
<ul id='tt'></ul>
</div>
<script>
var treedata = [
{"id":"0",
"text":"根节点",
"state":"open",
"children":[
{"id":6,
"text":"一层子节点1",
"state":"open",
"iconCls":"icon-location",
"children":[
{"id":58,
"text":"二层子节点",
"state":"open",
"iconCls":"icon-location",
"children":[]
}]
}],
"checked":true
}];
$(function(){
ininttree();
});
//初始化树
function ininttree(){
$('#tt').tree({
data :treedata ,
animate : true,
dnd : true,
onDrop: function (target, source, append){
//dragnodeid表示要拖拽的节点的id,"dragnode_name"表示要拖拽节点的名字;aimnodeid表示拖拽后所放位置的父节点id
var targetNode = $(this).tree('getNode',target);
var data = {"dragnodeid":source.id,"aimnodeid":targetNode.id,"dragnode_name":source.text};
$.ajax({
type : "post",
url : "./servlet",
dataType : "json",
data : {
"action" : "edit",
"data" : JSON.stringify(data)
},
success : function(data) {
if (data.result) {
$.messager.alert("错误", data.detail, "error");
}else {
ininttree() //刷新数据
$.messager.alert("成功",'保存成功',"info");
}
}
});
}
});
}
</script>
详细请参照easyui官网