<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html>

<HTML>

<HEAD>

    <TITLE> ZTREE DEMO </TITLE>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

  <link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css">

  <script type="text/javascript" src="jquery-1.9.1.js"></script>

  <script type="text/javascript" src="jquery.ztree.core-3.5.js"></script>

    <SCRIPT LANGUAGE="JavaScript">

        var zTreeObj;

        var setting = {};

  var zNodes = [

    {name: "父节点",open:true, children: [

        {name: "子节点1"},

        {name: "子节点2"}

    ]}

];

        $(document).ready(function () {

            zTreeObj = $.fn.zTree.init($("#tree"), setting, zNodes);

        });

    </SCRIPT>

</HEAD>

<BODY>

    <div>

        <ul id="tree" class="ztree"></ul>

    </div>

</BODY>

</HTML>

使用zTree需要首先加载 jquery-1.4.2.js 或其他更高版本的 jQuery 。需要加载 jquery-ztree.core-3.0.js，如果需要用到 编辑功能 或 checkbox / radio 还需要分别加载 jquery-ztree.exedit-3.0.js 和 jquery-ztree.excheck-3.0.js 。需要加载 zTreeStyle.css 以及 zTreeStyle 目录下的 img 文件。

zTreeObj：定义Tree容器

setting：zTree 的配置数据

zNodes：数据源(json格式)

open:默认是false，可以更改true，展开树

zTreeObj = $.fn.zTree.init($("#tree"), setting, zNodes); ：初始化ztree

zTree学习的更多相关文章

  1. zTree 学习笔记之(一)

    zTree 学习笔记之(一) 简介 zTree 是一个依靠 jQuery 实现的多功能 “树插件”.优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. 到底有哪些具体的优点,可以参见官网 ...

  2. ztree学习笔记（一）

    在项目当中,经常会用到ztree树形插件,之前做的几个项目当中都用到了这个插件,感觉功能还是很强大的,而且在网上还找到了中文的API,因为项目中的树形结构不是自己做的,所以现在从头学习一下,并且记录一 ...

  3. zTree学习实例

    今天做完一个zTree的实例,供有需要的学习! 效果图如下:

  4. zTree学习文档和DEOM

    http://tool.oschina.net/apidocs/apidoc?api=ztree3.2%2Fapi%2FAPI_cn.html zTree的API http://www.ztree.m ...

  5. ztree学习之异步加载节点（一）

    ztreedemo.jsp: <%@ page language="java" import="java.util.*" pageEncoding=&qu ...

  6. z-tree学习笔记

    做项目时,需要用到带复选框的tree.经比较后优选了ztree,功能强大,文档清晰. http://www.treejs.cn/v3/api.php 直接上代码吧. 1.下载ztree后.将里面需要用 ...

  7. ztree学习---将默认勾选的展开

    这里只给出前台页面上的代码,数据可以从后台获取,注意,在封装数据的时候,注意:Id(节点的id,可以是数字也可以是字符串) , pid(父亲节点的id) , name(节点名称)不能少 . html页 ...

  8. Ztree学习(-)简单例子

    https://www.cnblogs.com/shinhwazt/p/5828031.html ztree包:https://pan.baidu.com/s/1vOgGm_elF-lF0VowoHw ...

  9. zTree学习笔记

    一.zTree的下载 官网:http://www.treejs.cn/v3/main.php#_zTreeInfo 解压后的目录结构为: 二.zTree入门案例 2.1 在页面中引入相关文件 要使用z ...

随机推荐

  1. Linux下Nginx+Tomcat负载均衡和动静分离配置要点

    本文使用的Linux发行版:CentOS6.7 下载地址:https://wiki.centos.org/Download 一.安装Nginx 下载源:wget http://nginx.org/pa ...

  2. Android SQLITE 操作工具类

    首先创建一个类 DatabaseHelper 继承SQLiteOpenHelper帮助类,定义数据库版本,数据库名称,创建表名. private static final int DATABASE_V ...

  3. Fluent Nhibernate之旅（五）--利用AutoMapping进行简单开发

    Fluent Nhibernate(以下简称FN)发展到如今,已经相当成熟了,在Nhibernate的书中也相应的推荐了使用FN来进行映射配置,之前写的FN之旅至今还有很多人会来私信我问题,说来惭愧, ...

  4. 一行代码解决ie6,7,8,9,10兼容性问题

    "浏览器模式"."文档模式"选项的区别如下: 1."浏览器模式"用于切换IE针对该网页的默认文档模式.对不同版本浏览器的条件备注解析.发送给 ...

  5. 如何同时运行两个tomcat？

    两个以上,要更改端口号.1 下载tomcat的压缩包(不是安装的那种,直接解压缩就能用的)下载地址:http://tomcat.apache.org/download-55.cgi 下载好的文件名是: ...

  6. 一分钟读懂MySQL分布式消息的处理

    在很多MYSQL环境中,对于MYSQL的分布式事物处理一直是个难题,在当前互联网环境中,大多数应用系统是基于SOA的很多复杂接口之间的调用,并且事物之间的处理优先级也是有先后的,所以对于实际入库的数据 ...

  7. pyhton 学习

    官方学习文档 https://docs.python.org/3/tutorial/

  8. 使用jquery脚本获取随笔、文章和评论的统计数，自定义显示位置

    为了这个问题,花了好些时间去摸索,无奈没有搞定.于是,我就到博问去提问,终于搞定! 在此,非常感谢SeayXu的热心帮助. 1.在需要的位置添加一个标签 <div id="stats_ ...

  9. Python【第一章】：简介和入门

    ython简介 Python的创始人为Guido van Rossum.1989年圣诞节期间,在阿姆斯特丹,Guido为了打发圣诞节的无趣,决心开发一个新的脚本解释程序,做为ABC 语言的一种继承.之 ...

  10. Map工具系列-04-SQL合并执行工具

    所有cs端工具集成了一个工具面板 -打开(IE) Map工具系列-01-Map代码生成工具说明 Map工具系列-02-数据迁移工具使用说明 Map工具系列-03-代码生成BySQl工具使用说明 Map ...