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

原创 2013年12月04日 10:27:54

 

前端代码

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

 

相关文章推荐

如何使用dhtmlxtree 和Json 数据格式创建和使用一棵tree

(声明:本人自认为在Java界只是个不起眼的小菜鸟,若哪里有疏忽或者出错的地方还请各位海涵并且帮忙改正,最主要希望自己的学习中遇到的问题能很好的帮助你们) 先简单介绍下dhtmlxtree: dthm...

DHTMLXTree的初始化 动态加载 解决中文乱码

DHTMLXTree的初始化 动态加载 等操作var tree;  function initTree(){  tree=new dhtmlXTreeObject("treeboxbox_tree",...
  • tcl1360
  • tcl1360
  • 2009年11月12日 22:14
  • 2706

树形展示数据——dhtmlxTree的使用

在Java Web项目开发中,一般用JSP做前台数据展示,后台通过SSH框架来进行高效开发,有流程的控制,业务的处理和对数据库的各种处理,而数据则存放在Oracle等选择的数据库中。现在大家想这样一个...

dhtmlXTreeObject 部分方法

dhtmlXTreeObject 部分方法  tree = new dhtmlXTreeObject("treeboxbox_tree", "100%", "100%", 0);//构建dhtmlX...

dhtmlxtree 简单例子后台springmvc实现

1、下载dhtmlxtree 网上自己搜 2、jsp页面如下 String path = request.getContextPath(); String basePath...

树形展示数据——dhtmlxTree的使用

在Java Web项目开发中,一般用JSP做前台数据展示,后台通过SSH框架来进行高效开发,有流程的控制,业务的处理和对数据库的各种处理,而数据则存放在Oracle等选择的数据库中。现在大家想这样一个...

SMP3.0学习笔记之四 使用OData Native SDK获取数据

作者:穿行印象 http://blog.sina.com.cn/s/blog_7a9486880101q8zv.html 登录(onboarding)成功后的界面中,我增加了三个按钮: ...

Windows Phone 开发学习笔记(九) RSS阅读器之获取数据

Hello WindowsPhone的背后虽然有很多内容,但是展示出来的效果毕竟简单,因此想通过实现一个简单的RSS阅读器来熟悉更多应用层面的开发。其实在MSDN上有一个RSS阅读器的例子(http:...

echarts ajax 动态获取数据

keys 和 values 都是动态数据 注意如果数据是{value:335, name:'直接访问'}这种格式 需要使用eval('(' + strtojson + ')') 转一下//加...
  • CTLLIN
  • CTLLIN
  • 2017年03月17日 15:31
  • 1463

OpenLayers学习笔记8——使用servlet从mysql获取数据并标注

这两天在图书馆边看jsp边查边写代码,改完了老板交给的任务,也顺带实现了查询的效果,先来看下最终实现的效果图: 整个实现思路是:服务器端采用servlet+mysql模糊查询,servlet返回j...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:dhtmlxtree学习笔记三(ajax动态获取数据)
举报原因:
原因补充:

(最多只允许输入30个字)