前台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 }
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; }
通过自己的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>
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(); } }); }
