zTree -- jQuery 树插件 使用方法与例子
简介
zTree 是一个依靠 jQuery 实现的多功能 “树插件”。
网址:http://www.ztree.me/v3/main.php#_zTreeInfo
上面的网址里有ztree的详细介绍、Demo 演示、API 文档、入门指南 以及下载。
这里不再赘述。
使用说明
1、下载ztree文件
将需要使用的 zTree v3.x 相关的 js、css、img 文件分别放置到相应目录,并且保证相对路径正确。
2、引入ztree文件
将下载的ztree文件保留需要用的相关的 js、css、img 文件整个复制到自己的项目相应的文件夹下,如下图,我习惯将这类插件统一放在common/plugin/下,(其他不需要用的文件可以删除。
3、html 页面
分别在<head>和<body>中引入css、js文件,如代码所示。
按照以下代码,制作 html 页面,注意:
zTree 的容器 className 别忘了设置为 "ztree"!!!
示例代码
-
html代码:
<!DOCTYPE html>
<html lang="en-us"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>ztreeDemo</title> <link rel="stylesheet" href="../../../common/plugin/ztree/zTreeStyle.css" type="text/css"> </head> <body> <div class="row"> <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 pt10"> <div class="well sidebar-nav "> <ul id="planTree" class="ztree"></ul> </div> </div> <!-- zTree 这里使用的 all.js = core + excheck + exedit ( 不包括 exhide )--> <script src="../../../common/plugin/ztree/jquery.ztree.all.min.js"></script> <!--my zTree 这里引入的是下面所示的js代码文件 --> <script src ="../../../common/js-data/mytree.js"></script> </body>
</html>
-
js代码:
(这些代码,我写在了按习惯的相应页面html同名的.js文件中,在<body>引入的ztree.all.min.js之下,将该文件引入页面即可。)$(function () { init(); }); function init() { builePlanTree(); } //ZTREE function builePlanTree() { var setting = { view: { showIcon: true//设置 zTree 是否显示节点的图标。 }, data: { simpleData: { enable: true } }, callback: { // beforeExpand: beforeExpand, // onExpand: onExpand, onClick: zTreeOnClick } } var zNodes =[ { id:1, pId:0, name:"课程目录", open:true}, { id:11, pId:1, name:"季度产品知识课程", open:true}, { id:111, pId:11, name:"13Q4产品知识", }, { id:112, pId:11, name:"14Q1产品知识", }, { id:113, pId:11, name:"14Q2产品知识", }, { id:114, pId:11, name:"14Q3产品知识", }, { id:115, pId:11, name:"14Q4产品知识", }, { id:12, pId:1, name:"项目宣讲类课程", open:true}, { id:121, pId:12, name:"项目宣讲类课程1"}, { id:122, pId:12, name:"项目宣讲类课程2"}, { id:123, pId:12, name:"项目宣讲类课程3"}, { id:13, pId:1, name:"移动商学院", open:true}, { id:131, pId:13, name:"技能类"}, { id:132, pId:13, name:"心态类"}, { id:132, pId:13, name:"知识类"}
];
$.fn.zTree.init($("#planTree"), setting, zNodes); function zTreeOnClick(event, treeId, treeNode) { //这里定义点击书中节点时,相应的页面其他的操作,示例: // 每次点击节点后, 弹出该节点的 tId、name 的信息 alert(treeNode.tId + ", " + treeNode.name); }; }
这样页面上的树目录就成了,效果如下图所示:
总结
很明显,这样的树只是一个静态固定节点的树,在大型项目中,往往需要不同的用户看到不同的目录,不同的地区显示不同的目录,等等,但你又不能一个一个定义这些配置来满足那么多数据需求,所以就需要异步加载子节点的的父节点,通过构造treeNode的 JSON 数据对象方法来实现,这个方法会在本专栏 后面 zTree -- jQuery 树插件 构造treeNode JSON 数据对象 文章给写出(未完 待续) 。