`
zzc1684
  • 浏览: 1224415 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

Jquery zTree演示程序Demo总结

阅读更多

 

Demo 演示

http://www.ztree.me/v3/demo.php

 

前言:
最近的项目需要用到zTree树,于是想将zTree树总结一下。前段时间一直没有时间总结,趁国庆还有这么点时间,总结一下。zTree树控件是基于Jquery的,官方提供了很好的API文档和Demo

用户可以从如下地址下载:http://www.ztree.me/hunter/zTree.html

1.帮助文档和API
zTree的帮助文档和API都是非常全面的,只是有些Demo的后台是用PHP写的,因此,如果想看更加全面的Demo的话,最好将帮组文档发布到本地的Apache服务器上。
2.用一个Demo来演示Jquery zTree的功能
要点:
2.1 zTree树的数据源为JSON格式
2.2 zTree树控件的信息是通过请求url动态加载的
2.3 zTree树的onClick函数,点击树的任意一个节点后
,就会调用
3.Demo演示
3.1 页面布局

为了能较为全面的演示zTree树的功能,布局大致如下,左边是树行结构,右边是主页面。

index.jsp的代码如下:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
  String path = request.getContextPath();
  String basePath = request.getScheme() + "://"
      + request.getServerName() + ":" + request.getServerPort()
      + path + "/";
%>
<!DOCTYPE html>
<html>
  <head>
    <title>Jquery zTree</title>
    <link rel="stylesheet" type="text/css" href="css/easyui.css">
      <link rel="stylesheet" type="text/css" href="css/icon.css" />
      <link rel="stylesheet" type="text/css" href="css/main.css" />
    <link rel="stylesheet" type="text/css" href="zTree/css/zTreeStyle/zTreeStyle.css"/>
    <link rel="stylesheet" type="text/css" href="zTree/css/demo.css"/>
    <script type="text/javascript" src="js/jquery.min.js"></script>
      <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
      <script type="text/javascript" src="zTree/js/jquery.ztree.all-3.5.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
  </head>
  <body id="main" class="easyui-layout">
    <div data-options="region:'west',split:true" title="Jquery zTree演示" style="width: 180px;  overflow: auto; ">
      <div class="easyui-accordion" data-options="fit:true,border:false">
        <div style="z-index:12754; border: 1px solid lightgray; background: white; width: 150px; height: 35px; display: none; padding: 4px;" id="treeLoadMsg">
          <img src="images/loading.gif" style="vertical-align: middle;" width="32" height="32"/>
          <span>Loading...</span>
        </div>
            <ul id="treeDemo" class="ztree"></ul>
      </div>
    </div>
    <div data-options="region:'center'" title="main" style="overflow: hidden;">
      <iframe id="iframepage" src="default.jsp" style=" background: white;border: 1px; width: 100%; height: 100%; padding: 0;"></iframe>
    </div>
  </body>
</html>

 为了不污染原有的静态页面,我们将index.jsp文件封装在index.js文件中,代码如下:(注意注释)

/**
 * 设置zTree树
 */
var setting = {
  async: {
    enable: true,
    url: getUrlByNodeId
  },
  check: {
    enable: false
  },
  data: {
    simpleData: {
      enable: true
    }
  },
  view: {
    expandSpeed: ""
  },
  callback: {
    beforeExpand: beforeExpand,
    onAsyncSuccess: onAsyncSuccess,
    onAsyncError: onAsyncError,
    onClick: zTreeOnClick
  }
};
var zNodes =[
  {name:"经典视频检索", id:"1",isParent:true,iconOpen:"zTree/css/zTreeStyle/img/diy/1_open.png", iconClose:"zTree/css/zTreeStyle/img/diy/1_close.png"},
  {name:"基于内容检索", id:"2",isParent:true,iconOpen:"zTree/css/zTreeStyle/img/diy/1_open.png", iconClose:"zTree/css/zTreeStyle/img/diy/1_close.png"},
  {name:"基于语义检索", id:"3",isParent:true,iconOpen:"zTree/css/zTreeStyle/img/diy/1_open.png", iconClose:"zTree/css/zTreeStyle/img/diy/1_close.png"}
];
/**
 * @author ZhengHaibo
 * 功能:通过NodeId获得节点的孩子节点
 * 调用:当父节点展开时,调用,返回该父节点的子节点
 * 后台数据格式:JSON
 * @param treeId 树控件的Id
 * @param treeNode 树节点对象:包含Id等信息
 * @return
 */
function getUrlByNodeId(treeId, treeNode) {
  return "getNodesDataById?treeNodeId="+treeNode.id;
}
/**
 * 展开之前执行的函数
 * @param treeId
 * @param treeNode
 * @return
 */
function beforeExpand(treeId, treeNode) {
  if (!treeNode.isAjaxing) {
    ajaxGetNodes(treeNode, "refresh");
    return true;
  } else {
    alert("Loading...");
    return false;
  }
}
/**
 * 加载成功后执行的函数
 * @param event 封装了js的事件
 * @param treeId 树控件的Id
 * @param treeNode 树节点对象
 * @param msg 返回的JSON格式的消息
 * @return
 */
function onAsyncSuccess(event, treeId, treeNode, msg) {
    console.log("treeId");
    console.log(treeId);
    console.log("treeNode");
    console.log(treeNode);
    console.log("msg");
    console.log(msg);
  if (!msg || msg.length == 0) {
    return;
  }
  var zTree = $.fn.zTree.getZTreeObj("treeDemo");
  treeNode.icon = "";
  zTree.updateNode(treeNode);//更新树结构
  zTree.selectNode(treeNode.children[0]);//设置为第一个子节点为选中状态
}
function onAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
  var zTree = $.fn.zTree.getZTreeObj("treeDemo");
  alert("Error ! 异步获取数据异常");
  treeNode.icon = "";
  zTree.updateNode(treeNode);
}
function ajaxGetNodes(treeNode, reloadType) {
  var zTree = $.fn.zTree.getZTreeObj("treeDemo");
  if (reloadType == "refresh") {
    treeNode.icon = "zTree/css/zTreeStyle/img/loading.gif";
    zTree.updateNode(treeNode);
  }
  zTree.reAsyncChildNodes(treeNode, reloadType, true);
}
/**
 * 功能:当点击树节点时,调用该函数
 * @param event
 * @param treeId
 * @param treeNode
 * @return
 */
function zTreeOnClick(event, treeId, treeNode) {
    console.log("zTreeOnClickLog:--------------------------------")
    console.log(treeId);
    console.log(treeNode);
    console.log(treeNode.id);
    switch(treeNode.id+""){//根据树节点的Id判断
    case "1":
    case "11":
    	document.getElementById("iframepage").src="tree_click_page.jsp?treeNodeId="+treeNode.id;
    	break;
    case "12":
    	document.getElementById("iframepage").src="tree_click_page.jsp?treeNodeId="+treeNode.id;
    	break;
    case "13":
    	document.getElementById("iframepage").src="tree_click_page.jsp?treeNodeId="+treeNode.id;
    	break;
    case "2":
    case "21":
    	document.getElementById("iframepage").src="tree_click_page.jsp?treeNodeId="+treeNode.id;
    	break;
    case "22":
    	document.getElementById("iframepage").src="tree_click_page.jsp?treeNodeId="+treeNode.id;
    	break;
    case "23":
    	document.getElementById("iframepage").src="tree_click_page.jsp?treeNodeId="+treeNode.id;
    	break;
    case "24":
    	document.getElementById("iframepage").src="tree_click_page.jsp?treeNodeId="+treeNode.id;
    	break;
    case "3":
    case "31":
    	document.getElementById("iframepage").src="tree_click_page.jsp?treeNodeId="+treeNode.id;
    	break;
    }
}
$(document).ready(function(){
  $.fn.zTree.init($("#treeDemo"), setting, zNodes);//初始化zTree树
});

 

3.2后台
后台用的是Struts2框架,在struts.xml文件中设置好Action,根据前台节点的不同id号返回不同JSON格式的数据

/*
 * $filename: ZTreeDemoAction.java,v $
 * $Date: Sep 27, 2013  $
 * Copyright (C) ZhengHaibo, Inc. All rights reserved.
 * This software is Made by Zhenghaibo.
 */
package edu.njupt.zhb.ztree.action;

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts2.ServletActionContext;
import com.opensymphony.xwork2.ActionSupport;


/*
 *@author: ZhengHaibo  
 *web:     http://blog.csdn.net/nuptboyzhb
 *mail:    zhb931706659@126.com
 *Sep 27, 2013  Nanjing,njupt,China
 */
public class ZTreeDemoAction extends ActionSupport{
  /**
   * 
   */
  private static final long serialVersionUID = -3318989776253565435L;
    
  private int treeNodeId;//保存树节点的Id
  /**
   * 返回树的根节点的Json格式数据
   * @return
   */
  public String getNodesDataById(){
    System.out.println("treeNodeId = "+treeNodeId);
    String iconPath = ",icon:\"zTree/css/zTreeStyle/img/diy/3.png\"";
    String icon2Path = ",icon:\"zTree/css/zTreeStyle/img/diy/2.png\"";
    String icon9Path = ",icon:\"zTree/css/zTreeStyle/img/diy/9.png\"";
    String lookIconPath = ",icon:\"zTree/css/zTreeStyle/img/diy/8.png\"";
    String nodesJson = "";
    if (treeNodeId == 1) {
      nodesJson = "[{id:11, pId:"+treeNodeId+", name: \"综合检索\",isParent:false"+iconPath+"}," +
            "{id:12, pId:"+treeNodeId+", name: \"视频时间\",isParent:false"+iconPath+"}," +
            "{id:13, pId:"+treeNodeId+", name: \"视频地点\",isParent:false"+iconPath+"}" +
            "]";
    }else if(treeNodeId == 2) {
      nodesJson = "[{id:21, pId:"+treeNodeId+", name: \"生成索引\",isParent:false"+icon2Path+"}," +
            "{id:22, pId:"+treeNodeId+", name: \"上传图像\",isParent:false"+iconPath+"}," +
            "{id:23, pId:"+treeNodeId+", name: \"图像URL\",isParent:false"+iconPath+"}," +
            "{id:24, pId:"+treeNodeId+", name: \"查看索引\",isParent:false"+lookIconPath+"}" +
            "]";
    }else if (treeNodeId == 3) {
      nodesJson = "[{id:31, pId:"+treeNodeId+", name: \"语义检索\",isParent:false"+icon9Path+"}]";
    }else{
      nodesJson = "[]";//其他情况:父节点没有子节点
    }
    getPrintWriter().write(nodesJson);
    return SUCCESS;
  }
  
  /**
   * 获得HttpServletResponse对象
   * @return
   */
  public static HttpServletResponse getResponse() {
    HttpServletResponse response = ServletActionContext.getResponse();
    response.setContentType("text/html;charset=UTF-8");
    return response;
  }
  
  public PrintWriter getPrintWriter() {
    PrintWriter pw = null;
    try {
      pw = getResponse().getWriter();
    } catch (IOException e) {
      e.printStackTrace();
    }
    return pw;
  }

  public int getTreeNodeId() {
    return treeNodeId;
  }

  public void setTreeNodeId(int treeNodeId) {
    this.treeNodeId = treeNodeId;
  }
}

 4.页面效果

分享到:
评论

相关推荐

    JQuery zTree源码以及示例

    1. **Demo** 文件夹通常包含多个HTML示例文件,演示了zTree的各种应用场景和功能。例如,基础的树形展示、异步加载数据、节点操作(添加、删除、修改)、节点状态管理(选中、禁用、半选)等。通过运行和修改这些...

    JQuery zTree

    总的来说,jQuery zTree 是一个功能强大、易用的 jQuery 树形插件,通过其丰富的 API 和演示示例,开发者可以轻松地在网页中创建出满足需求的树形组件。无论是简单的目录展示还是复杂的业务逻辑,zTree 都能提供完善...

    jquery ztree学习文档

    下面介绍一下zTree 的主要功能:( 演示Demo 请访问 个人站点) 1、兼容 IE、FireFox、Chrome 等浏览器(对于IE 6.0的兼容问题将不做特殊维护) 2、在一个页面内可同时生成多个 Tree 实例 3、支持 JSON 数据 4...

    jQuery zTree v3.5.15 api

    4. **权限控制**:演示了如何利用zTree进行权限展示和操作,如勾选权限、拖拽权限等。 5. **自定义样式和图标**:通过设置CSS类或图标URL,可以实现个性化树的样式。 6. **多棵树的联动**:当页面上有多个zTree时...

    JQuery zTree v3.4 ztree

    - `demo`:包含多个演示实例,演示如何使用 zTree 实现各种功能。 总的来说,JQuery zTree v3.4 是一个强大且灵活的树形控件,能够为开发者提供便捷的方式来构建和管理树形数据结构。无论是在后台管理系统还是前端...

    JQuery zTree v2.6

    7. **Demo示例**:提供的`demo`文件夹中,包含了各种应用场景的实例代码,帮助开发者快速理解和使用zTree,涵盖了基础操作到高级功能的演示。 在使用zTree v2.6时,开发者需要注意以下几点: - **数据准备**:要...

    JQuery zTreeV3附DEMO

    **jQuery zTreeV3** 是一个非常流行的前端插件,专用于在网页上展示树形结构数据。这个开源工具以其强大的功能和灵活性深受开发者喜爱,广泛应用于网站的导航菜单、组织结构展示、文件目录管理等多个场景。在描述中...

    JqueryZtreeDemo演示程序

    **jQuery ZTree 演示程序详解** jQuery ZTree 是一款基于 jQuery 的树形插件,它具有丰富的功能和良好的可扩展性,广泛应用于网站的导航、目录展示、权限管理等多个场景。`JqueryZtreeDemo` 演示程序是为开发者提供...

    JQuery zTree v3.5.rar

    6. **demo**:演示示例提供了如何使用zTree的实际代码,帮助开发者快速上手和调试。 ### 四、使用步骤 1. **引入依赖**:首先需要在页面中引入jQuery库和zTree的JS与CSS文件。 2. **准备数据**:定义节点数据,...

    jquery zTree

    JQuery zTree插件 下面是 v3.5.13 的修改记录: * 【增加】beforeRename & onRename 增加 isCancel 参数,可以监控用户 ESC 取消编辑的事件 ...zTree 在线操作演示:http://www.ztree.me/v3/demo.php#_101

    Jquery Ztree动态树

    **jQuery ZTree 动态树详解** jQuery ZTree是一款基于jQuery的优秀树形插件,它具有丰富的功能、良好的性能和灵活的配置选项,适用于构建各种类型的树形结构,如组织架构、文件目录、菜单导航等。在网页开发中,...

    JQuery zTree v3.5.14

    压缩包中的"JQuery zTree v3.5.14"很可能包含了演示示例和详细文档。通过这些资源,你可以更深入地了解zTree的用法,学习如何自定义节点样式、配置事件处理函数、实现异步加载等功能。文档通常会详细解释每个API、...

    Ztree的官方demo

    **zTree官方演示详解** zTree是一款基于jQuery的开源JavaScript库,专为构建多样的树状结构而设计。它的核心特点在于高效的性能、高度可定制的配置以及丰富的功能集,使其在网页应用中广泛用于展示层次结构的数据,...

    JQuery zTree 2.0 一个非常好用的jQuery树插件

    总结,jQuery zTree 2.0是一款强大且易用的树形插件,它提供了丰富的功能和良好的可扩展性,是前端开发中处理树形数据的得力工具。配合其详尽的API文档和示例代码,开发者能够轻松集成并实现各种定制化需求。

    JQuery zTree v3.5.15.zip

    3. **demo**:这是一个演示目录,展示了zTree的各种使用方法和效果。开发者可以通过查看这些示例,学习如何配置和调用zTree的方法,实现所需的树形结构功能。每个示例通常包含HTML、CSS和JavaScript代码,便于理解和...

    ztree官网参考文档及demo

    本文将深入解析zTree的核心概念,介绍其基本使用方法,并通过示例代码演示如何实现一个zTree树。 一、zTree简介 zTree是一个基于jQuery的树形插件,它能够快速构建出各种类型的树形结构,如文件目录树、组织架构树...

    zTree树控件Demo

    zTree是一款广泛应用于Web开发中的JavaScript树形控件,它基于jQuery库,提供了丰富的功能和灵活的配置选项,便于开发者构建交互式的树形结构。在"zTree树控件Demo"中,我们可以深入理解并实践zTree的核心特性,包括...

    jquery ztree

    - **demo**:包含示例代码和演示,是学习和理解ZTree用法的好地方。 总之,jQuery ZTree是一个强大且灵活的树形插件,适用于各种应用场景,如菜单系统、文件管理器等。通过深入理解和熟练使用,开发者可以轻松构建...

    针对Ztree的右键弹出菜单(jquery.popupSmallMenu.js)

    在描述中提到的“demo”和“博文链接:https://tianqiushi.iteye.com/blog/2103791”,是指有一个示例或者教程可以参考,该链接指向的是一个ITeye博客文章,作者分享了关于如何在ZTree中使用`jquery.popupSmallMenu....

Global site tag (gtag.js) - Google Analytics