`
hzywy
  • 浏览: 168686 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

ztree 小实例

ztree 
阅读更多

今天搞了一下ztree这个开源的东东，感觉很不错，很强大。下面我就分享我自己做的小例子。当然也是参考网上很多牛人写的代码，自己实现了一个。

我是基于struts2.0来做得

action：

package com.action;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;

import org.apache.struts2.ServletActionContext;

import com.opensymphony.xwork2.ActionContext;
import com.opensymphony.xwork2.ActionSupport;

public class ZtreeAction extends ActionSupport {

/**
*
*/
private static final long serialVersionUID = 1L;

public void jsonAction() throws IOException{
String s1 = "{id:1, pId:0, name:\"test1\" , open:true}";
String s2 = "{id:2, pId:1, name:\"test211\" , open:true}";
String s3 = "{id:3, pId:2, name:\"test311\" , open:true}";
String s4 = "{id:4, pId:1, name:\"test411\" , open:true}";
List<String> listZtree = new ArrayList<String>();
listZtree.add(s1);
listZtree.add(s2);
listZtree.add(s3);
listZtree.add(s4);
//获取response
ActionContext context = ActionContext.getContext();
HttpServletResponse response = (HttpServletResponse) context.get(ServletActionContext.HTTP_RESPONSE);
response.getWriter().print(JSONArray.fromObject(listZtree).toString());

}
}
struts.xml:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd ">
<struts>
<package name="ztree" extends="struts-default">
<action name="jsonAction" class="com.action.ZtreeAction" method="jsonAction">

</action>

</package>
</struts>
index.xml:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="<%=basePath %>js/jquery-1.4.2.js"></script>
<link rel="stylesheet" type="text/css" href="<%=basePath %>css/zTreeStyle.css">
<script type="text/javascript" src="<%=basePath %>js/jquery-ztree-2.5.min.js"></script>
<%-- <script type="text/javascript" src="<%=basePath %>js/jquery.ztree.core-3.0.min.js"></script>--%>

<script type="text/javascript">

var setting = {
isSimpleData : true, //数据是否采用简单 Array 格式，默认false
treeNodeKey : "id", //在isSimpleData格式下，当前节点id属性
treeNodeParentKey : "pId", //在isSimpleData格式下，当前节点的父节点id属性
showLine : true, //是否显示节点间的连线
checkable : true, //每个节点上是否显示 CheckBox
callback : {
click: zTreeOnClick //回调函数

},

};
function zTreeOnClick(event, treeId, treeNode) {
alert("treeId="+treeId);
alert(treeNode.tId + ", " + treeNode.name);
if(treeNode.tId=="tree_4"){
alert("你点击了test4");
}
}
var zTree;
var treeNodes;
<%-- var treeNodes = [--%>
<%-- {"id":1, "pId":0, "name":"test1"}, --%>
<%-- {"id":11, "pId":1, "name":"test11"}, --%>
<%-- {"id":12, "pId":11, "name":"test12"}, --%>
<%-- {"id":111, "pId":11, "name":"test111"}, --%>
<%--];--%>
$(document).ready(function(){
$.ajax({
async : false,
cache:false,
type: 'POST',
dataType : "json",
url: "jsonAction.action",//请求的action路径
error: function () {//请求失败处理函数
alert('请求失败');
},
success:function(data){ //请求成功后处理函数。
alert("获取数据成功");
treeNodes = data; //把后台封装好的简单Json格式赋给treeNodes
}
});

zTree = $("#tree").zTree(setting, treeNodes);
});

</script>
</head>

<body>
<%-- <div id="tree"></div>--%>
<ul id="tree" class="tree" style="width:300px; overflow:auto;"></ul>

</body>
</html>

分享到：
| WebBrowser是IE内置的浏览器控件（打印相关 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    zTree 3.0 实例下载

    **zTree 3.0 实例详解** zTree是一款基于JavaScript的树形插件，广泛应用于网页中的数据展示，如文件目录、组织架构等场景。zTree 3.0是其一个重要的版本，提供了丰富的功能和高度的自定义性。在实际开发中，拥有...

    ztree完整实例,绝对可运行

    本"ztree完整实例,绝对可运行"压缩包提供了ZTree的完整运行环境，无需复杂的配置，只需简单导入Eclipse即可运行，非常适合初学者学习和快速开发。 在ZTree的实例中，主要包含以下几个关键知识点： 1. **ZTree基本...

    ZTREE.net实例

    本实例展示了如何在.NET应用中动态加载数据，并将其呈现为ZTREE的节点，从而提升用户界面的交互性和可操作性。让我们深入探讨这个过程。 首先，ZTREE的核心在于其JSON数据格式。在.NET应用中，我们需要创建一个...

    ztree所有实例+api

    这些文件是构建zTree实例的基础，开发者需要正确引入它们到自己的项目中，才能正常使用zTree。 总结来说，zTree v3作为一款强大的JavaScript树形插件，提供了丰富的实例和详细的API，无论是对于初学者还是有经验的...

    Ztree完整实例

    - **初始化**：通过`$.fn.zTree.init()`方法创建ZTree实例，传入DOM元素和配置对象。 - **操作API**：ZTree提供了丰富的API，如`treeObj.selectNode()`选择节点，`treeObj.expandNode()`展开节点。 - **事件绑定*...

    ztree小例子

    在这个"ztree小例子"中，我们将探讨如何使用最新版本的jquery.ztree-2.6.js来创建一个功能完备的zTree实例。 首先，我们需要了解zTree的基本概念。zTree的核心在于将HTML结构转化为具有交互性的树形数据展示，它...

    ztree 开发实例

    《zTree开发实例详解》 在Web开发中，zTree是一款非常流行的jQuery插件，它主要用于构建可交互的树形结构，广泛应用于菜单、组织结构、文件目录等场景。本实例将详细介绍如何利用zTree结合数据库，实现动态数据加载...

    SSH 做的ztree实例

    在本次的"SSH 做的ztree实例"中，ztree是一个基于JavaScript的树形菜单组件，常用于展示层级结构的数据，如目录结构、组织架构等。Ztree以其良好的交互性和灵活性深受开发者喜爱，它可以轻松实现节点的增删改查、...

    zTreeAPI、实例及样式

    **zTree API、实例及样式详解** zTree是一款基于JavaScript的树形插件，它具有丰富的API接口和灵活的配置选项，广泛应用于网页中的数据展示、菜单导航、组织结构图等场景。本篇将深入探讨zTree的核心特性、API用法...

    JQuery zTree asp.net实例

    **jQuery zTree ASP.NET 实例详解** 在Web开发中，我们常常需要展示层次结构的数据，例如组织架构、文件目录等，这时Tree控件就显得尤为重要。`jQuery zTree`是一款非常流行的JavaScript Tree插件，它提供了丰富的...

    新建文件夹_ztree实例_双边拍卖_最后通牒_

    这个“新建文件夹_ztree实例_双边拍卖_最后通牒_”的压缩包可能包含了一些使用ZTree实现特定功能的示例代码，如双边拍卖和最后通牒机制的模拟。下面我们将详细探讨这些概念以及它们与ZTree的结合应用。 1. **ZTree*...

    (附数据库脚本)jQuery Ztree实例

    通过解压并运行这个项目，你可以看到一个完整的jQuery Ztree实例，它展示了如何从数据库动态加载数据、显示树结构以及响应节点点击事件。 总的来说，jQuery Ztree 结合数据库脚本，为开发者提供了一种灵活且功能...

    一个zTree实例

    在这个"一个zTree实例"中，我们将探讨如何结合SSH（Spring、Struts2、Hibernate）框架，实现zTree的功能，包括增、删、改操作，并通过MySQL数据库来动态获取和存储数据，同时提供一个直观的后台查看效果。...

    jfinal ztree实例

    **JFinal ZTree 实例详解** JFinal 是一个基于 Java 的轻量级 Web 开发框架，它以 MVC（Model-View-Controller）架构为基础，旨在提高开发效率，降低开发成本。ZTree 是一款广泛使用的 JavaScript 树状菜单插件，...

    ztree实现权限树实例

    本实例将详细讲解如何利用ZTree实现权限树，实现父子菜单级联以及选中子菜单时自动关联父菜单的功能。 首先，我们需要了解ZTree的基本使用。ZTree的核心思想是通过JSON数据结构来定义树形节点，每个节点包含ID、...

    Ztree官方API及实例教程

    zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。专门适合项目开发，尤其是 树状菜单、树状数据的Web显示、...其中压缩包包括完整的官方文档和实例教程。

    ztree树形控件实例

    《zTree树形控件实例解析与应用》 在网页开发中，树形控件是一种常见且实用的用户界面元素，它能够清晰地展示层级关系数据，如文件系统、组织结构等。zTree是一款基于JavaScript的开源树形控件，它结合了ajax和json...

    zTree异步加载简单示例VS2008项目完整源码

    这个"zTree异步加载简单示例VS2008项目完整源码"是针对开发人员的一个实用资源，提供了如何在Visual Studio 2008环境下实现zTree异步加载功能的具体代码实例。 异步加载（Async Loading）是zTree的核心特性之一，它...

    基于struts2做的ztree实例

    基于struts2，用json传值，用jquery的ztree做了一棵树，后台用的Oracle,包里面有建表语句。因为之前也没有用过struts2,json,ztree，正好学学struts2，在包crud里面是增删改查，从官网上比着弄的，crud2是自己从网上...

Magicbox
Global site tag (gtag.js) - Google Analytics