树目录zTree的使用

最新推荐文章于 2021-04-09 03:34:38 发布

原创最新推荐文章于 2021-04-09 03:34:38 发布 · 665 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jsp #jquery #zTree #树目录 #树

第三方控件专栏收录该内容

2 篇文章

订阅专栏

本文介绍了开源免费的zTree，它支持延迟加载、多种浏览器兼容、JSON数据格式，以及静态和Ajax异步加载节点。zTree还允许自定义皮肤和图标，提供了丰富的checkbox和radio选择功能，具备灵活的编辑操作，并能在同一页面创建多个实例。配置方面，文章讨论了相关属性的详细说明，指导如何在jsp中引入并设定显示层。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

zTree

前言：zTree是开源免费的。文档API：http://www.ztree.me/v3/api.php

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

首先说一下我的Demo结构：

页面进行W3C申明：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

下面在jsp中的head中引入：如果使用编辑等功能还需引用其他扩展js。

<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="scripts/zTree/js/jquery.ztree.core-3.5.js"></script>
<!-- 使用复选框要引入下面的扩展js -->
<script type="text/javascript" src="scripts/zTree/js/jquery.ztree.excheck-3.5.js"></script>
<!-- 使用编辑功能要引入下面的扩展js -->
<script type="text/javascript" src="scripts/zTree/js/jquery.ztree.exedit-3.5.js"></script>
<link rel="stylesheet" href="scripts/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">

这里废话一句，jQuery和zTree的先后顺序不能反。

设定显示层：

<body>
<ul id="tree" class="ztree" style="width:230px; overflow:auto;"></ul>
</body>

js中设置：

<script type="text/javascript">
//设置
var setting = {
		check:{
  			enable: true
  		}
};
//节点
zTreeNodes =[
     {name:"主页", id:"0",isParent:true,iconOpen:"scripts/zTree/css/zTreeStyle/img/diy/1_open.png",
         iconClose:"scripts/zTree/css/zTreeStyle/img/diy/1_close.png"},
     {name:"常用卡片管理", id:"1",isParent:true,icon:"scripts/zTree/css/zTreeStyle/img/diy/user_edit.png",
	     children: [
	        { "id":11, "name":"银行卡",icon:"scripts/zTree/css/zTreeStyle/img/diy/vcard.png"},
	        { "id":12, "name":"会员卡",icon:"scripts/zTree/css/zTreeStyle/img/diy/vcard.png"},
	        { "id":13, "name":"其他卡",icon:"scripts/zTree/css/zTreeStyle/img/diy/vcard.png"}
	     ]
     },
     {name:"软件账号管理", id:"2",isParent:true,icon:"scripts/zTree/css/zTreeStyle/img/diy/9.png", "click":"haha();","chkDisabled":true},
     {name:"日常开销管理", id:"3",isParent:true,icon:"scripts/zTree/css/zTreeStyle/img/diy/clock_red.png", "click":"haha();","chkDisabled":true},
     {name:"提醒事件管理", id:"4",isParent:true,icon:"scripts/zTree/css/zTreeStyle/img/diy/lightbulb.png", "click":"haha();","chkDisabled":true}
];

//初始化zTree
$(document).ready(function(){
	$.fn.zTree.init($("#tree"), setting, zTreeNodes);
});
//菜单点击事件
function haha() {
	alert("后续开发...");
}
</script>

效果图：

"checked":true	是否选中复选框
"chkDisabled":true	复选框是否可勾选
iconOpen、iconClose	成对，打开关闭显示不同图标
icon	打开关闭显示相同图标
isParent:true	是否父节点
"click":"haha();"	单击事件，触发函数
"nocheck":true	去掉复选框
"url":"http://myTest.com"	单击指向
"target":"_blank"	指定url后有效
iconSkin:"diy01"	需在css中设定

树目录zTree的使用

zTree

相关属性说明：