ztree 小实例

最新推荐文章于 2021-03-10 00:05:31 发布

hzywy123456

最新推荐文章于 2021-03-10 00:05:31 发布

阅读量82

点赞数

分类专栏： java web 开发文章标签： ztree

本文链接：https://blog.csdn.net/hzywy123456/article/details/84268211

版权

java web 开发专栏收录该内容

25 篇文章 0 订阅

订阅专栏

今天搞了一下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">

<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>