前台jquery+ajax请求往页面上添加树形的js代码
1 //传入当前点击节点的id，在后台代码查询出parentid=当前节点id的记录数，从而实现点击当前节点，往后台发送ajax请求，查询出子节点的集合，往父节点下拼接页面 2 function treeNode(pid){ 3 4 //如果<li >标签下的<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 }