哎 最近公司项目里需要做组织架构功能,需要用jquery来生成树形菜单，在网上找了四五天,同事说jquery有treeview控件，于是,我在网上找啊找啊，找了好多 ，发现很多都不完整，弄得我花了好多时间，之前没深入接触过Jquery，所以不是很懂。弄了四五天，找来找去,还是那些，哎。同事说这个不难,我对自己也感到很自信。不过花了这么多天都没有一点结果,感觉好郁闷啊。突然，就在今天，那个动态树形菜单被弄出来了。呵呵，有点高兴哦！！！
我的页面时ftl的 不过没关系。一样用。
页面代码如下：（记得页面需要导入js文件【jquery.cookie.js,jquery.treeview.async.js,jquery.treeview.js,jquery.treeview.edit.js】）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>系统部门列表 - Powered By ${systemConfig.systemName}</title>
<meta name="Author" content="SHOP++ Team" />
<meta name="Copyright" content="SHOP++" />
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<#include "/WEB-INF/template/common/include.ftl">
<link href="${base}/template/admin/css/list.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="${base}/css/tree/jquery.treeview.css" type="text/css" />
<link rel="stylesheet" href="${base}/css/tree/screen.css" type="text/css"/>
<script type="text/javascript" src="${base}/template/admin/js/list.js"></script>
</head>
<body class="ie">
<frameset cols="50%,*" frameborder="1">
<frame src="" name="leftMenu">
<div id="tree" style="font-size:16px;">
</div>
</frame>
<frame src="" name="rightMenu">
</frame>
</frameset>
</body>
<script language="JavaScript">
$(document).ready(function(){
$("#tree").treeview({
collapsed: true,
animated: "medium",
url: "sys_department!treeList.action"
});
});
</script>
</html>
好了利用jquery的方法调用后台方法后就去action类：
/**
* 构造树形菜单
*
*/
public String treeList(){
try {
getResponse().getWriter().print(generateJTVJsonString());
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return null;
}
/**
* 产生jquery.treeview的jsonstring
*/
public String generateJTVJsonString() {
System.out.println("generateJTVJsonString start .....");
String id = getRequest().getParameter("root");
System.out.println("id:"+id);
String output = "";
if (id == null) {
return "";
} else if (id.equalsIgnoreCase("source")) {
output = generateInitTreeString();
} else {
output = generateTreeChildNodeString(id);
}
System.out.println("generateJTVJsonString end,return:"+output);
return output;
}
/**
* 产生子节点jsonstring
**/
private String generateTreeChildNodeString(String departmentId) {
StringBuilder jsonString = new StringBuilder();
jsonString.append("[");
List<SysDepartment> rootlist =sysDepartmentService.getDepartmentRootsById(departmentId);
if (rootlist.isEmpty())
return "";
int i = 0;
for (SysDepartment sysDepartment : rootlist) {
if (i > 0) {
jsonString.append(",");
}
jsonString.append(toJSONString(sysDepartment));
i++;
}
jsonString.append("]");
return jsonString.toString();
}
private String generateInitTreeString() {
StringBuilder jsonString = new StringBuilder();
jsonString.append("[");
List<SysDepartment> rootlist = getAllSysDepartments();
int i = 0;
for (SysDepartment sysDepartment : rootlist) {
if (i > 0) {
jsonString.append(",");
}
jsonString.append(toJSONString(sysDepartment));
i++;
}
jsonString.append("]");
return jsonString.toString();
}
// /**
// * 将对象转换成String
// * @param sysDepartment
// * @return
// */
private String toJSONString(SysDepartment sysDepartment) {
StringBuilder sb = new StringBuilder();
sb.append(" {");
sb.append(" \"text\": \"" + generateLinkString(sysDepartment) + "\"");
if (sysDepartmentService.getDepartmentRootsById(sysDepartment.getDepartmentId()).size()>0) {
sb.append(", \"id\":\"" + sysDepartment.getDepartmentId() + "\"");
sb.append(", \"hasChildren\":true");
}
sb.append(" }");
return sb.toString();
}
/**
* 设置超链接
* @param category
* @return
*/
private String generateLinkString(SysDepartment sysDepartment) {
String link = "<a href='sys_department!dedaoDepartmentById.action?id="+sysDepartment.getDepartmentId()+"' target='parent.rightMenu' >" + sysDepartment.getDepartmentName() + "</a>";
//link = category.getCatName();
return link;
}
还有需要样式以及存放js文件的文件夹：我打包了(注：压缩包里的文件夹放到webRoot下，js，css等都可以在文件夹里找到)
分享到：
相关推荐
在Struts中，可以通过Action来处理请求，返回JSON或XML格式的数据，jQuery则负责异步请求这些数据，并使用`$.ajax`或`$.getJSON`方法将接收到的数据转化为树节点，动态插入到HTML中。 **2. jQuery的树形插件** 在...
当用户展开或点击树形菜单的某个节点时，jQuery会发起Ajax请求，服务器根据请求返回相应的子节点信息，然后在客户端动态更新TreeView，显示新的子节点。 具体到源码，可能包括以下部分： 1. **前端部分**：使用...
总的来说，这个项目展示了如何结合使用jQuery Treeview进行前端展示，以及Struts2、Spring和Hibernate这三大Java EE框架进行后端处理，构建一个动态的、交互式的树状数据管理界面。理解并掌握这些技术对于提升Web...
在本项目中，我们探讨的是如何利用Struts2框架和AJAX技术动态地从数据库中获取数据，并生成交互式的树形菜单。树形菜单在Web应用中常见于导航系统，因为它能清晰地展示层次结构，方便用户浏览和操作。 首先，让我们...
本示例代码“jquery动态生成树”是关于如何利用jQuery和相关技术，如Struts2、treeview插件及JSON数据格式，来动态地在网页上构建一个可交互的目录树结构。 首先，让我们详细了解一下每个组件的作用： 1. **jQuery...
通过合理的数据库设计、高效的查询方式以及动态加载策略，可以在Struts2应用中实现功能丰富的树形结构，为用户提供直观、交互性强的界面。同时，对于大型项目，还可以考虑使用缓存机制来优化性能，减少对数据库的...
在描述中提到的“Struts2实现动态树结合Hibernate”，这意味着我们将讨论如何在Struts2中创建一个能够动态加载数据的树形结构，并利用Hibernate作为持久层框架来管理数据库交互。 动态树视图是一种用户界面元素，它...
在Java Web应用中，后台通常使用Spring MVC、Struts2或其他框架处理请求和返回JSON数据，前端使用jQuery插件解析并渲染成树形菜单。例如，使用Ajax请求获取目录结构，然后将结果传递给jQuery插件生成菜单。 7. **...
在本项目中，"struts2动态树形目录"实现了这一功能，用户可以通过界面动态地创建、编辑和删除目录。 首先，让我们深入了解一下Struts2框架。Struts2基于拦截器模式，提供了丰富的插件和拦截器，支持多种视图技术如...
"用TreeView加VS做动态树形菜单（带节点互斥）"可能是关于使用Visual Studio（VS）开发工具创建的树形菜单，同时实现了节点互斥功能。节点互斥意味着一次只能选择一个节点，这对于需要进行单一选择的场景非常有用，...
3. **控制器（Controller）**：Struts2的动作类（Action）作为控制器，负责处理用户的请求，如获取初始树结构、加载子节点或执行与树节点相关的业务操作。你需要在Action中编写方法来查询数据库或任何数据源，获取树...
8. **动态加载**：对于大型菜单系统，可以采用懒加载策略，只在用户展开某个节点时才加载其子节点，提高页面性能。 9. **可扩展性**：设计时应考虑菜单的增删改查操作，确保系统能支持动态维护菜单结构。 综上所述...
Struts2的配置文件中可以定义多个Action，以处理不同类型的请求，比如加载树节点、展开或折叠节点等。 Hibernate是对象关系映射（Object-Relational Mapping, ORM）框架，它简化了数据库操作。在树形结构中，数据...
例如，可以使用Struts2或Spring MVC框架中的日期插件来集成此类控件。 2. **分页控件**： 分页控件在大数据量展示时尤为重要，它允许用户按需加载数据，提高页面加载速度并优化用户体验。在JavaWeb中，分页可以...
EasyUI 是一个基于 jQuery 的前端框架，主要用于构建用户界面，尤其在企业级应用中非常常见。这个实例代码集合是某位开发者在学习 EasyUI 过程中编写的，旨在帮助他人理解和掌握 EasyUI 的核心功能和用法。下面将...