1. 框架：
jquery-1.8.3.js
jquery.ztree.core-3.5.js
Spring-3.2.4
js及css见附件
2. 加载的数据
省市数据。
思路：一进入页面，首先加载省一级信息，当点击省的时候，到后台查找该省下面的所有的市，然后加载到该省下。
3. 表（HW_DEPT）结构
4. 查找省一级数据dao方法
public List<HwDept> findProvinceDept(String provinceId) throws Exception {
StringBuffer sql = new StringBuffer(100);
sql.append("SELECT * FROM HW_DEPT ");
sql.append(" WHERE DEPT_LEVEL = '3' AND MANAGE_LEVEL = '3'");
if (null != provinceId && !"".equals(provinceId.trim())) {
sql.append(" AND DEPT_ID = '").append(provinceId).append("'");
}
sql.append(" ORDER BY DEPT_NAME ASC");
return getJdbcTemplate().query(sql.toString(), new RowMapper<HwDept>() {
@Override
public HwDept mapRow(ResultSet rs, int rowNum) throws SQLException {
HwDept dept = new HwDept();
dept.setDeptId(rs.getString("DEPT_ID"));
dept.setDeptName(rs.getString("DEPT_NAME"));
dept.setDeptLevel(rs.getString("DEPT_LEVEL"));
dept.setManageLevel(rs.getString("MANAGE_LEVEL"));
dept.setParentId(rs.getString("PARENT_ID"));
return dept;
}
});
}
5. 查找省一级数据controller方法
@RequestMapping("/getProvinceTree")
public void getProvinceTree(HttpServletResponse resp) {
PrintWriter out = null;
try {
out = resp.getWriter();
// 当前登录用户
ShiroUser shiroUser = SubjectUtils.getPrincipal();
User user = userService.findOne("loginName",
shiroUser.getLoginName());
// 查找省一级部门信息
List<HwDept> depts = hwDeptService.findProvinceDept(user
.getProvinceId());
//
// JSONArray json = JSONArray.fromObject(depts);
// 将集合对象拼接成json字符串
String json = buildProvinceJSON(depts);
log.info("Province Tree json is:\r\n" + json);
// 传到前台js
out.write(json);
// JSONArray outArray = hwDeptService.findProvinceDept();
// out.write(json.toString());
out.flush();
} catch (IOException e) {
log.error("Get Province Tree fail:" + e.getMessage(), e);
} catch (Exception e) {
log.error("Get Province Tree fail:" + e.getMessage(), e);
} finally {
if (null != out) {
out.close();
}
}
}
private String buildProvinceJSON(List<HwDept> list) throws Exception {
StringBuffer json = new StringBuffer(1000);
for (HwDept dept : list) {
json.append("{");
json.append("id:\"").append(dept.getDeptId()).append("\",");
json.append("pId:").append("0").append(",");
json.append("name:").append("\"").append(dept.getDeptName())
.append("\"").append(",");
json.append("isParent:").append("true").append(",");
json.append("open:").append("false");
json.append("}").append(",");
}
String s = json.toString();
if (s.endsWith(",")) {
// 去掉最后面的逗号
s = s.substring(0, s.lastIndexOf(","));
}
StringBuffer buf = new StringBuffer("[");
buf.append(s);
buf.append("]");
return buf.toString();
}
6. jsp
<ul id="tree" class="ztree" style="width:260px; overflow:auto;"></ul>
7. js
<script type="text/javascript">
/* 树形菜单 */
var zTree;
var demoIframe;
var setting = {
view: {
dblClickExpand: false,
showLine: true,
selectedMulti: false
},
data: {
simpleData: {
enable:true,
idKey: "id",
pIdKey: "pId",
rootPId: ""
}
},
callback: {
/*
beforeClick: function(treeId, treeNode) {
alert(treeNode);
var zTree = $.fn.zTree.getZTreeObj("tree");
if (treeNode.isParent) {
alert(treeNode);
zTree.expandNode(treeNode);
return false;
} else {
demoIframe.attr("src",treeNode.file + ".html");
return true;
}
},
*/
onClick: reLoadOpenURL,//节点被点击时调用的函数
beforeExpand: zTreeBeforeExpand //用于捕获父节点展开之前的事件回调函数，并且根据返回值确定是否允许展开操作
}
};
$(function(){
var zNodes;
var zTreeObj;
$.ajax({
url : "${ctx}/hw/dept/getProvinceTree",
type : "POST",
dataType: "text", // 字符串格式
success : function (strReult) {
// 将json字符串转成json对象
zNodes = eval("(" + strReult + ")");
zTreeObj = $.fn.zTree.init($("#tree"), setting, zNodes);
}, error: function () {
alert("获取省公司数据失败!");
}
});
});
</script>
结果如下：
下面加载子节点，点击省前面的加号（+），到后台查找对应的市一级数据，然后加载显示。
8. 根据省份id查找对应的市级信息dao方法
public List<HwDept> findByPId(String parentId) throws Exception {
String sql = "SELECT * FROM HW_DEPT WHERE PARENT_ID = ? ORDER BY DEPT_NAME ASC";
return getJdbcTemplate().query(sql, new Object[] { parentId },
new RowMapper<HwDept>() {
@Override
public HwDept mapRow(ResultSet rs, int rowNum)
throws SQLException {
HwDept dept = new HwDept();
dept.setDeptId(rs.getString("DEPT_ID"));
dept.setDeptName(rs.getString("DEPT_NAME"));
dept.setDeptLevel(rs.getString("DEPT_LEVEL"));
dept.setManageLevel(rs.getString("MANAGE_LEVEL"));
dept.setParentId(rs.getString("PARENT_ID"));
return dept;
}
});
}
9. 根据省份id查找对应的市级信息controller方法
@RequestMapping("/getCityTree")
public void getCityTree(HttpServletResponse resp,
@RequestParam("parentId") String parentId) {
log.info("Get City Tree, parentId=" + parentId);
PrintWriter out = null;
try {
out = resp.getWriter();
List<HwDept> depts = hwDeptService.findByPId(parentId);
// 将集合对象拼接成json字符串
String json = buildCityJSON(depts, parentId);
log.info("City Tree json is:\r\n" + json);
// 传到前台js
out.write(json);
out.flush();
} catch (IOException e) {
log.error("Get City Tree fail:" + e.getMessage(), e);
} catch (Exception e) {
log.error("Get City Tree fail:" + e.getMessage(), e);
} finally {
if (null != out) {
out.close();
}
}
}
private String buildCityJSON(List<HwDept> list, String parentId)
throws Exception {
StringBuffer buf = new StringBuffer(1000);
for (HwDept dept : list) {
buf.append("{");
buf.append("id:\"").append(dept.getDeptId()).append("\",");
buf.append("pId:").append("\"").append(parentId).append("\",");
buf.append("name:").append("\"").append(dept.getDeptName())
.append("\"").append(",");
buf.append("isParent:").append("true").append(",");
buf.append("open:").append("false");
buf.append("}").append(",");
}
String s = buf.toString();
if (s.endsWith(",")) {
// 去掉最后面的逗号
s = s.substring(0, s.lastIndexOf(","));
}
StringBuffer json = new StringBuffer(1000);
json.append("[");
json.append(s);
json.append("]");
return json.toString();
}
10. 加载子节点js方法
// beforeExpand: 用于捕获父节点展开之前的事件回调函数，并且根据返回值确定是否允许展开操作
function zTreeBeforeExpand(treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj(treeId);
if (treeNode.isParent) {
/*如果是父节点*/
if(treeNode.open){
/*父节点为展开状态，则折叠父节点*/
zTree.expandNode(treeNode,false,true,true,false);
} else {
/*父节点为折叠状态,点击展开后加载子节点 */
var parentId = treeNode.id;
$.ajax({
url : "${ctx}/hw/dept/getCityTree",
type : "POST",
dataType: "text", // 字符串格式
data: {parentId : parentId},
success : function (data1) {
// 将json字符串转成json对象
zNodes = eval("(" + data1 + ")");
zTree.addNodes(treeNode, zNodes);
}, error: function () {
alert("获取市公司数据失败!");
}
});
}
}
}
11. 结果如下：
相关推荐
主要介绍了jQuery使用zTree插件实现树形菜单和异步加载的相关方法，感兴趣的小伙伴们可以参考一下
前端框架 zTree 从数据库中动态加载树形菜单前端框架
包括代码源文件，数据库，直接下载就可以直接运行，里面还包括分页的实现
ztree+dwr实现的异步加载树形菜单
bootstrap风格的zTree树形菜单代码 一款支持自定义编辑，添加列表，删除列表等功能的bootstrap风格的zTree树形菜单代码，jQuery树形结构菜单插件下载。
zTree 是利用 JQuery 的核心代码，实现一套能完成大部分常用功能的 Tree 插件。它与 IE、FireFox、Chrome 等浏览器保持兼容，在一个页面内可同时生成多个Tree 实例，支持一次性静态生成和Ajax 异步加载两种方式，...
zTree 非常强大的树形控件 、zTree v3.0 针对大数据量一次性加载进行了更深入的优化，实现了延迟加载功能，即不展开的节点不创建子节点的 Dom。 2)、对于每级节点最多一百左右，但总节点数几千甚至几万，且不是全部...
主要介绍了jQuery ztree实现动态树形多选菜单，ztree动态树形菜单，初始化加载和延迟加载，感兴趣的小伙伴们可以参考一下
在每个节点添加 id 和 pid， id 表示当前节点编号，pid 表示父节点编号 第一步：在页面显示菜单位置，添加 ul设置 class...ztree树形菜单的使用</title> <!-- 导入jquery核心类库 --> [removed][removed]
但却是使用最简单的Tree菜单，最简单的树菜单 -- 与标准 JSON 数据完美相结合，用ZTree可以创建不显示连接线的树、不显示节点图标的树、自定义图标 -- icon 属性的树、显示自定义字体的树状菜单、异步加载节点数据的...
主要为大家详细介绍了jQuery zTree加载树形菜单功能，轻松设计树形结构菜单功能，感兴趣的小伙伴们可以参考一下
首先你需要知道AngularJS的双向数据绑定是什么才可以更好的理解下面的代码，想了很久才想出用下面的代码来实现左侧菜单树形结构 要实现上面的功能你需要操作如下步骤： 在HTML标签内添加ng-app，让AngularJS掌管整个...
使用JQuery的插件zTree，进行动态的异步加载,带数据库，可直接运行
这个不仅仅是一个树形结构的菜单，每个节点左边可以有一个复选框，看了看也挺简单的，只需要在setting里面配置一个checked属性即可。 目前经验觉得这个用在组织结构、分类、尤其是权限，如果用这个插件完成会...
节点互斥的ASP.NET TreeView动态树形菜单，N年前写的了，扔了这么多年重新扒出来了，当时在VS2003下测试通过 1。工具箱-->添加/移除项-->选.NET组件--浏览--打开--确定 2。把Microsoft.Web.UI....