一直以来看见web项目中的树就头疼。这次又给碰上了,什么也别说,这次自己整理一个版本出来实践一下。
zTree v3.2的API界面非常清爽,但是在查看API之前,你需要自己先实践一下,知道基本的概念和约定的符号
怕毛线,直接来吧,首先简要介绍下zTree,只因为这个jQuery插件目前非常非常火,非常非常灵活,所以其他的
Tree插件我就 不去了解了,原理应该相通
         zTree,是一个依靠jQuery的树插件,开源免费(开源就是好~~),尤其是用在树状菜单,权限管理(比如部门层级
这样的场景),随便搜一下,zTree的粉丝真是多,至少还要火好一段时间!
        下面开始做一个简单的zTree

第一步:
        下载zTree的插件,刚刚说了,他是一个jQuery插件,所以不要忘了jQuery这个引用
比如我下载了一个压缩文件zTree-zTree_v3-master.zip,解压后有四个文件夹,api,css,demo,js,其中js中已经下载有
jquery-1.4.4.min.js这个插件

第二步:
         新建一个webProject,怎么建不讲了,太基础;我的工程名叫demoTest,
        在WebRoot文件夹下新建一个test文件夹,
        在test文件夹下建立四个文件夹,分别叫js,css,images,pages,
        在pages文件夹下新建一个tt.html,和tt.js(作为你自己的写逻辑的js引用进来)
        将解压出来的jquery-1.4.4.min.js,jquery.ztree.core.js,jquery.ztree.exedit.js放入js文件夹(注意.min.js是压缩版的,自己脑补)
        将解压出来的css里的东西丢进css文件夹
        OK,现在tt.html中引用这些个文件
 <link rel="stylesheet" href="../css/demo.css" type="text/css"></link>
 <link rel="stylesheet" href="../css/zTreeStyle/zTreeStyle.css" type="text/css"></link>

<script type="text/javascript" src="../js/jquery-1.4.4.min.js"></script>
 <script type="text/javascript" src="../js/jquery.ztree.core.js"></script>
 <script type="text/javascript" src="../js/jquery.ztree.exedit.js"></script>
注意了:(1)插件的名字的jquery不要写成了jQuery(兔血的教训,检查到死都查不出来)
            (2)jquery-1.4.4.min.js要放在ztree之前引用,不信我?自己测试下

第三步:
          在tt.html中建立你的tree模型,也就是给一个初始的标记,这里zTree有一个固定的格式
