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. 结果如下：
