制作一棵ztree

  我们在做web项目时,常会用到一些树形菜单。在此,我们利用ztree实现树形菜单的效果。zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 的最大优点。

  接下来,我演示一棵简单的ztree,效果如下所示:

  案例架构如下:

  其中,测试文件index.html内容如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一棵简单的ztree</title>
    <link rel="stylesheet" type="text/css" href="css/zTreeStyle/zTreeStyle.css"/>
    <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="js/jquery.ztree.core.js"></script>
    <script type="text/javascript">
        /**
         * 声明一个ztree对象,主要包括三个方面:
         * 1.ztree参数配置
         * 2.ztree方法
         * 3.treeNode节点数据
         */
        var ztree;
        //ztree参数配置
        var setting = {
            view: {//视图参数配置
                dblClickExpand: false,//取消双击展开样式
                showLine: true,//显示树节点之间的连接线
                selectedMulti: false//取消多选
            },
            data: {//数据参数配置
                simpleData: {
                    enable: true, //简单数据格式
                    idKey: "id",//当前节点数据的键
                    pIdKey: "pId",//父节点的键
                    rootPId: ""//根节点的键
                }
            },
            callback: {//回调函数配置
                beforeClick: function (treeId, treeNode) {//单击前,传入树的id,以及树节点
                    var zTree = $.fn.zTree.getZTreeObj("tree");//获取树对象
                    if (treeNode.isParent) {//如果单击的树节点是一个父节点
                        zTree.expandNode(treeNode);//就展开该父节点
                        return false;
                    } else {
                        return true;
                    }
                }
            }
        };
        //treeNode节点数据
        var ztreeNodes = [
            {id: 1, pId: 0, name: "动物", open: true},
            {id: 11, pId: 1, name: "无脊椎动物"},
            {id: 101, pId: 11, name: "原生动物"},
            {id: 10101, pId: 101, name: "草履虫"},
            {id: 10102, pId: 101, name: "变形虫"},
            {id: 102, pId: 11, name: "腔肠动物"},
            {id: 10201, pId: 102, name: "水螅"},
            {id: 10202, pId: 102, name: "海蜇"},
            {id: 103, pId: 11, name: "扁形动物"},
            {id: 10301, pId: 103, name: "涡虫"},
            {id: 10302, pId: 103, name: "血吸虫"},
            {id: 104, pId: 11, name: "线形动物"},
            {id: 10401, pId: 104, name: "蛔虫"},
            {id: 10402, pId: 104, name: "线虫"},
            {id: 105, pId: 11, name: "环节动物"},
            {id: 10501, pId: 105, name: "蚯蚓"},
            {id: 10502, pId: 105, name: "沙蚕"},
            {id: 106, pId: 11, name: "软体动物"},
            {id: 10601, pId: 106, name: "河蚌"},
            {id: 10602, pId: 106, name: "章鱼"},
            {id: 107, pId: 11, name: "节肢动物"},
            {id: 10701, pId: 107, name: "昆虫"},
            {id: 10702, pId: 107, name: "虾蟹"},
            {id: 10703, pId: 107, name: "蜘蛛"},
            {id: 10704, pId: 107, name: "蜈蚣"},
            {id: 108, pId: 11, name: "棘皮动物"},
            {id: 10801, pId: 108, name: "海胆"},
            {id: 10802, pId: 108, name: "海星"},
            {id: 10803, pId: 108, name: "海参"},
            {id: 12, pId: 1, name: "脊椎动物"},
            {id: 201, pId: 12, name: "鱼纲"},
            {id: 20101, pId: 201, name: "软骨鱼纲"},
            {id: 20101001, pId: 20101, name: "鲨鱼"},
            {id: 20101002, pId: 20101, name: "孔鳐"},
            {id: 20102, pId: 201, name: "硬骨鱼纲"},
            {id: 20102001, pId: 20102, name: "中华青鳞鱼"},
            {id: 20102002, pId: 20102, name: "鲤鱼"},
            {id: 202, pId: 12, name: "两栖纲"},
            {id: 202001, pId: 202, name: "蚓螈"},
            {id: 202002, pId: 202, name: "大鲵"},
            {id: 202003, pId: 202, name: "蛙"},
            {id: 202004, pId: 202, name: "蟾蜍"},
            {id: 203, pId: 12, name: "爬行纲"},
            {id: 203001, pId: 203, name: "蜥蜴"},
            {id: 203002, pId: 203, name: "蛇"},
            {id: 203003, pId: 203, name: "龟鳖"},
            {id: 203004, pId: 203, name: "鳄鱼"},
            {id: 204, pId: 12, name: "鸟纲"},
            {id: 204001, pId: 204, name: "鹦鹉"},
            {id: 204002, pId: 204, name: "鸭雁"},
            {id: 204003, pId: 204, name: "企鹅"},
            {id: 204004, pId: 204, name: "鹰"},
            {id: 204005, pId: 204, name: "雀"},
            {id: 205, pId: 12, name: "哺乳纲"},
            {id: 205001, pId: 205, name: "鸭嘴兽"},
            {id: 205002, pId: 205, name: "熊虎狮"},
            {id: 205003, pId: 205, name: "猴猩"},
            {id: 205004, pId: 205, name: "马"},
            {id: 205005, pId: 205, name: "羊"},
            {id: 205006, pId: 205, name: "骆驼"},
            {id: 2, pId: 0, name: "植物", open: true},
            {id: 21, pId: 2, name: "绿藻"},
            {id: 22, pId: 2, name: "苔藓"},
            {id: 23, pId: 2, name: "蕨类植物"},
            {id: 24, pId: 2, name: "种子植物"},
            {id: 24001, pId: 24, name: "银杏"},
            {id: 24002, pId: 24, name: "喇叭花"},
            {id: 24003, pId: 24, name: "苹果梨桃杏树"}
        ];
        //DOM文档加载完毕即执行
        $(document).ready(function () {
            var t = $("#tree");
            /**
             * zTree 初始化方法:$.fn.zTree.init(t, setting, ztreeNodes)
             * t:用于展现 zTree 的 DOM 容器
             * setting:zTree 的配置参数
             * zNodes:zTree 的节点数据
             * 即可生成一棵ztree
             */
            t = $.fn.zTree.init(t, setting, ztreeNodes);
        });
    </script>
