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

html页面下拉列表中动态添加后台数据(格式化数据,显示出数据的层次感)的更多相关文章

  1. vue向数组中动态添加数据

    vue中数据更新通过v-model实现,向数组中添加数据通过push()实现,向shortcuts数组中动态添加newShortcut对象中的title和action this.shortcuts.p ...

  2. 在页面中添加两个 <select> 标签,用来显示年份和月份;同时添加两个 <ul> 标签,一个用来显示星期,另一个用来显示日期 在 JavaScript 脚本中动态添加年份和月份,获取当前日期的年份

    查看本章节 查看作业目录 需求说明: 使用 JavaScript 中的 Date 对象,在页面上显示一个万年历.选择不同的年份和月份,在页面中显示当前月的日历 实现思路: 在页面中添加两个 <s ...

  3. 谨记给UpdatePanel中动态添加的控件赋ID

    原文:谨记给UpdatePanel中动态添加的控件赋ID 昨天下定决 心对上次做的布局编辑器控件加以改进,其中最主要变化的就是要完全使用ASP.NET AJAX!但是很遗憾,虽然耳闻已久,但目前对AS ...

  4. ASP.NET中Literal控件的使用方法(用于向网页中动态添加内容)

    原文:https://www.jb51.net/article/82855.htm 可以将 Literal 控件用作网页上其他内容的容器.Literal 控件最常用于向网页中动态添加内容.简单的讲,就 ...

  5. Android 在布局容器中动态添加控件

    这里,通过一个小demo,就可以掌握在布局容器中动态添加控件,以动态添加Button控件为例,添加其他控件同样道理. 1.addView 添加控件到布局容器 2.removeView 在布局容器中删掉 ...

  6. Android 在程序中动态添加 View 布局或控件

    有时我们需要在程序中动态添加布局或控件等,下面用程序来展示一下相应的方法: 1.addView 添加View到布局容器 2.removeView 在布局容器中删掉已有的View 3.LayoutPar ...

  7. VC中动态添加控件

    VC中动态添加控件 动态控件是指在需要时由Create()创建的控件,这与预先在对话框中放置的控件是不同的. 一.创建动态控件: 为了对照,我们先来看一下静态控件的创建. 放置静态控件时必须先建立一个 ...

  8. vue中动态添加div

    知识点:vue中动态添加div节点,点击添加,动态生成div,点击删除,删除对应的div,其中数组的长度是动态改变的,如在from表单中应用,直接在提交方法中,获得list,获取所填的元素即可 效果: ...

  9. Celery 分布式任务队列快速入门 以及在Django中动态添加定时任务

    Celery 分布式任务队列快速入门 以及在Django中动态添加定时任务 转自 金角大王 http://www.cnblogs.com/alex3714/articles/6351797.html ...

随机推荐

  1. The 2018 ACM-ICPC Asia Qingdao Regional Contest, Online Solution

    A    Live Love 水. #include<bits/stdc++.h> using namespace std; typedef long long ll; ; const i ...

  2. SQL Server System.Data.SqlClient.SqlException:已成功于服务器建立连接,但是在 登录前的握手期间发生错误

    一.错误描述 错误名称如上.整体错误如下: System.Data.EntityException 基础提供程序在Open上失败--> System.Data.SqlClient.SqlExce ...

  3. 微信小程序:WXML 模板

    微信小程序:WXML 模板 一.WXML 模板 网页编程采用的是 HTML + CSS + JS 这样的组合,其中 HTML 是用来描述当前这个页面的结构,CSS 用来描述页面的样子,JS 通常是用来 ...

  4. Xilinx SD controller

    Features supported by driver Zynq All the HW/IP features are supported by driver ZynqMP All the HW/I ...

  5. ubuntu18.04下搭建深度学习环境anaconda2+ cuda9.0+cudnn7.0.5+tensorflow1.7【原创】【学习笔记】

    PC:ubuntu18.04.i5.七彩虹GTX1060显卡.固态硬盘.机械硬盘 作者:庄泽彬(欢迎转载,请注明作者) 说明:记录在ubuntu18.04环境下搭建深度学习的环境,之前安装了cuda9 ...

  6. NGS检测ALK融合大起底--转载

    导读: ALK融合是非小细胞肺癌的关键驱动机制之一,在NSCLC患者中发生的频率约为3-7%.针对ALK融合的抑制剂克唑替尼.色瑞替尼以及Alectinib在治疗ALK融合阳性的NSCLC患者中都取得 ...

  7. python 日期的减法

    from datetime import date a = date(,,) b = date(,,) print(b-a)

  8. 递归--练习11--noi9273 PKU2506Tiling

    递归--练习11--noi9273 PKU2506Tiling 一.心得 25 a[i]%=10;(高精度时) 26 这里错了,花了好久改好 27 28 29 int* f(int n){ 30 if ...

  9. 雷林鹏分享:Ruby CGI 编程

    Ruby CGI 编程 Ruby 是一门通用的语言,不仅仅是一门应用于WEB开发的语言,但 Ruby 在WEB应用及WEB工具中的开发是最常见的. 使用Ruby您不仅可以编写自己的SMTP服务器,FT ...

  10. bzoj2733: [HNOI2012]永无乡 线段树合并

    永无乡包含 n 座岛,编号从 1 到 n,每座岛都有自己的独一无二的重要度,按照重要度可 以将这 n 座岛排名,名次用 1 到 n 来表示.某些岛之间由巨大的桥连接,通过桥可以从一个岛 到达另一个岛. ...