官方网站:
http://www.treejs.cn/v3/main.php#_zTreeInfo
使用方式:
步骤1、文件准备
将需要使用的 zTree v3.x 相关的 js、css、img 文件分别放置到相应目录,并且保证相对路径正确
步骤 2、编写 html 页面
按照以下代码,制作 html 页面,访问试试看吧,注意:
1) "<!DOCTYPE html>" 是必需的
2) zTree 的容器 className 别忘了设置为 "ztree"
3) 入门成功后,就可以按照顺序去看 Demo 了,直接看看源码,应该能看懂的。
<!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO </TITLE> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="demoStyle/demo.css" type="text/css"> <link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css"> <script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/javascript" src="jquery.ztree.core-3.x.js"></script> <SCRIPT LANGUAGE="JavaScript"> var zTreeObj; // zTree 的参数配置,深入使用请参考 API 文档(setting 配置详解) var setting = {}; // zTree 的数据属性,深入使用请参考 API 文档(zTreeNode 节点数据详解) var zNodes = [ {name:"test1", open:true, children:[ {name:"test1_1"}, {name:"test1_2"}]}, {name:"test2", open:true, children:[ {name:"test2_1"}, {name:"test2_2"}]} ]; $(document).ready(function(){ zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes); }); </SCRIPT> </HEAD> <BODY> <div> <ul id="treeDemo" class="ztree"></ul> </div> </BODY> </HTML>
initTree: function() {//初始化权限 var viewSelf = this; $.fn.zTree.init($("#treeDemo"), { async: { enable: true, url:$$ctx + "/menuMng/findFirstMenuList" }, data: { simpleData: { enable: true, idKey: "id", pIdKey: "pid"}, key: { name: "name" } }, check: { enable: true, chkStyle: "checkbox",chkboxType:{ "Y" : "ps", "N" : "ps" }}, callback: { onAsyncSuccess: function() { var treeObj = $.fn.zTree.getZTreeObj("treeDemo"); // treeObj.expandAll(true);//全不展开 } } }); $.fn.zTree.init($("#treeDemo_dashboard"), { async: { enable: true, url:$$ctx + "/menuMng/findDashboardMenuList" }, data: { simpleData: { enable: true, idKey: "id", pIdKey: "pid"}, key: { name: "name" } }, check: { enable: true, chkStyle: "checkbox",chkboxType:{ "Y" : "ps", "N" : "ps" }}, callback: { onAsyncSuccess: function() { var treeObj = $.fn.zTree.getZTreeObj("treeDemo_dashboard"); // treeObj.expandAll(true);//全不展开 } } }); },
--------------------迷人的分割线--------------------
作者:架构师小跟班
开发者导航: http://www.codernav.com
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
如果文中有什么错误,欢迎指出,以免更多的人被误导。
作者:架构师小跟班
开发者导航: http://www.codernav.com
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
如果文中有什么错误,欢迎指出,以免更多的人被误导。