html页面下拉列表中动态添加后台数据（格式化数据，显示出数据的层次感）

html页面下拉列表中动态添加后台数据（格式化数据，显示出数据的层次感）

效果图：

 

 

运行原理和技术：

当页面加载完毕，利用jquery向后台发送ajax请求，去后台拼接<select></select>中的option字符串。让后将字符串响应回来，动态添加到<select>中。其中的字符串中包含了后台的数据。

页面js代码：

 

<script type="text/javascript">
    //加载部门
    function loadSysGroup(){
        var groups=document.getElementById("selectObj");
            if(groups == null ){
                return;
            }
            $.ajax({
                type:"POST",
                url:"<%=request.getContextPath() %>"+"/master/sysGroup_getOptions.action",
                dataType:"json",
                success:function(data){
                    var options=data["options"];
                    groups.innerHTML="<option value='0'>--请选择--</option>"+options;
                    
                }
            });
    }
    
    //当页面加载完成后，加载部门
    $(document).ready(function(){
        loadSysGroup();
    });
</script>

 <li><label>所属部门</label><select id="selectObj" name="sysGroupId"> </select></li>

 

后台action和sercive方法（省去dao层查数据的方法，主要是体现加工字符串）

 

    /**action 层
     * ajax查询出所有的部门信息
    * @Title: ajaxQueryGroup 
    * @Description: TODO(这里用一句话描述这个方法的作用) 
    * @return
    * @return String    返回类型 
    * @author 尚晓飞
    * @date 2014-9-4 上午11:36:15
     */
    public String ajaxQueryGroup(){
    
        try {
            
            String sbString=sysUserService.findQueryGroup();
            jsonObject.put("options", sbString);
            
        } catch (Exception e) {
            // TODO: handle exception
            e.printStackTrace();
            return "error";
        }finally{
            out.print(jsonObject);
            out.close();
        }
        
        return null;
    }
    

/**service层的加工数据
     * 加载出组
    * @Title: findQueryGroup 
    * @Description: TODO(这里用一句话描述这个方法的作用)
    * @author 尚晓飞
    * @date 2014-9-25 上午11:38:16
    * @return 
    * @see org.ledger.service.SysUserService#findQueryGroup()
     */
    @Override
    public String findQueryGroup() {
        // TODO Auto-generated method stub
        StringBuffer str=new StringBuffer();
        //院属单位institute_unit  非院属单位research_center
        //第一步拼接院属单位
        str.append("<optgroup label=\"院属单位\">");//optgroup是页面分类，无值。
        MyClass myClass=new MyClass();
        myClass.handleSb("institute_unit", 0);//算是一个父id
        str.append(myClass.sb.toString());
        str.append("</optgroup>");
        
        //第二步拼接非院属单位
        str.append("<optgroup label=\"非院属单位\">");
        MyClass myClass2=new MyClass();
        myClass2.handleSb("research_center", 0);
        str.append(myClass2.sb.toString());
        str.append("</optgroup>");
        
        return str.toString();
    }

    /**
     * 内部类（加工数据的主要）递归
    * @ClassName: myClass 
    * @Description: TODO(这里用一句话描述这个类的作用) 
    * @author 尚晓飞
    * @date 2014-9-25 上午11:46:34 
    *本示例，第一级没有加标示，数据只有两级，如果后台数据有多个级别的话，则会显示层次关系。掌握思想
     */
    class MyClass{
        StringBuffer sb=new StringBuffer();
        
        //拼接内容
        public void handleSb(String unitType,Integer num){
            //根据父id查询出符合条件的集合（父子关系，在数据库表中，父的主键id 是子的父级id字段的值）
            List<SysGroup> listGroups=sysGroupService.queryGroupsByType(unitType);
            //如果不为空，则进行拼接加工字符串
            if(listGroups!=null&&listGroups.size()>0){
                int m=0;//用来记录循环的次数
                num++;//用来记录运行该方法的次数
                
                for(int i=0;i<listGroups.size();i++){
                    sb.append("<option value=\""+listGroups.get(i).getSysGroupId()+"\">");
                    
                    //决定位置
                    //一次递归说明是一个等级，则需要层次分明，则进行加空格，至于加多少，用递归次数决定，从而显示出层次感
                    for(int j=1;j<num;j++){
                        sb.append("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
                    }
                    
                    //决定前边装饰的符号
                    if(num!=1){
                        if(m<(listGroups.size()-1)){
                            //说明循环没有到最后一次
                            sb.append("&nbsp;&nbsp;┠&nbsp;&nbsp;");
                        }else {
                            sb.append("&nbsp;&nbsp;┖&nbsp;&nbsp;");
                        }
                    }else {
                        sb.append("&nbsp;&nbsp;");
                    }
                    
                    //添加名字
                    sb.append(listGroups.get(i).getSysGroupName());
                    sb.append("</option>");
                    //循环一次了，循环次数的标示自增1
                    m++;
                    
                    //递归。用于添加当前组的子组（如果有，则sb会添加，如果没有，该方法运行一下，进入当前层的下一次循环）
                    handleSb(listGroups.get(i).getSysGroupId(), num);
                }
                
            }
        }
        
    }