当前位置:首页 > 教程 > 工具运用 > jQuery 实现的多功能Tree/TreeView “树插件”— zTree

jQuery 实现的多功能Tree/TreeView “树插件”— zTree

很多时候我们在制作前端Web网页的时候需要以树(tree)来显示网页,对于这种需求如果不是特别的要求,我们没有必要自己去写,已经有众多的 jQuery 树形(Tree)插件,这里介绍一款叫做 “zTree” 的jQuery Tree 插件。zTree 是一个依靠 jQuery 实现的多功能 “树插件”。 zTree 最大优点是具有灵活的配置、优异的性能、多种功能的组合。这个树形插件专门适合项目开发,特别是对于 树状菜单、树状数据的Web显示(TreeView)、权限管理等等。最大的好处还在于zTree 是一款开源免费的软件,具有MIT 许可证。zTree 目前已经拥有了不少粉丝,在开源的作用下,zTree 也越来越完善,并且还在不断推出更多的 zTree 扩展功能库,让 zTree 更加强大。
前端开发 - jquery tree

zTree —— jQuery 树插件实现方法

一、下载zTree包
点击此处下载zTree包。

二、导入zTree包到项目代码
将zTree包解压后放到你的项目中,将zTreeStyle.css和jquery.ztree.all-3.5.js引入项目,如示例

1
2
    <link href='/Resources/zTree/css/zTreeStyle/zTreeStyle.css' rel="stylesheet" />
    <script src='Resources/zTree/js/jquery.ztree.all-3.5.js'></script>

三、加入tree的容器和js代码
示例代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<script>
	    var setting = {
	        check: {
	            enable: true
	        },
	        data: {
	            simpleData: {
	                enable: true
	            }
	        },
	        async: {
	            enable: true,
	            url: "GetMenuTree",
	            autoParam: ["id"]
	        },
            callback: {
		        onCheck: zTreeOnCheck
	        }
	    };
 
	    var zNodes = [
		];
 
	    var code;
 
	    function setCheck() {
	        var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
			py = $("#py").attr("checked") ? "p" : "",
			sy = $("#sy").attr("checked") ? "s" : "",
			pn = $("#pn").attr("checked") ? "p" : "",
			sn = $("#sn").attr("checked") ? "s" : "",
			type = { "Y": py + sy, "N": pn + sn };
	        zTree.setting.check.chkboxType = type;
	        showCode('setting.check.chkboxType = { "Y" : "' + type.Y + '", "N" : "' + type.N + '" };');
	    }
	    function showCode(str) {
	        if (!code) code = $("#code");
	        code.empty();
	        code.append("<li>" + str + "</li>");
	    }
 
       var treeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
 
       function zTreeOnCheck(){
        var nodes = treeObj.getCheckedNodes(true);
	            selectedNode="";
	            for (i = 0; i < nodes.length;i++ ) {
		            if(i!=0){
			            selectedNode+=","
		            }
		            selectedNode+=nodes[i].guid;
	            }
	            $("#SelectedNode").val(selectedNode);
        }
 
	    $(document).ready(function () {
	        setCheck();
	        $("#py").bind("change", setCheck);
	        $("#sy").bind("change", setCheck);
	        $("#pn").bind("change", setCheck);
	        $("#sn").bind("change", setCheck);
	    });
   </script>
   <div id="treeDemo"></div>

上面的示例代码只需要更改一个地方就是async下的url,这个url请求返回的是tree的构造数据,返回的结果是类似如下的json字符串

1
2
3
4
        {name: "父节点1", children: [
		{name: "子节点1"},
		{name: "子节点2"}
	]}

