zoukankan      html  css  js  c++  java
  • ztre的使用入门

    1、首先需要下载ztree插件,

    2、把下载的插件中的js和css放到项目中去(img文件默认放到css文件下方,如果把img文件放到其他地方,加载出来的树将没有默认图标(文件夹图标)和节点前的展开闭合的加减号,

    3、在项目中引入jquery.js、ztree核心js、zTreeStyle.css

          jquery-1.4.2.js、jquery.ztree.core-3.x.js、zTreeStyle.css  这三个都是ztree插件中的,其中jquery.js  可以是更高版本的

         这是基本使用,复杂的还需添加jquery.ztree.excheck-3.5.jsjquery.ztree.exedit-3.5.js   最好都添加上

    4、写一个ztree的容器<ul id="treeDemo" class="ztree"></ul>       其中class是必须的,且值必须是ztree,id是ztree初始化后ztree的treeId

    5、设置setting    var setting = {};

    6、ztree数据

          var zNodes = [ {name:"test1", open:true, children:[ {name:"test1_1"}, {name:"test1_2"}]}, {name:"test2", open:true, children:[ {name:"test2_1"}, {name:"test2_2"}]} ];

    7、初始化ztree

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

    8、若setting设置   simpleData    则树节点数据可以是简单数组(即不需要写成上方zNodes那样的json嵌套格式)

          var setting = {
               simpleData: {
               enable: true
           };

         此时zNodes可以是下面格式

        var zNodes =[
               { id:1, pId:0, name:"节点搜索演示 1", t:"id=1", open:true},
               { id:11, pId:1, name:"关键字可以是名字", t:"id=11"},
               { id:12, pId:1, name:"关键字可以是level", t:"id=12"},
               { id:13, pId:1, name:"关键字可以是id", t:"id=13"},
               { id:14, pId:1, name:"关键字可以是各种属性", t:"id=14"},
                { id:2, pId:0, name:"节点搜索演示 2", t:"id=2", open:true},
               { id:21, pId:2, name:"可以只搜索一个节点", t:"id=21"},
              { id:22, pId:2, name:"可以搜索节点集合", t:"id=22"},
              { id:23, pId:2, name:"搜我吧", t:"id=23"},
              { id:3, pId:0, name:"节点搜索演示 3", t:"id=3", open:true },
              { id:31, pId:3, name:"我的 id 是: 31", t:"id=31"},
              { id:32, pId:31, name:"我的 id 是: 32", t:"id=32"},
              { id:33, pId:32, name:"我的 id 是: 33", t:"id=33"}
      ];

  • 相关阅读:
    开源代码分析工具 good
    Qt5---ftp上传功能(使用组合的办法实现功能,QNetworkAccessManager自动管理分片上传,用QLoggingCategory屏蔽SSL警告)
    QT---基于WinPcap的局域网络管理工具(主机扫描、包过滤、ARP攻击、端口扫描)
    unity资源
    MVC5 EF6 Bootstrap3 HtmlHelper
    轻量级IOC框架Guice
    CloudNotes:一个云端个人笔记系统
    WeChatAPI 开源系统架构详解
    基础查询扩展
    ASP.NET 5 Hello World
  • 原文地址:https://www.cnblogs.com/sunfenqing/p/7724826.html
Copyright © 2011-2022 走看看