前台jquery+ajax请求往页面上添加树形的js代码
1 //传入当前点击节点的id，在后台代码查询出parentid=当前节点id的记录数，从而实现点击当前节点，往后台发送ajax请求，查询出子节点的集合，往父节点下拼接页面
2 function treeNode(pid){
3
4 //如果<li id="pid">标签下的<ul>的长度为1，则说明需要发送ajax请求，往其中添加子节点。如果长度大于1说明添加过了，不用再次发送ajax请求。直接进else中控制样式的显示和隐藏问题
5 if($("#"+pid).find("ul").length <= 1){
6 $.ax({
7 type:"post",
8 url:"<%=request.getContextPath() %>/master/sysGroup_queryFlorGroup.action",
9 async:false,
10 data:{"sysParentId":pid},
11 dataType:"json",
12 success:function(resp){
13 //从后台响应回来数据，获取所有的组信息的json格式的数据
14 var groups = resp["rows"];
15
16 //如果查询出来组信息的json数组的长度《=0为空，则说明该节点下，无自己点，不用进行拼接。
17 if(groups.length>0){
18 //遍历json数组的信息。拼接页面
19 for(var i=0;i<groups.length;i++){
20 var currentId = groups[i].sysGroupId;
21 //判断子节点是否还有子节点，后台封装数据的时候，封装了一个状态码
22 if(groups[i].hasChild == "1"){
23 //pid等于零，是父节点，其余都是父节点下的子节点
24 if("0" == pid){//第一次添加父节点
25 $("#firstFlorGroup").append("<li id='"+currentId+"'><input type='checkbox' name='box' value='"+currentId+"' /><a onclick=\"treeNode
26
27 ('"+currentId+"')\" id='a"+currentId+"'>"+groups[i].sysGroupName+"</a></li>");
28 $("#"+currentId).append("<div class=\"opt\"><a href='javascript:void(0)' onclick=\"updateGroup('"+groups[i].sysGroupId+"');\">编辑
29
30 </a>|<a href='javascript:void(0)' onclick=\"deleteGroup('"+groups[i].sysGroupId+"');\">删除</a></div><div class=\"opt\">"+groups[i].sysUpdateTime+"</div>");
31 }else{
32 $("#u"+pid).append("<li id='"+currentId+"'><input type='checkbox' name='box' value='"+currentId+"' /><a onclick=\"treeNode
33
34 ('"+currentId+"')\" id='a"+currentId+"'>"+groups[i].sysGroupName+"</a></li>");
35 $("#"+currentId).append("<div class=\"opt\"><a href='javascript:void(0)' onclick=\"updateGroup('"+groups[i].sysGroupId+"');\">编辑
36
37 </a>|<a href='javascript:void(0)' onclick=\"deleteGroup('"+groups[i].sysGroupId+"');\">删除</a></div><div class=\"opt\">"+groups[i].sysUpdateTime+"</div>");
38 }
39 //给编辑的超链接添加伪协议
40 $("#a"+currentId).attr("href","javascript:void(0)");
41 //给还有子节点的子节点设置样式，使其变成绿色显示。
42 $("#a"+currentId).attr("style","color: green;");
43 //既然有子节点，就需要往<li>标签下，添加<ul>标签，方便添加子节点的子节点
44 $("#"+currentId).append("<ul id='u"+currentId+"'></ul>");
45 }else{
46 //无子节点
47 if("0" == pid){
48 $("#firstFlorGroup").append("<li id='"+currentId+"'><input type='checkbox' name='box' value='"+currentId+"' />"+groups
49
50 [i].sysGroupName+"<div class=\"opt\"><a href='javascript:void(0)' onclick=\"updateGroup('"+groups[i].sysGroupId+"');\">编辑</a>|<a href='javascript:void(0)' onclick=\"deleteGroup('"+groups
51
52 [i].sysGroupId+"');\">删除</a></div><div class=\"opt\">"+groups[i].sysUpdateTime+"</div></li>");
53 }else{
54 $("#u"+pid).append("<li id='"+currentId+"'><input type='checkbox' name='box' value='"+currentId+"' />"+groups[i].sysGroupName+"<div
55
56 class=\"opt\"><a href='javascript:void(0)' onclick=\"updateGroup('"+groups[i].sysGroupId+"');\">编辑</a>|<a href='javascript:void(0)' onclick=\"deleteGroup('"+groups[i].sysGroupId+"');\">删除
57
58 </a></div><div class=\"opt\">"+groups[i].sysUpdateTime+"</div></li>");
59 $("#"+currentId).append("<ul></ul>");
60 }
61 }
62 }
63 }
64 }
65 });
66 }else{
67 //当不需要发送ajax请求的时候，点击的时候都是改变其隐藏和显示的样式，实现动态效果
68 if($("#"+pid).find("ul").css("display")=="block"){
69 $("#"+pid).find("ul").css("display","none");
70 } else {
71 $("#"+pid).find("ul").css("display","block");
72 }
73 }
74 }
View Code
ajax请求后台的action
public String queryFlorGroup(){
try{
//生成一个装map的list集合
List<Map<String,Object>> listMap = new ArrayList<Map<String,Object>>();
//查询出指定父id的权限集合
List<SysGroup> list = sysGroupService.queryByPId(parentId);
//生成一个事件格式的对象
SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
String updateTime = "";
//遍历查询出来的权限集合，进行包装数据
for(SysGroup sysGroup:list){
int hasChild = 0;
//统计【遍历出来的权限是否有子权限】
int num = sysGroupService.countChilds(sysGroup.getSysGroupId());
if(num>0){
hasChild = 1;
}
updateTime = sdf.format(sysGroup.getSysUpdateTime());
Map<String,Object> map = new HashMap<String, Object>();
map.put("hasChild", hasChild);
map.put("sysGroupId", sysGroup.getSysGroupId());
map.put("sysGroupName", sysGroup.getSysGroupName());
map.put("parentId", sysGroup.getSysParentId());
map.put("sysUpdateTime", updateTime);
listMap.add(map);
}
jsonObject.put("rows", listMap);
System.out.println(jsonObject);
}catch(Exception e){
e.printStackTrace();
}finally{
out.print(jsonObject);
out.close();
}
return null;
}
View Code
通过自己的id，是别人的父id，通过ajax请求+css样式，动态往页面上添加树形。
js+html代码
1 //加载用户组
2 function treeNode(pid){
3 //判断该节点下是否已经加载了子节点。如果加载，则不执行ajax请求，而是执行else{}中样式的显示和隐藏
4 if($("#"+pid).find("ul").length == 0){
5 $.ax({
6 type:"post",
7 url:"<%=request.getContextPath() %>/master/sysGroup_queryFlorGroup.action",
8 async:false,
9 data:{"parentId":pid},
10 dataType:"json",
11 success:function(resp){
12 var groups = resp["rows"];
13 if(groups.length>0){
14 //如果响应回来的包装有组信息的json数组长度大于零，则遍历
15 for(var i=0;i<groups.length;i++){
16 currentId = groups[i].sysGroupId;//组的id
17 //如果父id不等于0,说明是二级或二级以下的节点
18 if("0" != pid){
19 //添加一个ul标签，用来装响应回来的json数据的组信息
20 $("#"+pid).append("<ul id='u"+pid+"'></ul>");
21 }
22 //如果该json数据中的组信息，显示其有子节点。添加的时候，同时给节点绑定onclick事件，用于自身调用自身方法，再次发送ajax请求，加载子节点
23 if(groups[i].hasChild == "1"){
24 if("0" == pid){
25 $("#groupTree").append("<li id='"+currentId+"'><a onclick=\"treeNode('"+currentId+"')\" id='a"+currentId+"'><cite></cite></a><a href='<%=request.getContextPath() %>/master/sysGroupRolePower_queryRolesByGroupId.action?groupId="+currentId+"' target='topFrame'>"+groups[i].sysGroupName+"</a><i></i></li>");
26 }else{
27 $("#u"+pid).append("<li id='"+currentId+"'><a onclick=\"treeNode('"+currentId+"')\" id='a"+currentId+"'><cite></cite></a><a href='<%=request.getContextPath() %>/master/sysGroupRolePower_queryRolesByGroupId.action?groupId="+currentId+"' target='topFrame'>"+groups[i].sysGroupName+"</a><i></i></li>");
28 }
29 $("#a"+currentId).attr("href","javascript:void(0)");
30 $("#a"+currentId).attr("style","color: green;");
31
32 }else{
33 //显示没有子节点，添加节点时，这里边有一个图标的不同，遮盖总的css样式。不在绑定onclick事件。
34 if("0" == pid){
35 //初始位置添加
36 $("#groupTree").append("<li id='"+currentId+"'><cite></cite><a href='<%=request.getContextPath() %>/master/sysGroupRolePower_queryRolesByGroupId.action?groupId="+currentId+"' target='topFrame'>"+groups[i].sysGroupName+"</a><i></i></li>");
37 $("#"+currentId).children("cite").css("background","url(../images/rlist.gif) no-repeat");
38 }else{
39 //动态添加完成的节点下，添加子节点
40 $("#u"+pid).append("<li id='"+currentId+"'><cite></cite><a href='<%=request.getContextPath() %>/master/sysGroupRolePower_queryRolesByGroupId.action?groupId="+currentId+"' target='topFrame'>"+groups[i].sysGroupName+"</a><i></i></li>");
41 $("#"+currentId).children("cite").css("background","url(../images/rlist.gif) no-repeat");
42 }
43 }
44 }
45 }
46 }
47 });
48
49 }else{
50 //当树形加载完毕后，再次点击，就是控制显示和隐藏，从而实现动态效果
51 if($("#"+pid).find("ul").css("display")=="block"){
52 $("#"+pid).find("ul").css("display","none");
53 $("#a"+pid).children("cite").css("background","url(../images/list.gif) no-repeat");
54 } else {
55 $("#"+pid).find("ul").css("display","block");
56 $("#a"+pid).children("cite").css("background","url(../images/clist.png) no-repeat");
57 }
58 }
59 }
60
61 //当页面加载完毕时，首先自动加载父id为0的组的信息，动态添加到页面上
62 $(document).ready(function(){
63 treeNode(0);
64 });
65
66
67
68
69
70
71
72
73 <body style="background:#f0f9fd;">
74 <div class="lefttop"><span></span>权限分配</div>
75
76 <dl class="leftmenu">
77
78 <dd><div class="title"><span><img src="<%=request.getContextPath() %>/master/images/leftico04.png" /></span>用户组</div>
79 <ul id="groupTree" class="menuson">
80 </ul>
81
82 </dd>
83
84 </dl>
85
86 <script type="text/javascript">
87 $('.tablelist tbody tr:odd').addClass('odd');
88 </script>
89
90
91 </body>
View Code
ajax请求后台的action
/**
* 根据自动注入的parentId来查出子组，并且返回所查出的子组是否还有子组
* @Title: queryFlorGroup
* @Description: TODO(这里用一句话描述这个方法的作用)
* @return
* @return String 返回类型
* @author 王兴兴
* @date 2014-7-1 下午3:21:10
*/
public String queryFlorGroup(){
try{
List<Map<String,Object>> listMap = new ArrayList<Map<String,Object>>();
List<SysGroup> list = sysGroupService.queryByPId(parentId);
for(SysGroup sysGroup:list){
int hasChild = 0;
//通过改组的组id，去后台查询改组下是否还有子组
int num = sysGroupService.countChilds(sysGroup.getSysGroupId());
if(num>0){
hasChild = 1;
}
Map<String,Object> map = new HashMap<String, Object>();
map.put("hasChild", hasChild);
map.put("sysGroupId", sysGroup.getSysGroupId());
map.put("sysGroupName", sysGroup.getSysGroupName());
map.put("parentId", sysGroup.getSysParentId());
map.put("sysUpdateTime", sysGroup.getSysUpdateTime());
listMap.add(map);
}
jsonObject.put("rows", listMap);
System.out.println(jsonObject);
}catch(Exception e){
e.printStackTrace();
}finally{
out.print(jsonObject);
out.close();
}
return null;
}
/**
* 查询指定用户组下的子用户组个数
* @Title: countChilds
* @Description: TODO(这里用一句话描述这个方法的作用)
* @param parentId
* @return
* @return Integer 返回类型
* @author 王兴兴
* @date 2014-6-30 下午4:39:10
*/
public Integer countChilds(String parentId){
return groupDao.count("sysParentId", parentId);
}
/**
* 统计
* @Title: count
* @Description: TODO(这里用一句话描述这个方法的作用)
* @param conds
* @return
* @return Integer 返回类型
* @author 郝鹏
* @date 2014-3-27 下午3:22:18
*/
public Integer count(String property,Object value){
Map<String, Object> conds=new HashMap<String, Object>();
conds.put(property, value);
return this.count(conds);
}
/**
* 统计
* @Title: count
* @Description: TODO(这里用一句话描述这个方法的作用)
* @param conds
* @return
* @return Integer 返回类型
* @author 郝鹏
* @date 2014-3-27 下午3:22:18
*/
public Integer count(final Map<String, Object> conds){
return this.hibernateTemplate.execute(new HibernateCallback<Integer>() {
public Integer doInHibernate(Session session)
throws HibernateException, SQLException {
if(conds==null || conds.isEmpty()){
return null;
}
StringBuilder sb=new StringBuilder();
sb.append("select count(*) from "+entityClass.getName()+" where ");
//设置条件参数
Set<String> condKeys=conds.keySet();
int i=0;
for(String key:condKeys){
String k=key.replaceAll("\\.", "")+"w";
sb.append(key+"=:"+k);
if(i<condKeys.size()-1){
sb.append(" and ");
}
i++;
}
Query q=session.createQuery(sb.toString());
for(String key:condKeys){
String k=key.replaceAll("\\.", "")+"w";
q.setParameter(k, conds.get(key));
}
Number number=(Number) q.uniqueResult();
return number.intValue();
}
});
}
View Code
时间： 2024-09-15 18:46:42