EasyUI- combobox 实现下拉列表年份展示

最新推荐文章于 2024-09-03 14:39:23 发布

原创最新推荐文章于 2024-09-03 14:39:23 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #java #ViewUI

2017-开发整理【前端】同时被 2 个专栏收录

1 篇文章

订阅专栏

前端_jQuery EasyUI

1 篇文章

订阅专栏

使用EasyUI的combobox组件，通过jsp页面和java后台代码，展示了一个下拉列表，该列表仅包含年份数据，可用于日期选择或年龄筛选等功能。

部署运行你感兴趣的模型镜像

EasyUI实现：combobox 实现下拉列表展示年份

1. jsp 页面：

<input  title="年份" style="width: 99%;" type="text" name="feeDate" id="feeDate" value=""/>
<script type="text/javascript">
    //初始化数据
    $(function(){
	 //年份初始化
	 $('#feeDate').combobox({    
	    url:'orgbuild/party/djpartydues/djPartyDuesController/operation/queryYearList.json', 
	    valueField:'yearId',    
	    textField:'yearName'   
	 });  	
    }); 
</script>

2. java代码

/**
 * 获取年份列表
 * 当前年份及向前取10年的年份数据
 */
@RequestMapping(value = "/operation/queryYearList")
public ModelAndView queryYearList(HttpServletRequest request, HttpServletResponse response) throws Exception{
	//获取当前年份 及前10年的记录
	 String newYear = DateUtils.getYear();
	 int currentYear = Integer.parseInt(newYear);	    
        String date = "[";
        for(int i=0; i<10; i++){
	  String yearId = Integer.toString(currentYear);
	  String yearName = Integer.toString(currentYear)+"年";
	  date += "{\"yearId\":\"" + yearId + "\",\"yearName\":\"" + yearName + "\"}";
	    if(i<9){
		  date +=",";
	    }
	     currentYear--;  
	  }
	 date += "]";
         response.setCharacterEncoding("UTF-8");
	 PrintWriter out = response.getWriter();
	 out.write(date);
	 out.close();
	 return null;
}

//返回json 
// [{"yearId":"2017","yearName":"2017年"},{"yearId":"2016","yearName":"2016年"},{"yearId":"2015","yearName":"2015年"},{"yearId":"2014","yearName":"2014年"},{"yearId":"2013","yearName":"2013年"},{"yearId":"2012","yearName":"2012年"},{"yearId":"2011","yearName":"2011年"},{"yearId":"2010","yearName":"2010年"},{"yearId":"2009","yearName":"2009年"},{"yearId":"2008","yearName":"2008年"}]

展示效果：