dhtmlxtree学习笔记三(ajax动态获取数据)

 

前端代码

<!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数组传递

 

你可能感兴趣的:(html)