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年"}]
展示效果:
相关推荐
`easyui-combobox` 则是一个下拉选择框组件,允许用户从预定义的选项列表中选择一项。这两个组件在网页表单中非常常见,可以用于收集用户的输入数据。 `onchange` 事件是 JavaScript 中的一个重要事件,它会在元素...
<select class="easyui-combobox" name="myComboBox" multiple="true"> <!-- 选项数据 --> ``` 在多选模式下,用户可以通过Ctrl或Shift键进行多选,但默认情况下并没有提供“选择全部”功能。为了实现这一功能,...
总结来说,"easyui-combobox、combotree后台数据数据组装与前台绑定实例" 主要涉及两个部分:后端 C# 数据组装成 JSON 格式,以及前端使用 EasyUI 的 Combobox 和 Combotree 组件进行数据绑定。通过这样的方式,我们...
<select class="easyui-combobox" name="myCombobox" style="width:200px;"> ``` 或 ```html <input type="text" class="easyui-combobox" name="myCombobox" style="width:200px;"> ``` **后台交互** 实现后台...
本文实例为大家分享了EasyUI Combobox下拉列表的具体代码,供大家参考,具体内容如下 1. html代码 性别: <input class="easyui-combobox" style="width: 100px;" type="text" id="gender" /> 2.显示 3.js...
jquery-easyui-EDT-1.5.2-build1 jquery-easyui-EDT-1.5.2-build1
其中,easyui-combobox是一个下拉组合框组件,它可以通过输入框实现自动补全功能,这对于需要动态搜索和选择数据的Web应用程序来说非常有用。 在上述文件中,作者介绍了如何使用easyui-combobox实现自动补全功能。...
easyui-lang-zh_CN.js easyui-lang-zh_CN.js 页面开发,使用easyui,进行汉化使用js文件
easyui插件的支持日期汉化,分页汉化,form表单提示汉化。
解决easyui-datebox日期格式,只需引入此包即可,不需改源码
jquery-easyui-1.2.2jquery-easyui-1.2.2jquery-easyui-1.2.2
1. **EasyUI 组件**:EasyUI 提供了多种组件,如对话框(Dialog)、表单(Form)、表格(Grid)、菜单(Menu)、树形控件(Tree)、下拉选择框(ComboBox)等,这些组件大大简化了网页界面的设计和交互实现。...
1. 数据绑定:EasyUI 提供了数据绑定功能,可以轻松地将后台数据与前端UI组件关联,实现数据的动态展示和更新。 2. 组件丰富:包括对话框(Dialog)、表格(Grid)、表单(Form)、菜单(Menu)、树形控件(Tree)...
<input type="file" class="easyui-filebox" data-options="onSuccess:function(result){console.log(result);}" /> // 可以在这里添加一些额外的JavaScript代码,例如设置FileBox的事件处理函数 ``` 接...
这个`jquery-easyui-1.3.5`版本是该框架的一个特定发行版,下面将详细介绍这个版本包含的知识点。 首先,`jQuery` 是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画效果以及Ajax交互。jQuery EasyUI...
easyui日期,时间框汉化包,汉化easyui日期控件,时间控件。
在jQuery EasyUI中,DataGrid是一种常用的表格展示控件,它可以与各种编辑器结合使用,如combobox(下拉框)来实现更丰富的交互功能。本文主要探讨的是如何利用jQuery EasyUI的DataGrid和combobox组件实现多级联动的...
本文实例为大家分享了EasyUI Combobox级联下拉列表的具体代码,供大家参考,具体内容如下 1. html代码 信息查询 学校: <input class="easyui-combobox" type="text" id="School" /> 院系: <...
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"可能包含以下内容:示例代码、样式表、JavaScript库、文档说明以及可能的预设布局文件。这些文件将帮助开发者更好地理解和使用`EasyUI-...