jquery，从后台查数据，给页面上添加树形。

 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 } 

    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;
    }