jQuery zTree树插件的使用教程

本文为大家分享了jQuery zTree树插件的使用教程，供大家参考，具体内容如下

一、介绍

实现版是一个依靠框架实现的多功能"树插件"。优异的性能、灵活的配置、多种功能的组合是实现版最大优点。

官网地址

特点：

zTree v3.0将核心代码按照功能进行了分割，不需要的代码可以不用加载采用了延迟加载技术，上万节点轻松加载，即使在IE6下也能基本做到秒杀兼容工业工程，火狐、Chrome、Opera、Safari等浏览器支持数据数据支持静态和埃阿斯异步加载节点数据支持任意更换皮肤/自定义图标（依靠css)支持极其灵活的检验盒或收音机选择功能提供多种事件响应回调灵活的编辑（增/删/改/查)功能，可随意拖拽节点，还可以多节点拖拽哟在一个页面内可同时生成多个树实例简单的参数配置实现灵活多变的功能二、使用

(1)引入实现版组件

注意：需要添加框架依赖

link href=' static/jquery-z tree/3。5 .36/CSS/ztree样式/ztree样式。CSS ' rel='样式表type=' text/CSS '/脚本类型=' text/JAVAScript ' src=' http : static/jquery/3。3 .1/jquery-3。3 .1 .量滴js /脚本src=' http 3360 static/jquery-z tree/3。5 .36/js/jquery .向身体中添加差异

div div id=' TreeDemo ' class=' z tree '/div/div(3)添加实现版设置

SCRIPT LANguage=' JAVAScript ' var ZtreeObj；//zTree的参数配置，深入使用请参考应用程序接口文档（设置配置详解)var设置={ };//zTree的数据属性，深入使用请参考应用程序接口文档(zTreeNode节点数据详解)var znode=[{ name : ' test1 '，open: true，children :[{ name : ' test1 _ 1 ' }，{ name: 'test1_2' } ] }，{ name: 'test2 '，open: true，children :[{ name : ' test2 _ 1 ' }，{ name : ' test2 _ 2 ' }]}]；$(文档)。ready(function(){ ztreeObj=$。fn。ztree。init($(' # treedeo ')，setting，zNodes)；zTreeObj.expandAll(真);//展开树/SCRIPT(4)页面效果

(5)项目截图及超文本标记语言代码

超文本标记语言页面

！DOCTYPE html html head meta charset=' UTF-8 ' title ztree测试页面/title link href=' static/jquery-z tree/3。5 .36/CSS/ztreesyl/ztreesyl。CSS ' rel='样式表type='text/css' /脚本类型=' text/JAVAScript ' src=' http 3360 static/jquery/3。3 .1/jquery-3。3 .1 .量滴js /脚本脚本src=' http 3360 static/jquery-z tree/3。5 .36/js/jj//zTree的参数配置，深入使用请参考应用程序接口文档（设置配置详解)var设置={ };//zTree的数据属性，深入使用请参考应用程序接口文档(zTreeNode节点数据详解)var znode=[{ name : ' test1 '，open: true，children :[{ name : ' test1 _ 1 ' }，{ name: 'test1_2' } ] }，{ name: 'test2 '，open: true，children :[{ name : ' test2 _ 1 ' }，{ name : ' test2 _ 2 ' }]}]；$(文档)。ready(function(){ ztreeObj=$。fn。ztree。init($(' # treedeo ')，setting，zNodes)；});/SCRIPT /body/html三、一些方法

(1)设置展开树

$(文档)。ready(function(){ ztreeObj=$。fn。ztree。init($(' # ztree ')，setting，zNodes)；//展开所以节点//ztereobj。expandall(真)；//展开第一级数节点var nodes=ztereobj。getnodesbyparam(' level '，0)；for(var I=0；我节点。长度；I){ ztreobj。expandnode(节点[I]，真，假，假)；} });四、设置配置详解

一些比较常用的配置

检查

1.enable: true设置是否在zTree节点上显示复选框/单选默认值： false。

(2)视图

SelectedMulti: false设置是否允许同时选择多个节点。默认值为真

(3)数据

simpledata : { enable : true，idKey: 'id '，pIdKey: 'pid '，rootpid : ' 0 ' } var znode=[{ ' id ' : 1，' PID ' : 0 0，' name ' : ' test1 ' }，{ ' id ' : 11，' PID ' 3: 1，' name': 'test11' }，{ ' id ' 3:效果：

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。