• 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"}
      ];

  • 相关阅读:
    Git常用
    自学过程
    SpringJunitTest
    通过Maven更换环境配置文件
    MongDB的DateZone
    工具使用问题
    项目中遇到的关于Java的问题
    iTerm2使用Profiles自动登录
    脚本:将git项目下载到本地并启动
    一些新的认识
  • 原文地址:https://www.cnblogs.com/sunfenqing/p/7724826.html
Copyright © 2020-2023  润新知