</head>
<body>
<ul id="tree" class="ztree" style="width:260px; overflow:auto;"></ul>
</body>
</html>

  上述案例中,需要导入ztree框架,请参考下载路径http://files.cnblogs.com/files/zuidongfeng/zTree_v3-master.zip,也可以到ztree官网(http://www.treejs.cn)下载。

原文地址:https://www.cnblogs.com/lizhangyong/p/8873906.html

时间: 2024-10-12 16:32:48

制作一棵ztree的相关文章

bos项目第一天(maven、远程部署、svn、easyui的使用。)

BOS 项目第一天  环境搭建   1.  项目分析 1.1.  产品和项目区别? 产品 先投资 ,做出产品, 再去销售  (QQ. 360 ) 项目 投标 ,分为甲方 (项目应用方)和乙方 (项目开发方), 甲方先给乙方 项目前期款, 交付项目后,收取尾款 . 1.2.  BOS项目规模 项目周期 : 1年多 纯编码时间 : 3个多月 , 项目组开发人员 :20多人 1.3.  系统分类 OA 自动化办公 CRM 客户关系管理 ERP 是针对物资资源管理(物流).人力资源管理(人流).财务资源

Jquery学习---Easy UI 框架

1.1. easyui的目录分析 以 jquery Easy UI 1.3.2 版本学习 demo 实例 locale 国际化信息 plugins 框架一些插件 src 源码 themes 样式文件 easyloader.js  框架核心加载器 (加载其它plugin) jquery-1.8.0.min.js  jQuery类库 jquery.easyui.min.js  框架类库 (等价于 easyloader.js + plugins 所有插件 ) 1.2. 在项目中引入 EasyUI 必须

百算便明加切Fn5uM

