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

简介: 前台jquery+ajax请求往页面上添加树形的js代码 1 //传入当前点击节点的id,在后台代码查询出parentid=当前节点id的记录数,从而实现点击当前节点,往后台发送ajax请求,查询出子节点的集合,往父节点下拼接页面 2 function treeNode(pid){ 3 4 //如果标签下的的长度为1,则说明需要发送ajax请求,往其中添加子节点。

前台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
相关文章
|
2月前
|
存储 JavaScript 小程序
jQuery、vue、小程序、uni-app中的本地存储数据和接受数据是什么?
jQuery、vue、小程序、uni-app中的本地存储数据和接受数据是什么?
40 0
|
2月前
|
存储 JavaScript 小程序
jQuery、vue、小程序、uni-app中的本地存储数据和接受数据
jQuery、vue、小程序、uni-app中的本地存储数据和接受数据
44 0
|
8月前
|
JavaScript 前端开发
jQuery实现从一个页面跳转到另一个页面的指定tab选项卡
jQuery实现从一个页面跳转到另一个页面的指定tab选项卡
60 0
|
8月前
|
JavaScript
jQuery实现动态添加和删除(点击按钮添加在页面添加和删除元素)
jQuery实现动态添加和删除(点击按钮添加在页面添加和删除元素)
64 0
|
9月前
|
JavaScript
Jquery插件知识之Jquery.cookie实现页面传值
Jquery插件知识之Jquery.cookie实现页面传值
44 0
|
2月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
81 0
|
9月前
|
缓存 前端开发 JavaScript
【前端用法】jquery获取当前页面的URL信息
【前端用法】jquery获取当前页面的URL信息
66 0
|
2月前
|
存储 JavaScript 小程序
jQuery、vue、小程序、uni-app中的本地存储数据和接受数据
jQuery、vue、小程序、uni-app中的本地存储数据和接受数据
46 1
|
2月前
|
JavaScript 前端开发 Python
五分钟学 | Flask 使用 JQuery 上传数据并展示在页面上
五分钟学 | Flask 使用 JQuery 上传数据并展示在页面上
|
8月前
|
JavaScript
jQuery带参跳转新页面,新页面获取url多个参数的办法
jQuery带参跳转新页面,新页面获取url多个参数的办法
35 0