zTree -- jQuery 树插件使用方法与例子

时间 2019-11-09

标签 ztree jquery 插件使用方法例子栏目 JQuery 繁體版

原文原文链接

简介

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。php

网址：http://www.ztree.me/v3/main.p...css

上面的网址里有ztree的详细介绍、Demo 演示、API 文档、入门指南以及下载。html

这里再也不赘述。jquery

使用说明

一、下载ztree文件
将须要使用的 zTree v3.x 相关的 js、css、img 文件分别放置到相应目录，而且保证相对路径正确。
二、引入ztree文件
将下载的ztree文件保留须要用的相关的 js、css、img 文件整个复制到本身的项目相应的文件夹下，以下图，我习惯将这类插件统一放在common/plugin/下，（其余不须要用的文件能够删除。

三、html 页面
分别在<head>和<body>中引入css、js文件，如代码所示。chrome

按照如下代码，制做 html 页面，注意：segmentfault

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之下，将该文件引入页面便可。）ide

$(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);
          };

      }

这样页面上的树目录就成了，效果以下图所示：ui

总结

很明显，这样的树只是一个静态固定节点的树，在大型项目中，每每须要不一样的用户看到不一样的目录，不一样的地区显示不一样的目录，等等，但你又不能一个一个定义这些配置来知足那么多数据需求，因此就须要异步加载子节点的的父节点，经过构造treeNode的 JSON 数据对象方法来实现，这个方法会在本专栏 zTree -- jQuery 树插件构造treeNode JSON 数据对象详细介绍。spa

zTree -- jQuery 树插件 使用方法与例子

简介

使用说明

示例代码

总结

zTree -- jQuery 树插件使用方法与例子