`
wang_zhi_peng2007
  • 浏览: 248827 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

 
阅读更多

 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年"}]

  

 

   展示效果:


 
 

 

 

  • 大小: 3.7 KB
分享到:
评论

相关推荐

    easyui-textbox和easyui-combobox的onchange事件响应实例

    `easyui-combobox` 则是一个下拉选择框组件,允许用户从预定义的选项列表中选择一项。这两个组件在网页表单中非常常见,可以用于收集用户的输入数据。 `onchange` 事件是 JavaScript 中的一个重要事件,它会在元素...

    在easyui-combobox多选模式下加入选择所有选项

    &lt;select class="easyui-combobox" name="myComboBox" multiple="true"&gt; &lt;!-- 选项数据 --&gt; ``` 在多选模式下,用户可以通过Ctrl或Shift键进行多选,但默认情况下并没有提供“选择全部”功能。为了实现这一功能,...

    easyui中combobox后台交互实例

    &lt;select class="easyui-combobox" name="myCombobox" style="width:200px;"&gt; ``` 或 ```html &lt;input type="text" class="easyui-combobox" name="myCombobox" style="width:200px;"&gt; ``` **后台交互** 实现后台...

    easyui-combobox、combotree后台数据数据组装与前台绑定实例

    总结来说,"easyui-combobox、combotree后台数据数据组装与前台绑定实例" 主要涉及两个部分:后端 C# 数据组装成 JSON 格式,以及前端使用 EasyUI 的 Combobox 和 Combotree 组件进行数据绑定。通过这样的方式,我们...

    EasyUI学习之Combobox下拉列表(1)

    本文实例为大家分享了EasyUI Combobox下拉列表的具体代码,供大家参考,具体内容如下 1. html代码 性别: &lt;input class="easyui-combobox" style="width: 100px;" type="text" id="gender" /&gt; 2.显示 3.js...

    jquery-easyui-EDT-1.5.2-build1

    jquery-easyui-EDT-1.5.2-build1 jquery-easyui-EDT-1.5.2-build1

    easyui-combobox 实现简单的自动补全功能示例

    其中,easyui-combobox是一个下拉组合框组件,它可以通过输入框实现自动补全功能,这对于需要动态搜索和选择数据的Web应用程序来说非常有用。 在上述文件中,作者介绍了如何使用easyui-combobox实现自动补全功能。...

    更改easyui-datebox日期格式

    解决easyui-datebox日期格式,只需引入此包即可,不需改源码

    jquery-easyui-1.2.2 jquery-easyui-1.2.2

    jquery-easyui-1.2.2jquery-easyui-1.2.2jquery-easyui-1.2.2

    easyui-lang-zh_CN.js,easyui汉化包

    easyui插件的支持日期汉化,分页汉化,form表单提示汉化。

    jquery-easyui-EDT-1.4.2-中文文档

    1. **EasyUI 组件**:EasyUI 提供了多种组件,如对话框(Dialog)、表单(Form)、表格(Grid)、菜单(Menu)、树形控件(Tree)、下拉选择框(ComboBox)等,这些组件大大简化了网页界面的设计和交互实现。...

    jquery-easyui-1.7.0.zip官方文档

    1. 数据绑定:EasyUI 提供了数据绑定功能,可以轻松地将后台数据与前端UI组件关联,实现数据的动态展示和更新。 2. 组件丰富:包括对话框(Dialog)、表格(Grid)、表单(Form)、菜单(Menu)、树形控件(Tree)...

    jquery-easyui-1.3.5

    这个`jquery-easyui-1.3.5`版本是该框架的一个特定发行版,下面将详细介绍这个版本包含的知识点。 首先,`jQuery` 是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画效果以及Ajax交互。jQuery EasyUI...

    jQuery EasyUI编辑DataGrid用combobox实现多级联动

    在jQuery EasyUI中,DataGrid是一种常用的表格展示控件,它可以与各种编辑器结合使用,如combobox(下拉框)来实现更丰富的交互功能。本文主要探讨的是如何利用jQuery EasyUI的DataGrid和combobox组件实现多级联动的...

    用easyui-filebox上传Excel文件(ASP.NET MVC)

    &lt;input type="file" class="easyui-filebox" data-options="onSuccess:function(result){console.log(result);}" /&gt; // 可以在这里添加一些额外的JavaScript代码,例如设置FileBox的事件处理函数 ``` 接...

    EasyUI学习之Combobox级联下拉列表(2)

    本文实例为大家分享了EasyUI Combobox级联下拉列表的具体代码,供大家参考,具体内容如下 1. html代码 信息查询 学校: &lt;input class="easyui-combobox" type="text" id="School" /&gt; 院系: &lt;...

    jquery-easyui-1.0.5的API中文说明文档

    jquery-easyui-1.0.5API 使用说明文档 jquery_easyui_manual_cnjquery-easyui-1.0.5API 使用说明文档 jquery_easyui_manual_cnjquery-easyui-1.0.5API 使用说明文档 jquery_easyui_manual_cn

    可拖拽布局组件easyui-portal

    在`压缩包子文件的文件名称列表`中,我们看到的"可拖拽布局组件easyui-portal"可能包含以下内容:示例代码、样式表、JavaScript库、文档说明以及可能的预设布局文件。这些文件将帮助开发者更好地理解和使用`EasyUI-...

    jquery-easyui-1.5.5.zip

    easyui是一种基于jQuery的用户界面插件集合。 easyui为创建现代化,互动,JavaScript应用程序,提供必要的功能。 使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以定义用户界面。 easyui...

Global site tag (gtag.js) - Google Analytics