java ztree json_zTree2.6、json数据的交互使用

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

jsp页面：

首先引入jquery的js文件

然后引入ztree需要的js文件

//初始化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标签加到想展示树的位置

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

分享到：

2012-03-06 16:15

浏览 6520

评论

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

}

}

3 楼

new991565

2012-03-12

好 好  ，谢谢了

2 楼

mayijun000

2012-03-10

new991565 写道

求完整代码！

我刚刚开始学，对整个流程不太熟悉。能不能给我整个demo的代码啊，包括后台转换json，前台页面显示，就是一个完整的能跑起来的demo。拜托了CeailiaCandy@sina.com

谢谢了！！

过几天给你写一个

1 楼

new991565

2012-03-09

求完整代码！

我刚刚开始学，对整个流程不太熟悉。能不能给我整个demo的代码啊，包括后台转换json，前台页面显示，就是一个完整的能跑起来的demo。拜托了CeailiaCandy@sina.com

谢谢了！！