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

前台jquery+ajax请求往页面上添加树形的js代码

 //传入当前点击节点的id，在后台代码查询出parentid=当前节点id的记录数，从而实现点击当前节点，往后台发送ajax请求，查询出子节点的集合，往父节点下拼接页面
 function treeNode(pid){
 
         //如果<li id="pid">标签下的<ul>的长度为1，则说明需要发送ajax请求，往其中添加子节点。如果长度大于1说明添加过了，不用再次发送ajax请求。直接进else中控制样式的显示和隐藏问题
           if($("#"+pid).find("ul").length <= 1){
           $.ax({
                 type:"post",
                 url:"<%=request.getContextPath() %>/master/sysGroup_queryFlorGroup.action",
                 async:false,
                 data:{"sysParentId":pid},
                 dataType:"json",
                 success:function(resp){
                 //从后台响应回来数据，获取所有的组信息的json格式的数据
                     var groups = resp["rows"]; 
 
                 //如果查询出来组信息的json数组的长度《=0为空，则说明该节点下，无自己点，不用进行拼接。
                 if(groups.length>0){
                     //遍历json数组的信息。拼接页面
                         for(var i=0;i<groups.length;i++){
                             var currentId = groups[i].sysGroupId;
                             //判断子节点是否还有子节点，后台封装数据的时候，封装了一个状态码
                         if(groups[i].hasChild == "1"){
                             //pid等于零，是父节点，其余都是父节点下的子节点
                                 if("0" == pid){//第一次添加父节点
                                     $("#firstFlorGroup").append("<li id='"+currentId+"'><input type='checkbox' name='box' value='"+currentId+"' /><a onclick=\"treeNode
 
 ('"+currentId+"')\" id='a"+currentId+"'>"+groups[i].sysGroupName+"</a></li>");
                                     $("#"+currentId).append("<div class=\"opt\"><a href='javascript:void(0)' onclick=\"updateGroup('"+groups[i].sysGroupId+"');\">编辑
 
 </a>|<a href='javascript:void(0)' onclick=\"deleteGroup('"+groups[i].sysGroupId+"');\">删除</a></div><div class=\"opt\">"+groups[i].sysUpdateTime+"</div>");
                                 }else{
                                     $("#u"+pid).append("<li id='"+currentId+"'><input type='checkbox' name='box' value='"+currentId+"' /><a onclick=\"treeNode
 
 ('"+currentId+"')\" id='a"+currentId+"'>"+groups[i].sysGroupName+"</a></li>");
                                     $("#"+currentId).append("<div class=\"opt\"><a href='javascript:void(0)' onclick=\"updateGroup('"+groups[i].sysGroupId+"');\">编辑
 
 </a>|<a href='javascript:void(0)' onclick=\"deleteGroup('"+groups[i].sysGroupId+"');\">删除</a></div><div class=\"opt\">"+groups[i].sysUpdateTime+"</div>");
                                 }
                             //给编辑的超链接添加伪协议
                                 $("#a"+currentId).attr("href","javascript:void(0)");
                             //给还有子节点的子节点设置样式，使其变成绿色显示。
                                 $("#a"+currentId).attr("style","color: green;");
                             //既然有子节点，就需要往<li>标签下，添加<ul>标签，方便添加子节点的子节点
                                 $("#"+currentId).append("<ul id='u"+currentId+"'></ul>");
                             }else{
                         //无子节点
                                 if("0" == pid){
                                     $("#firstFlorGroup").append("<li id='"+currentId+"'><input type='checkbox' name='box' value='"+currentId+"' />"+groups
 
 [i].sysGroupName+"<div class=\"opt\"><a href='javascript:void(0)' onclick=\"updateGroup('"+groups[i].sysGroupId+"');\">编辑</a>|<a href='javascript:void(0)' onclick=\"deleteGroup('"+groups
 
 [i].sysGroupId+"');\">删除</a></div><div class=\"opt\">"+groups[i].sysUpdateTime+"</div></li>");
                                 }else{
                                     $("#u"+pid).append("<li id='"+currentId+"'><input type='checkbox' name='box' value='"+currentId+"' />"+groups[i].sysGroupName+"<div 
 
 class=\"opt\"><a href='javascript:void(0)' onclick=\"updateGroup('"+groups[i].sysGroupId+"');\">编辑</a>|<a href='javascript:void(0)' onclick=\"deleteGroup('"+groups[i].sysGroupId+"');\">删除
 
 </a></div><div class=\"opt\">"+groups[i].sysUpdateTime+"</div></li>");
                                     $("#"+currentId).append("<ul></ul>");
                                 }
                             }
                         }
                     }
             }
         });
         }else{
         //当不需要发送ajax请求的时候，点击的时候都是改变其隐藏和显示的样式，实现动态效果
             if($("#"+pid).find("ul").css("display")=="block"){
                 $("#"+pid).find("ul").css("display","none");
             } else {
                 $("#"+pid).find("ul").css("display","block");
             }
         }
 }

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代码

     //加载用户组
             function treeNode(pid){
                   //判断该节点下是否已经加载了子节点。如果加载，则不执行ajax请求，而是执行else{}中样式的显示和隐藏
                 if($("#"+pid).find("ul").length == 0){
                   $.ax({
                         type:"post",
                         url:"<%=request.getContextPath() %>/master/sysGroup_queryFlorGroup.action",
                         async:false,
                         data:{"parentId":pid},
                         dataType:"json",
                         success:function(resp){
                             var groups = resp["rows"];
                             if(groups.length>0){
                                 //如果响应回来的包装有组信息的json数组长度大于零，则遍历
                                 for(var i=0;i<groups.length;i++){
                                     currentId = groups[i].sysGroupId;//组的id
                                     //如果父id不等于0,说明是二级或二级以下的节点
                                     if("0" != pid){
                                         //添加一个ul标签，用来装响应回来的json数据的组信息
                                         $("#"+pid).append("<ul id='u"+pid+"'></ul>");
                                     }
                                     //如果该json数据中的组信息，显示其有子节点。添加的时候，同时给节点绑定onclick事件，用于自身调用自身方法，再次发送ajax请求，加载子节点
                                     if(groups[i].hasChild == "1"){
                                         if("0" == pid){
                                             $("#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>");
                                         }else{
                                             $("#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>");
                                         }
                                         $("#a"+currentId).attr("href","javascript:void(0)");
                                         $("#a"+currentId).attr("style","color: green;");
 
                                     }else{
                                         //显示没有子节点，添加节点时，这里边有一个图标的不同，遮盖总的css样式。不在绑定onclick事件。
                                         if("0" == pid){
                                             //初始位置添加
                                             $("#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>");
                                             $("#"+currentId).children("cite").css("background","url(../images/rlist.gif) no-repeat");
                                         }else{
                                             //动态添加完成的节点下，添加子节点
                                             $("#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>");
                                             $("#"+currentId).children("cite").css("background","url(../images/rlist.gif) no-repeat");
                                         }
                                     }
                                 }
                             }
                     }
                 });    
 
                 }else{
                     //当树形加载完毕后，再次点击，就是控制显示和隐藏，从而实现动态效果
                     if($("#"+pid).find("ul").css("display")=="block"){
                         $("#"+pid).find("ul").css("display","none");
                         $("#a"+pid).children("cite").css("background","url(../images/list.gif) no-repeat");
                     } else {
                         $("#"+pid).find("ul").css("display","block");
                         $("#a"+pid).children("cite").css("background","url(../images/clist.png) no-repeat");
                     }
                 }
             }
 
             //当页面加载完毕时，首先自动加载父id为0的组的信息，动态添加到页面上
             $(document).ready(function(){
                 treeNode(0);
             }); 
 
 <body style="background:#f0f9fd;">
     <div class="lefttop"><span></span>权限分配</div>
 
     <dl class="leftmenu">
 
     <dd><div class="title"><span><img src="<%=request.getContextPath() %>/master/images/leftico04.png" /></span>用户组</div>
     <ul id="groupTree" class="menuson">
     </ul>
 
     </dd>   
 
     </dl>
 
     <script type="text/javascript">
     $('.tablelist tbody tr:odd').addClass('odd');
     </script>
 
 </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();
            }
 
        });
    }

