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 数据对象 文章给写出（未完 待续） 。
zTree -- jQuery 树插件 使用方法与例子的更多相关文章
- zTree -- jQuery 树插件
http://www.ztree.me/v3/main.php#_zTreeInfo http://plugins.jquery.com/zTree.v3/ 例子:http://www.ztree.m ...
- 主攻ASP.NET.4.5.1 MVC5.0之重生:在项目中使用zTree jQuery 树插件
效果图和json格式 Controllers代码 using HR.Models; using HR.Models.Repository; /***************************** ...
- zTree -- jQuery 树插件实现点击文字展开子节点
新版本的zTree是单击+号展开子项,点击文字选中该项,双击文字展开子项 项目用的是3.5版本的,如果要点击文字展开子项暂时没查到资料,自己琢磨了下 项目用的是jquery.ztree.core-3. ...
- zTree 优秀的jquery树插件
zTree 优秀的jquery树插件,文档详细,渲染快 使用方法: 1.引用zTree的js和css文件 <link href="~/Content/zTree_v3/css/zTre ...
- 顶级jQuery树插件
顶级jQuery树插件 顶级jQuery树插件 2013-03-05 17:20 139人阅读 评论(0) 收藏 举报 jsTree JsTree是一个基于jQuery的Tree控件.支持HTML.J ...
- ASP.NET MVC jQuery 树插件在项目中使用方法（一）
jsTree是一个 基于jQuery的Tree控件.支持XML,JSON,Html三种数据源.提供创建,重命名,移动,删除,拖"放节点操作.可以自己自定义创建,删 除,嵌套,重命名,选择节点 ...
- jquery编写插件的方法
版权声明:作者原创,转载请注明出处! 编写插件的两种方式: 1.类级别开发插件(1%) 2.对象级别开发(99%) 类级别的静态开发就是给jquery添加静态方法,三种方式 1.添加新的全局函数 2 ...
- 再谈：jquery编写插件的方法
版权声明:作者原创,转载请注明出处! 编写插件的两种方式: 1.类级别开发插件(1%) 2.对象级别开发(99%) 类级别的静态开发就是给jquery添加静态方法,三种方式 1.添加新的全局函数 2. ...
- Jquery开发插件的方法
Jquery未开发插件提供了两个方法: (1)Jquery.extend(object) -为Jquery类本身添加新的方法;代码如下: $.extend({ add:function(a,b) ...
随机推荐
- JZ-038-二叉树的深度
二叉树的深度 题目描述 输入一棵二叉树,求该树的深度.从根结点到叶结点依次经过的结点(含根.叶结点)形成树的一条路径,最长路径的长度为树的深度. 题目链接: 二叉树的深度 代码 /** * 标题:二叉 ...
- Java使用Geotools读取shape矢量数据
作为GIS开发者而言,矢量数据是我们经常要用到的,而shape数据是矢量数据中最常用的格式,因此解析shape数据也是作为GIS软件开发人员必备的基础技能,而GeoTools无疑是Java最好用来处理 ...
- java的三大特性----封装、集成、多态
当我们被问到你对java的封装.继承.多态是什么看法的时候,你会想到什么? 想到的会不会是封装就是将类的成员属性用privet修饰一下,达到私有化的目的,只暴露方法,从而达到成员变量私有化的目的. 而 ...
- 11 Java的方法 递归
6.递归 A方法调用B方法,我们很容易理解! 递归就是:A方法调用A方法!就是自己调用自己 利用递归可以用简单的程序来解决一些复杂的问题. 它通常把一个大型复杂的问题层层转化为一个与原问题相似的规模较 ...
- Excel 使用 公式
1. 查询单元数据在另一列中是否存在 =VLOOKUP(E2,F:F,1,FALSE) 2.判断一列数据是否重复 =IF(COUNTIF(A:A,A2)>1,"重复",&qu ...
- libx264开发笔记（一）：libx264介绍、海思平台移植编译
前言 在编译ffmpeg时,使用到h264编码时是需要依赖libx264的,本文章是将将libx264作为静态库移植到海思上. 相关博客 <Qt开发笔记之编码x264码流并封装mp4(一 ...
- Objective-C 基础教程第七章,深入理解Xcode
目录 Object-C 基础教程第七章,深入理解Xcode 0x00 前言 0x01 创建工程界面 0x02 主程序界面 ①顶部 Top Test(测试) Profile(动态分析) Analyze( ...
- Vmware安装Ubuntu16.4的过程及出现问题的解决
镜像下载.域名解析.时间同步请点击 阿里云开源镜像站 1.下载Ubuntu镜像文件 Ubuntu16.4镜像文件下载地址:https://mirrors.aliyun.com/ubuntu-relea ...
- C++_STL_all_of
all_of 功能描述 如果在[first,last)范围内的数组进行判断, 如果pred返回true返回true 否则返回false 等同于 template<class InputItera ...
- Schema和数据类型优化?
整数TinyInt,SmallInt,MediumInt,Int,BigInt 使用的存储8,16,24,32,64位存储空间.使用Unsigned表示不允许负数,可以使正数的上线提高一倍.实数 Fl ...