您的位置：首页 > Web前端 > JQuery

树目录zTree的使用

2015-04-15 10:42 357 查看

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

相关属性说明：