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

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



分享给朋友:
您可能感兴趣的文章:
随机阅读: