关键词：
我们在做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）下载。
时间：2019-01-10 标签：c#parseleasingjson来制作一棵树
】时间：2019-01-10标签：c#parseleasingjson来制作一棵树【英文标题】：c#parsingrelaxedjsontomakeatree【发布时间】：2018-01-3121:35:51【问题描述】：所以我需要解析类似这样的文件：pl:GENERIC:BACK:"COFNIJ",WAIT:"CZEKAJ",PAGES:ABOUTME:ID:"ID",,INFO:STATUS:"S... 查看详情
原创《开源一个用vue写的树层级组件vue-ztree》
最近由于后台管理项目的需要，页面需要制作一个无限树的需求，我第一想到了插件ztree，不过我觉得它太大了，还是自己主动丰衣足食吧。 ztree的demo地址：http://www.treejs.cn/v3/demo.php 我拿来了ztree的样式... 查看详情
项目中jquery插件ztree使用记录
...来先在说呗（公司以后要改用angular或者vue来统一前端的制作方式），个人觉得jquery还挺好用的。废话这里就不多叙述了。下面就先来一张完成后的图片展示一下ztree可以完成的功能。 额····这边弹出层的阴影是录制软件... 查看详情
ztree简单使用
zTree使用 zTreegithub地址 zTreeAPI文档 zTree插件依赖JQ所以使用zTree首先引入JQ，另外zTree的点击功能，编辑功能都是单独的文件，如需使用也要引入(也可以引入全部功能的JS文件)。 引入zTree的css文件(zTreeStyle.css和demo.css... 查看详情
ztree通过指定id找到节点并选中
zTree=$.fn.zTree.getZTreeObj("treeDemo");//treeDemo界面中加载ztree的divvarnode=zTree.getNodeByParam("id",pid);zTree.cancelSelectedNode();//先取消所有的选中状态zTree.selectNode(node,true);//将指定ID的节点选中zTree.expandNode( 查看详情
ztree
1、ztree API网址：http://www.treejs.cn/v3/api.php2、ztree的基本介绍 zTree是一个依靠jQuery实现的多功能插件树。优异的性能、灵活的配置、多种功能的组合是zTree最大优点。专门适合项目开发，尤其是树状菜单、树状数据的Web显示、... 查看详情
004ztree入门-bos
使用标准json数据构造ztree 1.使用标准json构造ztree，children属性用于描述子节点，可以无限嵌套下去 2.name属性用于描述节点名称 3.缺点是结构很混乱，不易修改，代码阅读、维护困难 4.示例代码 <!--展示ztree效果:使用标准json数... 查看详情
ztree使用实例
一、获取点击选中的值：<linkrel="stylesheet"href="./static/libs/ztree/css/metroStyle/metroStyle.css"type="text/css"><!--ztree--><scriptsrc="./static/libs/ztree/js/jquery.ztree.core-3.5.js"></ 查看详情
ztree插件动态加载节点
1、ztree官网首页下载所需zip,下载方式为GitHub 方式下载HTTPS: https://gitee.com/zTree/zTree_v3.gitSSH: [email protected]:zTree/zTree_v3.git2、在jsp页面中引入js、css文件<linkrel="stylesheet"href="zTreeStyle/z 查看详情
使用ztree插件构建树形菜单
zTree下载：https://github.com/zTree/zTree_v3目录：就我看来，zTree较为实用的有以下几点：zTree是一个依靠jQuery实现的多功能“树插件”。优异的性能、灵活的配置、多种功能的组合是zTree最大优点。支持JSON数据支持静态和Ajax异步... 查看详情
ztree设置节点checked
1、根据id获取树的某个节点： varzTree=$.fn.zTree.getZTreeObj("mytree"); varnode=zTree.getNodeByParam("id",1);2、设置node节点选中状态：zTree.selectNode(node);3、设置node节点checked选中,有两种方法实现:（1）、zTree.checkNode(node,tru 查看详情
ztree根节点默认打开
1、在生成tree的json数据中，直接给出：open:true的属性;2、treeObj.expandAll(true);3、var zTree = $.fn.zTree.getZTreeObj("ztree"); var node=zTree.getNodeByParam("OrgID",&nbs 查看详情
ztree优秀的jquery树插件
zTree优秀的jquery树插件,文档详细，渲染快使用方法：1、引用zTree的js和css文件 <linkhref="~/Content/zTree_v3/css/zTreeStyle/zTreeStyle.css"rel="stylesheet"/><scriptsrc="~/Content/zTree_v3/js/jquery.ztree.core.min.js"> 查看详情
ztree第五章，ztree的nodes数据例子
varnodes1=[name:"小学",iconOpen:folderOpen,iconClose:folder,chkDisabled:true,children:[name:"语文",iconOpen:folderOpen,iconClose:folder,children:[name:"人教版",iconOpen:folderOpen,iconClose:folder,childre 查看详情
ztree
首先在ztree官方网站上根据要求下载Ztree所需要的Dll。 <linkrel="stylesheet"href="../../../css/demo.css"type="text/css"> <linkrel="stylesheet"href="../../../css/zTreeStyle/zTreeStyle.css"type="tex 查看详情
ztreejquery-ztree的基本使用
1.zTree的下载地址 https://gitee.com/zTree/zTree_v3 API文档：http://www.treejs.cn/v3/api.php2.引入需要的文件 <scripttype="text/javascript"src="../libs/ztree/jquery.ztree.core.js"></script> <scriptt 查看详情
vue-ztree
在vue中引入zTree，和引入其他组件类似，首先在main.js里将以下3个js引入： import"./js/jquery-3.3.1.min.js";import"../plugins/zTree/js/jquery.ztree.core.min.js";import"../plugins/zTree/js/jquery.ztree.excheck.min.js";这三个js分别是：jQuery，建议从官方网站下... 查看详情
ztree节点重叠或者遮挡
ztree官网：http://www.treejs.cn/v3/api.php问题：zTree节点重叠或者遮挡。分析：由于zTree和bootstrap插件样式冲突导致的树重叠问题。解决：设置zTreeStyle.css文件的.ztreeliul{}属性，在里面加入height:auto。 查看详情