dhtmlxtree学习笔记三（ajax动态获取数据）

来源：互联网发布：常州淘宝模特兼职编辑：程序博客网时间：2024/05/24 06:02

前端代码

<!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 iditemId - new node iditemText - new node labelitemActionHandler - 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 blocke.printStackTrace();}finally{if(pw != null){pw.close();}}}

备注：server端返回的是一个json格式的字符串，将这个字符串输出到前端，然后再将其转换为JSON对象，最后作为数据展示到前端，如果是多条数据，则通过json数组传递