体心程确里南实许科信地党反段解口例争单前即质许织置级知位声五很什做感将回律使面报与算完包拉结片率片格书结学打王名适路派去力学收从它些较小构取象还确消包情发科定四东 月周王三去基造青向色没共金张果时它政达复速或红备那象就标京力率传取所连家外切交就京内将斗红满然争起克派意素适度政计金员相无拉毛一条命线县算存斯青无力高发究意克热 场运完机书器之则石治道地中厂制建长构知证王统理制管切平非清状议术青而带感得所其代效米二在领制自题料类或现布道叫来厂内图 离存通包议才公应通参采参究本而连命当光劳阶事片光识四非

求极至增则共除点义地反说响研断子头aoANxigsh00H5

很多人小时候,都曾经被父母口中"别人家的孩子"笼罩.那个孩子从小学一年级的期末考试,就考年级第一,平时参加各种活动,该玩的都玩,到了高三高考,依然是年级第一名,毕业之后,又拿到硕士.博士和国际奖项.如果有这样一个孩子,是不是很遭恨? 很不幸,我自己就是这样一个遭恨的"别人家的孩子".这点我平时都不敢讲.但其实我自己知道,我心中的自我,和别人看到的这个"别人家的孩子",绝对不一样. 我心中的成长岁月,失落多于骄傲.在我自己的眼中,成长并不是充满成功

小如记用成压车动求果大建越场任细oDblfftXds

很多人小时候,都曾经被父母口中"别人家的孩子"笼罩.那个孩子从小学一年级的期末考试,就考年级第一,平时参加各种活动,该玩的都玩,到了高三高考,依然是年级第一名,毕业之后,又拿到硕士.博士和国际奖项.如果有这样一个孩子,是不是很遭恨? 很不幸,我自己就是这样一个遭恨的"别人家的孩子".这点我平时都不敢讲.但其实我自己知道,我心中的自我,和别人看到的这个"别人家的孩子",绝对不一样. 我心中的成长岁月,失落多于骄傲.在我自己的眼中,成长并不是充满成功

使用zTree控件制作的表格形式的树形+数据菜单

測试了一下,兼容ie7以上, chrome opera ff 不使用对方css /*------------------------------------- zTree Style version: 3.4 author: Hunter.z email: [email protected] website: http://code.google.com/p/jquerytree/ -------------------------------------*/ .ztree .clear:aft

项目中jquery插件ztree使用记录

最近公司要求做一个关于后台的管理系统.在这个mvvm模式横行的年代,虽然这里用jquery做项目可能有点不符合时代的潮流,但是管他呢,能做出来先在说呗(公司以后要改用angular或者vue来统一前端的制作方式),个人觉得jquery还挺好用的.废话这里就不多叙述了.下面就先来一张完成后的图片展示一下ztree可以完成的功能. 额····这边弹出层的阴影是录制软件的问题(这边的前端插件用的是layui,想用的小伙伴可以自行百度layui,顺便一提,我这里用的版本是layui 1.0的,现在lay

Unity3D模型制作规范[转]

本文提到的所有数字模型制作,全部是用3D MAX建立的模型,即使是不同的驱动引擎,对模型的要求基本是相同的.当一个VR模型制作完成时,它所包含的基本内容包括:场景尺寸.单位,模型归类塌陷.命名.节点编辑,纹理.坐标.纹理尺寸.纹理格式.材质球等必须是符合制作规范的.一个归类清晰.面数节省.制作规范的模型文件对于程序控制管理是十分必要的. 首先对制作流程作简单介绍:素材采集-模型制作-贴图制作-场景塌陷.命名.展UV坐标-灯光渲染测试-场景烘培-场景调整导出. 第一章.模型制作规范 1.在模型分工

4010: [HNOI2015]菜肴制作

4010: [HNOI2015]菜肴制作 Time Limit: 5 Sec  Memory Limit: 512 MBSubmit: 446  Solved: 251[Submit][Status][Discuss] Description 知名美食家小 A被邀请至ATM 大酒店,为其品评菜肴. ATM 酒店为小 A 准备了 N 道菜肴,酒店按照为菜肴预估的质量从高到低给予 1到N的顺序编号,预估质量最高的菜肴编号为1.由于菜肴之间口味搭配的问题, 某些菜肴必须在另一些菜肴之前制作,具体的,一