<ul id="treeDemo" class="ztree"></ul>
第四步:在tt.js中初始化这棵树,初始化就一句
$(document).ready(function () { 
               $.fn.zTree.init($("#treeDemo"), setting, zNodes);
 };
说明:
1、treeDemo就是模型树的id,setting是一个对象,zNodes是一个数组,里面装的是一个个的对象,并且对象都是json格式的
2、对象setting 和数组zNodes 要在初始化之前定义

第五步:
         下面这步完成你将看到这棵树!!!我们要在这个对象(数组)里做什么呢?且听细说
现在的这个树,什么都没有,nothing,光秃秃的,没有分枝,没有叶子,所以我们要通过这两个对像给他加上一些想展现
的东西,在coding里面你应该知道父亲,儿子的概念,zNodes这个数组就是干这些事的,它里面装的都是对象,这些对象
描述的就是树的节点   ,下面我们搞个静态的树试试看,拿我举例子~~成这样的一棵树
首先获得模型树标签:var t =$("#treeDemo");
定义setting,暂定义为空的,var setting = {};
zNodes定义如下:
var zNodes = [
    {
     name:"彪哥朋友",
     open:false,
     isParent:true                
    },
    {
     name:"彪哥同学",
     open:true,
     isParent:true                
    },
    {
     name:"彪哥父母",
     open:true,
     id:1,
     url:"adfdfad",
     children:[
               {
                name:"彪哥"                
               },
               {
               name:"姐姐",
               children:[{
                          name:"外甥"
                         }]
               }
               ]     
    }
];
最后完成初始化:   
$(document).ready(function () { 
       $.fn.zTree.init($("#treeDemo"), setting, zNodes);
};  
现在这个tt.js完成
第六步:
         引入tt.js到tt.html中,body标签内容如下
   <ul id="treeDemo" class="ztree"></ul>
   <script type="text/javascript" src="../js/tt.js"></script> 
你可以尝试在head中导入tt.js,结果会告诉你,tt.js在body的文档尚未加载完就执行了,于是你看不到这棵树
         接着我们来解释下那几个属性:
name:节点名称
open:节点默认是否展开,我特意将"彪哥朋友"设为false不展开,"彪哥同学"设为true展开(减号)
isParent:是否为文件夹
id:自定义的编号,可有可无
url:自定义的,可有可无
children:自己理解

下面我将这棵树的加号全部点开:

        OK,这个简单的功能废了我老鼻子劲,因为一些根本不算问题的问题引起的,
比如说编码时误删了html的默认声明<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
比如说jquery要放在ztree之前引用这样的坑货
比如说即使这个jquery写成了jQuery,按着ctrl你依然可以点进去这个引用的插件,但是调用却不能调用

不过碰一鼻子灰,要比别人给你讲或者自己看别人写的博客印象深多了,弯路走多了后面的弯路才会越来越少
OK,下一篇讲这个setting

第二篇:怕碰到是因为没掌握,来吧,zTree!的更多相关文章

  1. 前端第二篇---前端基础之CSS

    前端第二篇---前端基础之CSS 目录 一.css介绍 二.css语法 三.css的几种引入方式 四.css选择器 五.css属性相关 六.盒子模型 拓展 一.css介绍 CSS(Cascading  ...

  2. PHP 性能分析第二篇: Xhgui In-Depth

    [前言]这是国外知名博主 Davey Shafik 撰写的 PHP 应用性能分析系列的第二篇,第一篇介绍 Xhprof/Xhgui,第三篇则关注于性能调优实践. 在第一篇中,我们初步介绍了 xhpro ...

  3. 迷茫<第二篇:回到老家湖南长沙>

    2014年8月初,我买了回老家的火车票,当时没有买到坐票,卧铺贵了买不起,所以我就选择了站票,准备站回老家.我现在还记得我当时买的是T1列火车,北京西站到长沙火车站,全程16个小时.当时我就在火车上站 ...

  4. 第二篇 界面开发 (Android学习笔记)

    第二篇 界面开发 第5章 探索界面UI元素 ●The Android View Class     ●△Widget设计步骤 需要修改三个XML,以及一个class: 1)第一个xml是布局XML文件 ...

  5. Egret入门学习日记 --- 第二篇 (书籍的选择 && 书籍目录 && 书中 3.3 节 内容)

    第二篇 (书籍的选择 && 书籍目录 && 书中 3.3 节 内容) 既然选好了Egret,那我就要想想怎么学了. 开始第一步,先加个Q群先,这不,拿到了一本<E ...

  6. 从0开始搭建SQL Server AlwaysOn 第二篇(配置故障转移集群)

    从0开始搭建SQL Server AlwaysOn 第二篇(配置故障转移集群) 第一篇http://www.cnblogs.com/lyhabc/p/4678330.html第二篇http://www ...

  7. (转)从0开始搭建SQL Server AlwaysOn 第二篇(配置故障转移集群)

    原文地址:  http://www.cnblogs.com/lyhabc/p/4682028.html 这一篇是从0开始搭建SQL Server AlwaysOn 的第二篇,主要讲述如何搭建故障转移集 ...

  8. 前端工程师技能之photoshop巧用系列第二篇——测量篇

    × 目录 [1]测量信息 [2]实战 [3]注意事项 前面的话 前端工程师使用photoshop进行的大量工作实际上是测量.本文是photoshop巧用系列第二篇——测量篇 测量信息 在网页制作中需要 ...

  9. 深入理解javascript作用域系列第二篇——词法作用域和动态作用域

    × 目录 [1]词法 [2]动态 前面的话 大多数时候,我们对作用域产生混乱的主要原因是分不清楚应该按照函数位置的嵌套顺序,还是按照函数的调用顺序进行变量查找.再加上this机制的干扰,使得变量查找极 ...

随机推荐

  1. 29. StringBuilder

    1.字符串变量.StringBuffer.StringBulid的区别:           字符串是一个常量,不能被修改   字符串一旦被修改,那么会再创建一个对象,浪费空间           而 ...

  2. 【JZOJ3918】蛋糕

    description 今天是Bessie的生日,他买了一个蛋糕和朋友们一起分享,蛋糕可以看成是一个R行C列的表格,共有R*C个格子,每个格子都有一个0至9的数字,表示该格子蛋糕拥有的巧克力.现在Be ...

  3. mysql 删除同样记录只保留一条

    delete from fa_order_account ) as a) ) as b)

  4. thinkphp 输入过滤

    永远不要相信客户端提交的数据,所以对于输入数据的过滤势在必行,我们建议: 开启令牌验证避免数据的重复提交: 使用自动验证和自动完成机制进行初步过滤: 使用系统提供的I函数获取用户输入数据: 对不同的应 ...

  5. hive的数据存储格式

    hive的数据存储格式 Hive支持的存储数的格式主要有:TEXTFILE(行式存储) .SEQUENCEFILE(行式存储).ORC(列式存储).PARQUET(列式存储). 1 列式存储和行式存储 ...

  6. P1655 小朋友的球

    P1655 小朋友的球 题目描述 @发源于 小朋友最近特别喜欢球.有一天他脑子抽了,从口袋里拿出了N个不同的球,想把它们放到M个相同的盒子里,并且要求每个盒子中至少要有一个球,他好奇有几种放法,于是尝 ...

  7. Python module中的全局变量

    Python module中的全局变量 我想要实现一个python module,这个module中有一些配置项,这些配置项可以被读取,被修改.一个可行的方案是把这些配置项写到一个叫settings. ...

  8. mac的终端运行ifconfig

    lo0:loopback回环地址一般是127.0.0.0,loopback指本地环回接口(或地址),亦称回送地址().此类接口是应用最为广泛的一种虚接口,几乎在每台路由器上都会使用. gif0: so ...

  9. Hbase启动的时候出现:[RpcServer.handler=28,port=60000] ipc.RpcServer: RpcServer.handler=28,port=60000: exiting,master.HMasterCommandLine: Master exiting

    hadoop 版本:CDH5.02 Hbase 版本:hbase-0.96.1.1-cdh5.0.2 配置文件:hbase-site.xml <configuration> <pro ...

  10. 今天真的很SB

    在公司Review系统网页上,写了一篇几百字的作文, 然后突然手一抖,竟然没有保存就切换页面了, 赶快退回来...没了,啥都没了... 怎么办... 还好洒家N久之前看了一本什么什么杂七杂八的书, 里 ...