首页 > 代码库 > jquery,从后台查数据,给页面上添加树形。
jquery,从后台查数据,给页面上添加树形。
前台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=http://www.mamicode.com/‘"+currentId+"‘ /><a onclick=\"treeNode26 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=http://www.mamicode.com/‘"+currentId+"‘ /><a onclick=\"treeNode33 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=http://www.mamicode.com/‘"+currentId+"‘ />"+groups49 50 [i].sysGroupName+"<div class=\"opt\"><a href=‘javascript:void(0)‘ onclick=\"updateGroup(‘"+groups[i].sysGroupId+"‘);\">编辑</a>|<a href=‘javascript:void(0)‘ onclick=\"deleteGroup(‘"+groups51 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=http://www.mamicode.com/‘"+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; }
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。