哎 最近公司项目里需要做组织架构功能,需要用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等都可以在文件夹里找到)
分享到：
相关推荐
s2sh+freemarker+jquery+jquery-treeview 无限级树形菜单
jsontree (jquery.treeview.js) jQuery插件版 treeview1.0jsontree (jquery.treeview.js) jQuery插件版 treeview1.0jsontree (jquery.treeview.js) jQuery插件版 treeview1.0jsontree (jquery.treeview.js) jQuery...
jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery....
本例子，使用struts+spring+hibernate +jquery 实现的jquery的treeview 和 contextmenu 插件的整合，实现了无限级的tree
动态加载json数据，增加点击展开功能，动态获取数据，简单修改就能使用
综合网上资源制作的，根据那些零碎的代码组合的，高手请跳过。已经整理好，可以运行。（特别注意，只有第一个根目录树加载了右键命令，第二个没有加载，自己可以根据需要改变每个树的右键命令）
一个基于jQuery +ASP.NET实现的树型控件Treeview右键菜单Context Menu 源码例子
本文实现了运用bootstrap treeview实现动态加载数据，并且添加快捷搜索功能，需要的朋友参考下
基于C# + jQuery的树形控件 支持右键菜单，可扩展，高效树 需要修改TreeViewHandler.ashx中的数据库查询部分才能完美跑起来
在项目中经常会用到tree，例如分类，用户组等等。 在实现的时候也会有很多的方法，例如可以用extjs，jquery treeview等一些js开发包。...这里我做了一个例子，是一个完整的应用例子，可以动态的对这棵树进行维护
使用struts2，jquery，jquery插件treeview以及json动态生成一棵目录树，下载后可以直接运行，供学习使用
数据库中存在各个节点的对应关系 然后通过递归方式将数据库中保存的节点信息添加至TreeView控件中。。。
NULL 博文链接：https://zhoupuyue.iteye.com/blog/794830
这个是“动态树的管理程序(基于jQuery Treeview实现)”java源代码程序。请先下载“动态树的管理程序(基于jQuery Treeview实现)”演示程序，如果您需要再来下载这个程序。
本资源为TreeView动态菜单源码，本程序添加了节点链接（从数据库表读取链接的URL字段）。本资源包含了js及css的主要接口说明，方便初学者学习参考
treeview＋动态加载菜单的源代码 这样可以更好的设置权限
使用java + servlet实现jquery treeview async动态加载树菜单
SSH Jquery Treeview 的整合
Jquery.Treeview+Jquery UI制作Web文件预览 http://blog.csdn.net/a497785609/article/details/19284137