`
hzywy
  • 浏览: 166120 次
  • 性别: 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 样例包括api虽然很全面，少了这个demo实例还是不方便，一定要下载下来哦。

    ztree完整实例,绝对可运行

    ztree 完整 实例,绝对可运行,直接导入ecllipse就可运行

    ZTREE.net实例

    .net动态加载的实例，实现从后台提取数据，形成ZTREE。

    ztree所有实例+api

    ztree v3所有实例演示+api含中文demo。树结构用法大全

    Ztree完整实例

    ztree,ztree教程,ztree实例,ztree源码，完整实例附带jar包

    zTreeAPI、实例及样式

    zTree的相关资源 包括API、样例以及样式

    ztree小例子

    使用最新的jquery.ztree-2.6.js实现ztree小例子，可以下载使用

    ztree 开发实例

    (附数据库脚本)jQuery Ztree实例 已实现从数据库读取数据 已实现树节点的展示 已实现点击事件

    JqueryzTree实例

    Jquery zTree实例，静态获取zTree以及动态获取zTree实例

    JQuery zTree asp.net实例

    JQuery zTree是一个功能强大的Tree控件，这里使用asp.net实例了JQuery zTree数据加载，希望对大家有所帮助

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

    (附数据库脚本)jQuery Ztree实例 已实现从数据库读取数据 已实现树节点的展示 已实现点击事件

    基于struts2做的ztree实例

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

    SSH 做的ztree实例

    自己研究做的，有些功能还不完善，需要的自己可以研究下 里面有ztree API

    Ztree官方API及实例教程

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

    jfinal ztree实例

    使用jfinal开发的ztree小例子，没有其他特效，

    ztree实现权限树实例

    使用ztree实现权限树，父子菜单级联，选中子菜单、父菜单关联。

    一个zTree实例

    使用SSH对zTree实现增删改，动态从数据库获得，并带有数据库可以直接查看掩饰效果，数据库是mysql

    JqueryZtree v3.5整合ssh实例

    数据库：mysql（内附数据库文件，先新建同样名字的数据库，然后运行sql文件即可） ...JqueryZtree v3.5整合ssh实例,有注释,集成了tipsWindown弹出层插件,绝对原创，童叟无欺，闲暇之余做的小demo，5分绝不过分。

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

    ztree的例子--最后通牒，双边拍卖，很多很多，非常哟用

    JQuery zTree源码以及示例

    包括jQuery zTree v2.5的js源码jquery-ztree-2.5.js，API文档zTreeAPI v2.5.chm和zTreeAPI v2.5.pdf 以及示例demo

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