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(" ");
} //决定前边装饰的符号
if(num!=1){
if(m<(listGroups.size()-1)){
//说明循环没有到最后一次
sb.append(" ┠ ");
}else {
sb.append(" ┖ ");
}
}else {
sb.append(" ");
} //添加名字
sb.append(listGroups.get(i).getSysGroupName());
sb.append("</option>");
//循环一次了,循环次数的标示自增1
m++; //递归。用于添加当前组的子组(如果有,则sb会添加,如果没有,该方法运行一下,进入当前层的下一次循环)
handleSb(listGroups.get(i).getSysGroupId(), num);
} }
} }
html页面下拉列表中动态添加后台数据(格式化数据,显示出数据的层次感)的更多相关文章
- vue向数组中动态添加数据
vue中数据更新通过v-model实现,向数组中添加数据通过push()实现,向shortcuts数组中动态添加newShortcut对象中的title和action this.shortcuts.p ...
- 在页面中添加两个 <select> 标签,用来显示年份和月份;同时添加两个 <ul> 标签,一个用来显示星期,另一个用来显示日期 在 JavaScript 脚本中动态添加年份和月份,获取当前日期的年份
查看本章节 查看作业目录 需求说明: 使用 JavaScript 中的 Date 对象,在页面上显示一个万年历.选择不同的年份和月份,在页面中显示当前月的日历 实现思路: 在页面中添加两个 <s ...
- 谨记给UpdatePanel中动态添加的控件赋ID
原文:谨记给UpdatePanel中动态添加的控件赋ID 昨天下定决 心对上次做的布局编辑器控件加以改进,其中最主要变化的就是要完全使用ASP.NET AJAX!但是很遗憾,虽然耳闻已久,但目前对AS ...
- ASP.NET中Literal控件的使用方法(用于向网页中动态添加内容)
原文:https://www.jb51.net/article/82855.htm 可以将 Literal 控件用作网页上其他内容的容器.Literal 控件最常用于向网页中动态添加内容.简单的讲,就 ...
- Android 在布局容器中动态添加控件
这里,通过一个小demo,就可以掌握在布局容器中动态添加控件,以动态添加Button控件为例,添加其他控件同样道理. 1.addView 添加控件到布局容器 2.removeView 在布局容器中删掉 ...
- Android 在程序中动态添加 View 布局或控件
有时我们需要在程序中动态添加布局或控件等,下面用程序来展示一下相应的方法: 1.addView 添加View到布局容器 2.removeView 在布局容器中删掉已有的View 3.LayoutPar ...
- VC中动态添加控件
VC中动态添加控件 动态控件是指在需要时由Create()创建的控件,这与预先在对话框中放置的控件是不同的. 一.创建动态控件: 为了对照,我们先来看一下静态控件的创建. 放置静态控件时必须先建立一个 ...
- vue中动态添加div
知识点:vue中动态添加div节点,点击添加,动态生成div,点击删除,删除对应的div,其中数组的长度是动态改变的,如在from表单中应用,直接在提交方法中,获得list,获取所填的元素即可 效果: ...
- Celery 分布式任务队列快速入门 以及在Django中动态添加定时任务
Celery 分布式任务队列快速入门 以及在Django中动态添加定时任务 转自 金角大王 http://www.cnblogs.com/alex3714/articles/6351797.html ...
随机推荐
- C++ Primer 5th Edition自学笔记(1)
好吧,第一次写东西...如何下手呢...(请无视) -------------------------------------------------------------- Chapter 1. ...
- Mybatis 之 缓存结构
Mybatis默认提供两种缓存方式,一级缓存是SqlSession 级别的缓存,二级缓存是Mapper 级别的缓存 SqlSession 级别的缓存,每个缓存是相对独立,互不影响:Mapper 级别 ...
- springcloud11----turbine
package com.itmuch.cloud; import org.springframework.boot.SpringApplication; import org.springframew ...
- ubuntu 中启动SDK manager
Android SDK安装后,目录结构如下: root@localhost:/home/ranxf/Android/Sdk/android-sdk-linux# ll 总用量 drwxrwxr-x r ...
- sqoop2-1.99.5-cdh5.5.4.tar.gz的部署搭建
不多说,直接上干货! 首先,说下博主我,为什么,好端端的Sqoop1用的好好的,然后又安装和学习Sqoop2? 因为,在Cloudera Hue里的Sqoop,是需要Sqoop2. HUE配置文件hu ...
- python 判断列表字符串元素首尾字符是否相同
def match_words(words): ctr = for word in words: and word[] == word[-]: ctr += return ctr print(matc ...
- SpringBoot创建多模块方式以及打包方式
springboot重构多模块的步骤 模型层:model 持久层:persistence 表示层:web 步骤: 正常创建一个springboot项目 修改创建项目的pom文件,将jar修改为pom ...
- H5 canvas建造敌人坦克
接着上一篇(http://www.cnblogs.com/zhouhuan/p/H5_tankgame3.html),这一篇建造敌人的坦克. 思路是,基于可扩展性和性能等方面的考虑,用构造函数改造 ...
- 远程使用tomcat8的首页的管理工具
1.在%Tomcat_Home%/conf/Catalina/localhost中新建manager.xml,内容如下 <Context privileged="true" ...
- vs警告 当前源代码跟内置的版本不一致解决办法
本文转载于:http://blog.csdn.net/bull521/article/details/51334464 vs警告 当前源代码跟内置的版本不一致解决办法 1.删除掉 我的文档/visua ...