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

来源：互联网发布：知难阅读答案编辑：程序博客网时间：2024/05/17 01:07

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

jsp页面：

首先引入jquery的js文件

Java代码

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

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

然后引入ztree需要的js文件

Java代码

<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>

<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>

Java代码

//初始化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"} ];
*/

 //初始化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"}       ];   */

Java代码

//从后台读取数据
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;
}

//从后台读取数据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;}

Java代码

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

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

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

分享到：

通过javamail发送邮件

2012-03-06 16:15
浏览 725
评论(4)
收藏
分类:Web前端
相关推荐

4 楼 mayijun000 2012-03-13 引用

Java代码

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);
}
}

public void getOrgJson(){try {deptDictWrappers = deptService.getCompanyDept(getLoginUserCompanyId());//查询出的listString 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);}}

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

评论