Jquery-zTree的基本用法 - 上善若水任方圆 - ITeye技术网站
博客分类：
zTree 是利用 JQuery 的核心代码，实现一套能完成大部分常用功能的 Tree 插件
兼容 IE、FireFox、Chrome 等浏览器
在一个页面内可同时生成多个 Tree 实例
支持 JSON 数据
支持一次性静态生成 和 Ajax 异步加载 两种方式
支持多种事件响应及反馈
支持 Tree 的节点移动、编辑、删除
支持任意更换皮肤 / 个性化图标（依靠css）
支持极其灵活的 checkbox 或 radio 选择功能
简单的参数配置实现 灵活多变的功能
zTree博客地址：
目前zTree作者已经入驻ItEye，如果有什么需要学习的完全可以到作者博客上去学习，而且zTree的版本已经更新了很多次了，下面的内容跟最新版估计会有很大出入，我不能保证下面的教程在最新版可用。zTree真的是非常强大的树组件，希望能对大家有所帮助！
在官网能够下载到zTree的源码、实例和API，其中作者pdf的API写得非常详细（中文的哦）
【部分函数和属性介绍】
核心：zTree(setting, [zTreeNodes])
这个函数接受一个JSON格式的数据对象setting和一个JSON格式的数据对象zTreeNodes，从而建立 Tree。
核心参数：setting
zTree 的参数配置都在这里完成，简单的说：树的样式、事件、访问路径等都在这里配置
setting 举例:
var setting = {
showLine: true,
checkable: true
因为参数太多，具体参数详见zTreeAPI
核心参数：zTreeNodes
zTree 的全部节点数据集合，采用由JSON对象组成的数据结构，简单的说：这里使用Json格式保存了树的所有信息
zTreeNodes的格式分为两种：利用Json格式嵌套体现父子关系和Array简单格式
①带有父子关系的标准 zTreeNodes 举例:
var zTreeNodes = [
{"id":1, "name":"test1", "nodes":[
{"id":11, "name":"test11", "nodes":[
{"id":111, "name":"test111"}
{"id":12, "name":"test12"}
②带有父子关系的简单 Array 格式(isSimpleData)的 zTreeNodes 举例：
var treeNodes = [
{"id":1, "pId":0, "name":"test1"},
{"id":11, "pId":1, "name":"test11"},
{"id":12, "pId":1, "name":"test12"},
{"id":111, "pId":11, "name":"test111"},
【实例一】(Java代码)
①在页面引用zTree的js和css：
&!-- ZTree树形插件 --&
&link rel="stylesheet" href="&%=root%&/Web/common/css/zTreeStyle/zTreeStyle.css" type="text/css"&
&!-- &link rel="stylesheet" href="&%=root%&/Web/common/css/zTreeStyle/zTreeIcons.css" type="text/css"&
&script type="text/javascript" src="&%=root%&/Web/common/js/jquery-ztree-2.5.min.js"&&/script&
②在script脚本中定义setting和zTreeNodes
var setting = {
isSimpleData : true,
//数据是否采用简单 Array 格式，默认false
treeNodeKey : "id",
//在isSimpleData格式下，当前节点id属性
treeNodeParentKey : "pId",
//在isSimpleData格式下，当前节点的父节点id属性
showLine : true,
//是否显示节点间的连线
checkable : true
//每个节点上是否显示 CheckBox
var treeNodes = [
{"id":1, "pId":0, "name":"test1"},
{"id":11, "pId":1, "name":"test11"},
{"id":12, "pId":1, "name":"test12"},
{"id":111, "pId":11, "name":"test111"},
③在进入页面时生成树结构：
$(function() {
zTree = $("#tree").zTree(setting, treeNodes);
④最后查看效果：
【实例二】(从后台获取简单格式Json数据)
①后台代码封装简单格式Json数据：
public void doGetPrivilegeTree() throws IOException{
String s1 = "{id:1, pId:0, name:\"test1\" , open:true}";
String s2 = "{id:2, pId:1, name:\"test2\" , open:true}";
String s3 = "{id:3, pId:1, name:\"test3\" , open:true}";
String s4 = "{id:4, pId:2, name:\"test4\" , open:true}";
List&String& lstTree = new ArrayList&String&();
lstTree.add(s1);
lstTree.add(s2);
lstTree.add(s3);
lstTree.add(s4);
//利用Json插件将Array转换成Json格式
response.getWriter().print(JSONArray.fromObject(lstTree).toString());
②页面使用Ajax获取zTreeNodes数据再生成树
var setting = {
isSimpleData : true,
//数据是否采用简单 Array 格式，默认false
treeNodeKey : "id",
//在isSimpleData格式下，当前节点id属性
treeNodeParentKey : "pId",
//在isSimpleData格式下，当前节点的父节点id属性
showLine : true,
//是否显示节点间的连线
checkable : true
//每个节点上是否显示 CheckBox
$(function(){
async : false,
cache:false,
type: 'POST',
dataType : "json",
url: root+"/ospm/loginInfo/doGetPrivilegeTree.action",//请求的action路径
error: function () {//请求失败处理函数
alert('请求失败');
success:function(data){ //请求成功后处理函数。
alert(data);
treeNodes =
//把后台封装好的简单Json格式赋给treeNodes
zTree = $("#tree").zTree(setting, treeNodes);
③最后显示效果
【实例三】从后台动态获取数据，树节点提供右键菜单功能
①配置setting：
var url = "/ospm/loginInfo/doGetPrivilegeTree.action";
//zTree基本设置
var setting = {
async : true, //需要采用异步方式获取子节点数据,默认false
asyncUrl : root + url, //当 async = true 时，设置异步获取节点的 URL 地址 ,允许接收 function 的引用
asyncParam : ["id"], //提交的与节点数据相关的必需参数
isSimpleData : true, //数据是否采用简单 Array 格式，默认false
treeNodeKey : "id", //在isSimpleData格式下，当前节点id属性
treeNodeParentKey : "parentId", //在isSimpleData格式下，当前节点的父节点id属性
nameCol : "privName",
//在isSimpleData格式下，当前节点名称
expandSpeed : "fast", //设置 zTree节点展开、折叠时的动画速度或取消动画(三种默认定义："slow", "normal", "fast")或 表示动画时长的毫秒数值(如：1000)
showLine : true, //是否显示节点间的连线
callback : { //回调函数
rightClick : zTreeOnRightClick
//右键事件
②配置鼠标右键事件，显示右键菜单的代码
//显示右键菜单
function showRMenu(type, x, y) {
$("#rMenu ul").show();
if (type=="root") {
$("#m_del").hide();
$("#m_check").hide();
$("#m_unCheck").hide();
$("#rMenu").css({"top":y+"px", "left":x+"px", "display":"block"});
//隐藏右键菜单
function hideRMenu() {
$("#rMenu").hide();
//鼠标右键事件-创建右键菜单
function zTreeOnRightClick(event, treeId, treeNode) {
if (!treeNode) {
zTree.cancelSelectedNode();
showRMenu("root", event.clientX, event.clientY);
} else if (treeNode && !treeNode.noR) { //noR属性为true表示禁止右键菜单
if (treeNode.newrole && event.target.tagName != "a" && $(event.target).parents("a").length == 0) {
zTree.cancelSelectedNode();
showRMenu("root", event.clientX, event.clientY);
zTree.selectNode(treeNode);
showRMenu("node", event.clientX, event.clientY);
&!-- 右键菜单div --&
&div id="rMenu" style="position: display:"&
&ul id="m_add" onclick="addPrivilege();"&&li&增加&/li&&/ul&
&ul id="m_del" onclick="delPrivilege();"&&li&删除&/li&&/ul&
&ul id="m_del" onclick="editPrivilege();"&&li&编辑&/li&&/ul&
&ul id="m_del" onclick="queryPrivilege();"&&li&查看&/li&&/ul&
③页面加载时生成树并且监听鼠标点击事件，及时隐藏右键菜单
function reloadTree() {
hideRMenu();
zTree = $("#tree").zTree(setting, treeNodes);
var treeNodes = [];
$(function() {
reloadTree();
$("body").bind(//鼠标点击事件不在节点上时隐藏右键菜单
"mousedown",
function(event) {
if (!(event.target.id == "rMenu" || $(event.target)
.parents("#rMenu").length & 0)) {
$("#rMenu").hide();
④后台代码根据id获取树节点信息
-----------------------Action层-----------------------
public void doGetPrivilegeTree() throws IOException{
String sId = request.getParameter("id");
int treeId = 0;
if(sId!=null&&!"".equals(sId)){
treeId = Integer.parseInt(sId);
List&Privilege& lstPriv = privilegeService.findPrivilegeTreeById(treeId);
response.setCharacterEncoding("UTF-8");
response.getWriter().print(JSONArray.fromObject(lstPriv).toString());
-----------------------Service层-----------------------
* 根据节点id，查询其下级节点的数据
@SuppressWarnings("unchecked")
public List&Privilege& findPrivilegeTreeById(int treeId) {
StringBuffer sbTree= new StringBuffer();
sbTree.append("SELECT NEW Privilege(p.id,p.privName,p.description,p.status,p.isLeaf,p.parentId) FROM Privilege p ");
sbTree.append("WHERE p.parentId=:treeId ");
sbTree.append("AND p.status!=:del ");
Map&String,Object& mapTree = new HashMap&String, Object&();
mapTree.put("treeId", treeId);
mapTree.put("del", Privilege.PRIV_STATUS_DELETE);
return (List&Privilege&) privilegeDao.findByHql(sbTree.toString(), mapTree);
⑤最后查看效果：
下载次数: 4061
浏览 124737
Jabbar2011 写道如果我拖拽一个节点或者修改一个节点并提交修改的数据到后台，然后后台报错了，我前台的节点树如何撤销操作？？？？？zTree也支持拖拽吗?最近自己实现了一个简单的拖拽的树形菜单，问题好多呀!而已不知道怎么保存最后选中树形菜单数据。肯定支持拖拽了，你可以到zTree的ItEye博客去提问，他在ItEye有博客的
如果我拖拽一个节点或者修改一个节点并提交修改的数据到后台，然后后台报错了，我前台的节点树如何撤销操作？？？？？zTree也支持拖拽吗?最近自己实现了一个简单的拖拽的树形菜单，问题好多呀!而已不知道怎么保存最后选中树形菜单数据。
不好意思哦，本来打算点“顶”的，鼠标一滑，变成“踩”了，文章不错，谢谢
我去
引用引用引用
不显示图标还有body里面的那一句代码也要说明啊在开发中，把ztree整个文件夹都放在项目中。这些代码我弄丢了，你自己按照pdf研究下吧，不好意思哈...
浏览: 972127 次
来自: 成都
root的值是什么，是什么路径，能提供一下吗？
[url] [/url]
[*]& target=&_blank&q ...
写的不错，学习了jQuery EasyUI 教程
jQuery EasyUI 树形菜单 - 树形网格动态加载
动态加载树形网格有助于从服务器上加载部分的行数据，避免加载大型数据的长时间等待。本教程将向您展示如何创建带有动态加载特性的树形网格（TreeGrid）。
创建树形网格（TreeGrid）
&table title="Products" class="easyui-treegrid" style="width:700height:300px"
url="treegrid3_getdata.php"
rownumbers="true"
idField="id" treeField="name"&
&th field="name" width="250"&Name&/th&
&th field="quantity" width="100" align="right"&Quantity&/th&
&th field="price" width="150" align="right" formatter="formatDollar"&Price&/th&
&th field="total" width="150" align="right" formatter="formatDollar"&Total&/th&
服务器端代码 treegrid3_getdata.php
$id = isset($_POST['id']) ? intval($_POST['id']) : 0;
include 'conn.php';
$result = array();
$rs = mysql_query("select * from products where parentId=$id");
while($row = mysql_fetch_array($rs)){
$row['state'] = has_child($row['id']) ? 'closed' : 'open';
$row['total'] = $row['price']*$row['quantity'];
array_push($result, $row);
echo json_encode($result);
function has_child($id){
$rs = mysql_query("select count(*) from products where parentId=$id");
$row = mysql_fetch_array($rs);
return $row[0] & 0 ? true :
下载 jQuery EasyUI 实例
关注微信下载离线手册jQuery+zTree加载树形结构菜单
由于项目中需要设计树形菜单功能，于是百度找相关资料，发现zTree方面的资料不少，觉得挺不错，而且zTree官方也有API文档，介绍的非常详细，经过一番捣腾之后，终于给弄出来了，所以便记下来，也算是学习zTree的一个总结吧。
zTree的介绍：
1、zTree 是利用 JQuery 的核心代码，实现一套能完成大部分常用功能的 Tree 插件
2、zTree v3.0 将核心代码按照功能进行了分割，不需要的代码可以不用加载
3、采用了 延迟加载 技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀
4、兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器
5、支持 JSON 数据
6、支持静态 和 Ajax 异步加载节点数据
7、支持任意更换皮肤 / 自定义图标（依靠css）
8、支持极其灵活的 checkbox 或 radio 选择功能
9、提供多种事件响应回调
10、灵活的编辑（增/删/改/查）功能，可随意拖拽节点，还可以多节点拖拽哟
11、在一个页面内可同时生成多个 Tree 实例
12、简单的参数配置实现 灵活多变的功能
核心的函数和属性介绍：
核心：zTree(setting, [zTreeNodes])
这个函数接受一个JSON格式的数据对象setting和一个JSON格式的数据对象zTreeNodes，从而建立 Tree。
核心参数：setting
zTree 的参数配置都在这里完成，简单的说：树的样式、事件、访问路径等都在这里配置
setting 举例:
var setting = {
showLine: true,
checkable: true
因为参数太多，具体参数详见zTreeAPI
核心参数：zTreeNodes
zTree 的全部节点数据集合，采用由JSON对象组成的数据结构，简单的说：这里使用Json格式保存了树的所有信息
1、zTree官方网站：http://www.ztree.me/v3/main.php#_zTreeInfo
在官网能够到zTree的、实例和API，其中作者pdf的API写得非常详细
关于zTree的节点数据的获取方式分为静态（直接定义）的和动态（后台加载）的
具体的配置步骤：
第一步 ―― 引入相关文件
&script type="text/javascript" src="js/jQuery/jquery-1.9.1.min.js"&&/script&
&script type="text/javascript" src="ztree/js/jquery.ztree.core-3.5.min.js"&&/script&
&script type="text/javascript" src="ztree/js/jquery.ztree.excheck-3.5.min.js"&&/script&
1、第一个（zTreeStyle.css）是zTree的样式css文件，引入了这个，才能呈现出树形的结构样式，
2、第二个（jquery-1.9.1.min.js）是jQuery文件，因为要用到，
3、第三个（jquery.ztree.core-3.5.min.js）则是zTree的核心js文件，这个是必须的，
4、最后一个（js/jquery.ztree.excheck-3.5.min.js）则是拓展文件，主要用于单选框和复选框的功能，因为用到了复选框，所以也要要引进来。
第二步 ―― 相关配置（具体的详细配置，请到官网参考详细API文档）
var setting = {
dblClickExpand: false,//双击节点时，是否自动展开父节点的标识
showLine: true,//是否显示节点之间的连线
fontCss:{'color':'black','font-weight':'bold'},//字体样式函数
selectedMulti: false //设置是否允许同时选中多个节点
//chkboxType: { "Y": "ps", "N": "ps" },
chkStyle: "checkbox",//复选框类型
enable: true //每个节点上是否显示 CheckBox
simpleData: {//简单数据模式
enable:true,
idKey: "id",
pIdKey: "pId",
rootPId: ""
callback: {
beforeClick: function(treeId, treeNode) {
zTree = $.fn.zTree.getZTreeObj("user_tree");
if (treeNode.isParent) {
zTree.expandNode(treeNode);//如果是父节点，则展开该节点
zTree.checkNode(treeNode, !treeNode.checked, true, true);//单击勾选，再次单击取消勾选
第三步 ―― 节点数据加载，呈现树形结构
1、页面，直接放一个ul就可以，数据最终会自动加载到这个ul元素里面
2、js中进行数据的加载
一，静态方式（直接定义）
var zNodes =[
{ id:1, pId:0, name:"test 1", open:false},
{ id:11, pId:1, name:"test 1-1", open:true},
{ id:111, pId:11, name:"test 1-1-1"},
{ id:112, pId:11, name:"test 1-1-2"},
{ id:12, pId:1, name:"test 1-2", open:true},
$(document).ready(function(){
$.fn.zTree.init($("#user_tree"), setting, zNodes);
function onCheck(e,treeId,treeNode){
var treeObj=$.fn.zTree.getZTreeObj("user_tree"),
nodes=treeObj.getCheckedNodes(true),
for(var i=0;i<nodes.i++){
v+=nodes[i].name + ",";
alert(nodes[i].id); //获取选中节点的值
二、动态方式（从后台数据库加载）
* 页面初始化
$(document).ready(function(){
onLoadZTree();
* 加载树形结构数据
function onLoadZTree(){
async:false,//是否异步
cache:false,//是否使用缓存
type:'POST',//请求方式：post
dataType:'json',//数据传输格式：json
url:$('#ctx').val()+"SendNoticeMsgServlet?action=loadUserTree",//请求的action路径
error:function(){
//请求失败处理函数
alert('亲，请求失败！');
success:function(data){
console.log(data);
//请求成功后处理函数
treeNodes =//把后台封装好的简单Json格式赋给treeNodes
var t = $("#user_tree");
t = $.fn.zTree.init(t, setting, treeNodes);
java后台加载数据代码：
1、定义tree的VO类，这个也可以不用定义，由于我要用到其他操作，方便一些
* zTree树形结构对象VO类
* @author Administrator
public class TreeVO {
private S//节点id
private String pId;//父节点pId I必须大写
private S//节点名称
private String open = "false";//是否展开树节点，默认不展开
public String getId() {
public void setId(String id) {
public String getpId() {
return pId;
public void setpId(String pId) {
this.pId = pId;
public String getName() {
public void setName(String name) {
this.name =
public String getOpen() {
public void setOpen(String open) {
this.open =
2、查询数据库，并且sql的结构字段也要是id,pId,name,open(可选)这种格式（注意：pId中间的I必须大写），然后将结果封装到TreeVO类中。
* 加载树形结构数据
* @param request
* @param response
* @throws IOException
public void loadUserTree(HttpServletRequest request, HttpServletResponse response) throws IOException{
WeiXinUserService weixinUserService = new WeiXinUserServiceImpl();
List user_tree_list = weixinUserService.getUserTreeList();
String treeNodesJson = JSONArray.fromObject(user_tree_list).toString();//将list列表转换成json格式 返回
PrintWriter out = response.getWriter();
//利用Json插件将Array转换成Json格式
out.print(treeNodesJson);
//释放资源
out.close();
这里就完成了整个操作了，O，文笔不好，组织语言自然就不怎么样了，大家见谅！共同学习，共同成长！java jquery-easyui，实现树形菜单加载，感谢您的帮助_百度知道
java jquery-easyui，实现树形菜单加载，感谢您的帮助
使用easyui 通过树形菜单实现加载本地文件目录，不知如何实现，请大神们给个例子指点指点
