前端代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Easy skinable design</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="title" content="Samples" />
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<body>
<link rel="STYLESHEET" type="text/css"
href="dhtmlxtree/dhtmlxtree.css">
<script src="dhtmlxtree/dhtmlxcommon.js"></script>
<script src="dhtmlxtree/dhtmlxtree.js"></script>
<!-- 如果是使用json格式就必须引入 dhtmlxtree_json.js文件-->
<script src="dhtmlxtree/dhtmlxtree_json.js"></script>
<script src="js/util/jquery-1.4.4.js"></script>
<div id="treeboxbox_tree"
style="width: 250px; height: 218px; background-color: #f5f5f5; border: 1px solid Silver;"></div>
<script>
$(function(){
//测试是否导入jquery成功
//alert(3);
});
tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
tree.setSkin('dhx_skyblue');
tree.setImagePath("dhtmlxtree/common/images/");
tree.enableDragAndDrop(0);
tree.enableTreeLines(false);
tree.setImageArrays("plus","","","","plus.gif");
tree.setImageArrays("minus","","","","minus.gif");
tree.setStdImages("book.gif","books_open.gif","books_close.gif");
function dbclickFunc(id){
//根据id获取内容的方法是 tree.getItemText(id)
alert("dbclick "+id+" Item " + tree.getItemText(id) + " was selected");
$.ajax({
type: "POST",
url: "http://localhost:8080/myspring/function1/user/ajaxTree.do",
data: "id="+id,
success: function(msg){
alert( "Data Saved: " + msg );
var obj = eval('('+msg+')');
alert(obj.parent);
tree.insertNewNext(obj.parent,obj.id,obj.item);
}
});
}
tree.setOnDblClickHandler(dbclickFunc);//单机事件
var json = {
id: 0,
item:[
{
id:"X1",
text:"一",
item:[
{
id:"X11",
text:"一一"
},
{
id:"X12",
text:"一二"
}
]
},
{
id:"X2",
text:"二",
item:[
{
id:"X21",
text:"二一"
},
{
id:"X22",
text:"二二"
}
]
}
]
};
var jsondata = {id:0, item:[{id:1,text:"first"},{id:2, text:"middle", item:[{id:"21", text:"child"}]},{id:3,text:"last"}]};
//tree.loadJSONObject(jsondata);
tree.loadJSONObject(json,function(){
//alert(1);
});
//动态添加一个节点
/*
insertNewChild(parentId,itemId,itemText,itemActionHandler,image1,image2,image3,optionStr,children)
//前三个参数为必须的
parentId - parent node id
itemId - new node id
itemText - new node label
itemActionHandler - function fired on node select event (optional)
image1 - image for node without children; (optional)
image2 - image for closed node; (optional)
image3 - image for opened node (optional)
optionStr - options string (optional)
children - node children flag (for dynamical trees) (optional)
tree.insertNewChild(0,1,"New Node 1",0,0,0,0,"SELECT,CALL,TOP,CHILD,CHECKED");
tree.insertNewNext(1,2,"New Node 2",0,0,0,0,"CHILD,CHECKED");
第4-7的参数都是0(选择后调用的方法,所使用的图片)意味着都使用默认值
最后一个使用逗号分隔的参数可以是以下值(只能是大写):
SELECT - 插入后选择此结点
CALL - 在选择时调用方法
TOP - 在最上方插入此结点
CHILD - 此结点有子结点
CHECKED - 此结点的多选框被选中(如果有的话)
*/
//添加一个新节点在指定父节点的最后面
tree.insertNewChild(0,"hb","hb");
tree.insertNewChild(0,"hb1","New Node 1",0,0,0,0,"TOP,CHILD,CHECKED");
//添加一个新节点在指定的父节点后面
tree.insertNewNext("hb1","hb11","New Node 2",0,0,0,0,"CHILD,CHECKED");
tree.enableTreeLines(true);
</script>
</body>
</html>
server端代码
@RequestMapping(value="/ajaxTree")
public void ajaxTree(HttpServletRequest request,HttpServletResponse response){
String id = request.getParameter("id");
System.out.println(id);
PrintWriter pw = null;
try {
pw = response.getWriter();
//{'parent':'parentid','id':'selfid','item':'itemname'}
pw.write("{'parent':'"+id+"','id':'selfid','item':'itemname'}");
pw.flush();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}finally{
if(pw != null){
pw.close();
}
}
}
备注：server端返回的是一个json格式的字符串，将这个字符串输出到前端，然后再将其转换为JSON对象，最后作为数据展示到前端，如果是多条数据，则通过json数组传递