日期:2014-05-16  浏览次数:20407 次

zTree2.6、json数据的交互使用

?????? zTree 是一个依靠 jQuery 实现的多功能 “树插件”。通过对json数据的支持,是它他用起来特别的方便,下面就来介绍一下最简单的应用。

?

?jsp页面:

?

?

首先引入jquery的js文件

<script type="text/javascript" src="<%=basePath1%>module/taskMng/lhgdialog/jquery-1.7.1.min.js"></script>

??

然后引入ztree需要的js文件?

??????????????

<link rel="stylesheet" href="<%=basePath1>js/demo/zTreeStyle/zTreeStyle.css" type="text/css">
	
<script type="text/javascript" src="<%=basePath1%>js/demo/jquery.ztree-2.6.js"></script>

?

 //初始化ztree设置
var zTree1;   
      var  setting = {   
        isSimpleData : true,   //是否采用简单 Array 格式,true表示采用
        treeNodeKey : "id",   
        treeNodeParentKey : "pId"//如果为true必须声明父子关系
      };   
/*
简单 Array 格式
var treeNodes = [   --%>
      {"id":80, "pId":01, "name":"test1"},         {"id":81, "pId":80, "name":"test11"},         {"id":82, "pId":80, "name":"test12"},          {"id":111, "pId":81, "name":"test111"}       ];   
*/

?

//从后台读取数据
var treeNodes = new Array();
      $(function(){
             var url="userListAction!getOrgJson.action";
	$.ajax({
		url: url,
		type:'post',
		async: false , 
		success: function(data){
		var msg = eval('(' + data + ')');
					
		$.each(msg,function(i,item){
		treeNodes.push(new Node(item.id,item.parentId,item.deptName));
			});
			//alert(treeNodes[0].pId);
		 		}
			});
	});
		function Node(id,pid,name){
			this.id=id;
			this.pId=pid;
			this.name=name;
									
		}

??

//一切准备好后初始化树
 $(document).ready(function(){   
        zTree1 = $("#treeDemo").zTree(setting, treeNodes);   
     }); 
//将ul标签加到想展示树的位置
<ul id="treeDemo" class="tree"></ul>

?

以上就是一个简单的例子,后台转换json我就不写了很简单,这里我还用了javascript面向对象的编程思想,new了一个json数据对象,传入到节点中。第一次写,谢谢大家支持

1 楼 new991565 2012-03-09  
求完整代码!
我刚刚开始学,对整个流程不太熟悉。能不能给我整个demo的代码啊,包括后台转换json,前台页面显示,就是一个完整的能跑起来的demo。拜托了CeailiaCandy@sina.com
谢谢了!!
2 楼 mayijun000 2012-03-10  
new991565 写道
求完整代码!
我刚刚开始学,对整个流程不太熟悉。能不能给我整个demo的代码啊,包括后台转换json,前台页面显示,就是一个完整的能跑起来的demo。拜托了CeailiaCandy@sina.com
谢谢了!!

过几天给你写一个
3 楼 new991565 2012-03-12  
好 好  ,谢谢了
4 楼 mayijun000 2012-03-13  
public void getOrgJson(){
	try {
	deptDictWrappers = deptService.getCompanyDept(getLoginUserCompanyId());//查询出的list
	String jsonStr  = net.sf.json.JSONArray.fromObject(deptDictWrappers).toString();//转换成json字符串
			
	HttpServletResponse response = getResponse();
		response.setCharacterEncoding("utf8");
		PrintWriter out  = response.getWriter();
			
	out.println(jsonStr);//输出到前台
	} catch (IOException e) {
		log.error(e,e);
	} catch (Exception e) {
		log.error(e,e);
	}
		
	}