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数据对象,传入到节点中。第一次写,谢谢大家支持
分享到:
相关推荐
JQuery zTree v2.6.zipJQuery zTree v2.6.zipJQuery zTree v2.6.zipJQuery zTree v2.6.zip
3、支持 JSON 数据 4、支持一次性静态生成 和 Ajax 异步加载 两种方式 5、支持多种事件响应及反馈 6、支持 Tree 的节点移动、编辑、删除 7、支持极其灵活的 checkbox & radio 选择功能 8、支持任意更换皮肤 /...
JQuery zTree v2.6.rar,含demo
zTreeAPI v2.6.chm各种参数的详细说明,非常有用
zTreeAPI v2.6,很全的文档,文档大小:123K,使用ZTree遇到问题时,可以查看次文档
NULL 博文链接:https://jlwangjinshuang-163-com.iteye.com/blog/1166691
jquery-zTreeAPI 希望可以给你带来一些帮助
Jqurey 的树形插件,提供非常强大的树形功能,本资源提供了详细的Demo和API文档,版本为2.6。
ztree最简单的树--标准JSON 数据,1、setting 配置信息说明2、treeNode 节点数据说明
Ztree后台拼接Json,首先要注意版本,要不害死人的
Ztree根据json数据生成树,经过本人亲自测试过的,可以正常使用。
收集了ztree v2.6的api文档,包含chm和pdf格式,还是中文的哦!
JQueryJQuery树型菜单 zTree v2.6 beta
zTreeAPI v2.6.01版chm格式API开发文档。
ztree插件前台和后台数据交互,后台用的是java语言,用的技术是java
加载非常快的树,读取json格式数据! 特地上传给大家分享!