这个是最基本的用法。然而zTree这个jquery tree 插件的功能绝不是仅此而已,它具有如下特性

  1. 灵活的编辑(增/删/改/查)功能,可随意拖拽节点,还可以多节点拖拽哟
  2. 简单的参数配置实现 灵活多变的功能
  3. 在一个页面内可同时生成多个 Tree 实例
  4. 兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器
  5. 支持 JSON 数据
  6. 采用了 延迟加载 技术,上万节点轻松加载,即使在 IE6 下也能基本做到秒杀
  7. 支持任意更换皮肤 / 自定义图标(依靠css)
  8. 提供多种事件响应回调
  9. 支持极其灵活的 checkbox 或 radio 选择功能

zTree非常的强大,在此不能一一敖述,关于zTree的具体使用可以参考 zTree API 。如有任何疑问也可以给我留言,谢谢!

  • << JS/jQuery 实现Combobox可输可选下拉框...
  • 怎样使用office Word 2007/2010/2013 离... >>
  • 作者:
    除非注明,本文原创:知道91,欢迎转载!转载请以链接形式注明本文地址,谢谢。
    原文链接:http://www.zhidao91.com/jquery-tree-ztree/

    相关文章 近期热评 最新文章

    • JS&jQuery实现全球国家、州/省、城市select下拉框选择示例
      当我们填写用户地址的时候,需要填写用户的地址,对于全球的用户我们不能让用户任意输入地址,需要的是让用户选择地址,而不是填写。但是全球的国家众多,每个国家的州/...
    • JQuery 获取浏览器窗口的高度和宽度讲解
      在我们使用JQuery开发的过程中我们有时会根据浏览器窗口的位置定位,本文讲解一下获取浏览器窗口尺寸、文档尺寸、以及浏览器滚动条尺寸的一些方法。
    • HTML+JS+CSS 实现Tab选项卡
      在网页特效中经常需要使用到Tab选项卡的特效,实现这种特效需要使用HTML、CSS、JS的综合运用。实现Tab选项卡介绍了使用jQuery UI和自定义实现HTML Tab 选项卡的两种方法。
    • JS/jQuery 实现Combobox可输可选下拉框(select)
      本文介绍了JS/jQuery 实现Combobox可输可选下拉框的方法,可以通过Ajax实现动态加载可输可选下拉框的选项,可以在下拉框中输入一个新值动态添加一个数据选项,同样可以...
    • HTML&jQuery横向循环左右滚动导航方法讲解
      HTML&jQuery横向循环左右滚动导航方法讲解,实现了基于jquery可配置循环左右滚动例子讲解,可以实现横向滚屏,左右移动,适合做滚动导航。
    • jQuery 国家语言(Language)选择切换讲解
      现在网站不仅是做的国内的,更多的大企业或者是做外贸电子商务的网站都需要面向国际化,因此就涉及到语言的选择,多语言网站建的切换应该怎么设计呢?这里给你一款jQuer...
    • oracle数据库相关操作注意事项
      修改Oracle SGA(共享内存) 很多网站说修改Oracle的内存通过命令 如果你这么做了,那么恭喜你,你的Oracle数据库无法启动了。如果你已经这么做了,恢复Oracle启动的方...
    • 使用微信JDK实现微信接口签名验证
      要使用微信的接口必须在绑定的域名下测试;签名必须先向微信请求到access_token,然后用access_token再去请求jsapi_ticket,最后用jsapi_ticket和相关的参数按照ASCII码...
    • ABP开发指南系列教程(2) – 多层架构...
      为了减少复杂性和提高代码的可重用性,采用分层架构是一种被广泛接受的技术。为了实现分层的体系结构,ABP遵循DDD(领域驱动设计)的原则,将工程分为四个层: 展现层(...
    • ABP开发指南系列教程(1) – 入...
      ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)”的简称。 ASP.NET Boilerplate是一个用最佳实践和流行技术开发现代WEB应用程序的新起点,它旨在成为一个通用的WE...
    • Windows下 JIRA + Agile + Mysql 破解...
      本文讲述了Windows下 JIRA + Agile + Mysql 破解安装示例教程
    • c#类的构造函数继承关系示例剖析
      本文通过示例代码讲解了c#子类的构造函数与父类的关系,子类怎样集成父类的构造函数的。