成都创新互联网站制作重庆分公司

zTree树插件怎么在jQuery项目中使用

这篇文章将为大家详细讲解有关zTree树插件怎么在jQuery项目中使用,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

崇仁ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为成都创新互联的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:13518219792(备注:SSL证书合作)期待与您的合作!

一、介绍

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。

官网地址

特点:

  • zTree v3.0 将核心代码按照功能进行了分割,不需要的代码可以不用加载

  • 采用了 延迟加载 技术,上万节点轻松加载,即使在 IE6 下也能基本做到秒杀

  • 兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器

  • 支持 JSON 数据

  • 支持静态 和 Ajax 异步加载节点数据

  • 支持任意更换皮肤 / 自定义图标(依靠css)

  • 支持极其灵活的 checkbox 或 radio 选择功能

  • 提供多种事件响应回调

  • 灵活的编辑(增/删/改/查)功能,可随意拖拽节点,还可以多节点拖拽哟

  • 在一个页面内可同时生成多个 Tree 实例

  • 简单的参数配置实现 灵活多变的功能

二、使用

(1)引入ztree组件

注意:需要添加jquery依赖



(2)向body中添加div

     

(3)添加ztree设置


    var zTreeObj;
    // zTree 的参数配置,深入使用请参考 API 文档(setting 配置详解)
    var setting = {};
    // zTree 的数据属性,深入使用请参考 API 文档(zTreeNode 节点数据详解)
   var zNodes = [{
       name: "test1",
       open: true,
       children: [
        { name: "test1_1" }, { name: "test1_2" }
         ]
       },
      {
        name: "test2",
        open: true,
        children: [
         { name: "test2_1" }, { name: "test2_2" }
        ]
      }
    ];
  $(document).ready(function() {
  zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
 zTreeObj.expandAll(true);//展开树

(4)页面效果

zTree树插件怎么在jQuery项目中使用

(5)项目截图及html代码

zTree树插件怎么在jQuery项目中使用

html页面




  
    
    ztree测试页面
    
    
    
  

  
    
             
    
           var zTreeObj;       // zTree 的参数配置,深入使用请参考 API 文档(setting 配置详解)       var setting = {};       // zTree 的数据属性,深入使用请参考 API 文档(zTreeNode 节点数据详解)       var zNodes = [{           name: "test1",           open: true,           children: [             { name: "test1_1" }, { name: "test1_2" }           ]         },         {           name: "test2",           open: true,           children: [             { name: "test2_1" }, { name: "test2_2" }           ]         }       ];       $(document).ready(function() {         zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);       });        

三、一些方法

(1)设置展开树

$(document).ready(function() {
        zTreeObj = $.fn.zTree.init($("#ztree"), setting, zNodes);

        //展开所以节点
        //zTreeObj.expandAll(true);

        //展开第一级数节点
        var nodes = zTreeObj.getNodesByParam("level", 0);
        for(var i = 0; i < nodes.length; i++) {
          zTreeObj.expandNode(nodes[i], true, false, false);
        }
      });

四、setting 配置详解

一些比较常用的配置

(一)check

1、enable: true  
设置 zTree 的节点上是否显示 checkbox / radio
默认值: false

(二)view

 selectedMulti: false 设置是否允许同时选中多个节点。默认是true

(三)data

simpleData: { enable: true, idKey: 'id', pIdKey: 'pid', rootPId: '0' }

 var zNodes = [{ "id": 1, "pid": 0, "name": "test1" },
          { "id": 11, "pid": 1, "name": "test11" },
          { "id": 12, "pid": 1, "name": "test12" },
          { "id": 111, "pid": 11, "name": "test111" }
        ];

效果:

zTree树插件怎么在jQuery项目中使用

关于zTree树插件怎么在jQuery项目中使用就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


网站栏目:zTree树插件怎么在jQuery项目中使用
本文地址:http://cxhlcq.com/article/ihgcdc.html

其他资讯

在线咨询

微信咨询

电话咨询

028-86922220(工作日)

18980820575(7×24)

提交需求

返回顶部