jquery，从后台查数据，给页面上添加树形。的更多相关文章

WordPress怎么在页面上添加目录
要实现的如下功能,在页面上添加一个文章目录: 步骤: 1)在wordpress中,在Posts----Categories中建立目录, 2) 3)add new post,指定post所属的cat ...
Inno Setup技巧[界面]欢迎页面上添加文字
原文:Inno Setup技巧[界面]欢迎页面上添加文字本文介绍在"欢迎页面添加文字"的两种方法. 界面预览: Setup技巧[界面]欢迎页面上添加文字" title= ...
紧接上篇，jQuery调用jsonp，并且在页面上展示
在上篇中提到了spring4.1+支持jsonp的调用,做了个例子,用来在页面上展示jsonp: (js写的丑了点,本人后端出生,前端大侠们轻拍~) var Menu = function () { ...
jquery 获取后台实时数据
第一步.提醒后台处理数据1.$.ajax({}) 提交数据,2.后台返回状态3.后台开始处理数据,并每秒记录状态到 data.json 文件4.前台每秒请求 data.json 文件,直到处理完成第 ...
JS从后台获取数据，前台动态添加tr标签中的td标签
功能描述: 要求从后台查询该省份的所有城市,然后动态的再前台固定的tr标签中添加相应的td标签来展示城市基本信息: 文章目录 #一.前台jsp及js源码 jsp:在固定的tr标签中添加一个id,通过j ...
05 HTML字符串转换成jQuery对象、绑定数据到元素上
1 要求将一段 HTML脚本封装成一个字符串,将这个字符串转换成一个jQuery对象:然后将这个jQuery对象添加到指定的元素中去 2 步骤定义字符串 var str = '<div i ...
vue从后台拿数据渲染页面图片
<div class="list-content"> <div v-for="goods in goodsList" class=" ...
在h5页面上添加音乐播放
接到需求说要做一个h5轮播图,同时配上背景音乐. Html部分:  <div id="music"> <div id=" ...
在rabbitmq操作页面上添加队列、交换器及绑定示图
1.添加队列 2.添加交换器 3.绑定

随机推荐

PHP标准库SPL
SPL是Standard PHP Library(PHP标准库)的缩写.用来解决典型(常见)问题(common problems)的一组接口与类的集合典型问题(common problems) - ...
3.6 MIPS指令简介
计算机组成 3 指令系统体系结构 3.6 MIPS指令简介 MIPS秉承着指令数量少,指令功能简单的设计理念.那这样的设计理念是如何实现的呢?在这一节,我们就将来分析MIPS指令的特点. 相比于X86 ...
sgu 108 Self-numbers 2
题意:这样的数有几个? 模仿筛法就能解出,但是内存不够.这就需要重复利用数组,用100大小的数组,所有的数对100取模.对于一个数,比如71,就在arr[78]=71记录下来.到78时,检查78-71 ...
PC端，移动端分离，如何结合？？
<script type="text/javascript"> function mobile_device_detect(url) { var thisOS = na ...
Nginx配置https， 80端口重定向443
server { listen 443 ssl; server_name 域名; charset utf-8; access_log /var/log/nginx/webhook.iminho.me/ ...
『cs231n』循环神经网络RNN
循环神经网络循环神经网络介绍摘抄自莫凡博士的教程序列数据我们想象现在有一组序列数据 data 0,1,2,3. 在当预测 result0 的时候,我们基于的是 data0, 同样在预测其他数据的 ...
OAF 动态创建组件以及动态绑定属性
在开发中,我们遇到以下一个需求. 一个表格左侧有5列是固定存在的,右侧有N列是动态生成的,并且该N列中第一列可输入,第二列是不可编辑的,但是是数字,如果小于0,那么就要显示为红色,重点标识出来. 首先 ...
原生JS和jQuery版实现文件上传功能
<!doctype html> <html lang="zh"> <head> <meta charset="utf-8&quo ...
小程序数组型图片自适应效果的实现(交流QQ群：604788754)
//本例代码如有问题,请加群,下载今日日期文件,测试.(如对本例有疑问,也可加群咨询群主) WXML: <view class="imgbox"> <block ...
restful 初探
1.restful 是一种编程规范,能够实现现在丰富的客户端(安卓,ios,桌面等)平等的访问服务器提供的服务. 2.重要的是利用restful来设计实现符合该编程规范的api.

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

jquery，从后台查数据，给页面上添加树形。的更多相关文章

随机推荐

热门专题