EasyUi combobox下拉列表相当于html的select,对应关系valueField-->value;extField-->text。
1、一个简单的为combobox赋值的例子如下:
将平台数据提交的页面
//跳转到角色封禁页面 @RequestMapping(value = "/tolist") public ModelAndView userMessageYeMian(){ List<Platform> platforms=platformService.selectPlatform(null); return new ModelAndView("gm/mh/userManager/forbidAction").addObject("platforms", platforms); }
<form action="exportUser.do" id="userMessageForm" method="post"> <table cellpadding="3" cellspacing="5"> <tr style="font-size: 13px;"> <td width="50" align="right"> 平台:</td> <td align="left"> <select class="easyui-combobox" style="width:130px;" name="platformID" id="platformID"> <c:forEach items="${platforms}" var="platform"> <option value="${platform.platformId}" >${platform.platformName}</option> </c:forEach> </select> </td> <td width="50" align="right"> 服:</td> <td align="left"> <select class="easyui-combobox" style="width:130px;" name="areaID" id="areaID" editable=false panelHeight="auto"> </select> </td> </tr> </table> </form>
$(document).ready(function(){ //在页面加载的时候根据平台号去后台查找平台下的服务器,然后默认选择第一向 var id= jQuery("#platformID option:selected").val(); if(id!=null && id !=""){ $('#areaID').combobox({ url:"./getserver.do?platformId="+id, valueField:'serverid', textField:'serverName' , onLoadSuccess:function(){ //加载完成后,设置选中第一项 var val = $(this).combobox("getData"); for (var item in val[0]) { if (item == "serverid") { $(this).combobox("select", val[0][item]); } } } }); } //根据平台获得服务数据(二级联查) //当重新选择平台后重新设置服务器 $('#platformID').combobox({ onSelect:function(newValue, oldValue){ var platformId = $('input[name=platformID]').val(); server.combobox({ disabled: false, url:"./getserver.do?platformId="+platformId, valueField: 'serverid', textField: 'serverName' }).combobox('clear'); } }); var server = $('#areaID').combobox({ valueField:'serverid', textField:'serverName', editable:false }); });
//根据平台查询服 @RequestMapping(value="/getserver",method=RequestMethod.POST) @ResponseBody public List<GameServer> getserver(HttpServletRequest request) throws Exception{ String platformId = request.getParameter("platformId") == "" ? null : request.getParameter("platformId"); //平台名称 Map<String,Object> params = new HashMap<String,Object>(); params.put("platformId", platformId); List<GameServer> servers = gameServerService.getServerByGameId(params); return servers; }
2、提高例子
$(document).ready(function(){ //根据游戏、平台获得服务数据(二级联) $('#platform').combobox({ onSelect:function(newValue, oldValue){ var gameId = $('input[name=gameId]').val(); var platform = $('input[name=platform]').val(); $('#serverId').combobox({ disabled: false, url:"./getserver.do?gameId="+gameId+"&platform="+platform, valueField: 'serverid', textField: 'serverName', //加载成功后,设置默认选择第一项 onLoadSuccess:function(){ var data = $('#serverId').combobox('getData'); if(data.length > 0){ $("#serverId").combobox('setValue',data[0].serverId); } } }).combobox('clear'); } }); $('#serverId').combobox({ valueField:'serverId', textField:'serverName', editable:false }); });
相关推荐
`easyui-combobox` 则是一个下拉选择框组件,允许用户从预定义的选项列表中选择一项。这两个组件在网页表单中非常常见,可以用于收集用户的输入数据。 `onchange` 事件是 JavaScript 中的一个重要事件,它会在元素...
Combobox是EasyUI中的一个下拉框组件,它结合了输入框和下拉列表的优点,常用于数据筛选或选择操作。在单选模式下,用户只能选择一个选项。然而,在某些场景下,用户可能需要同时选择多个选项,这时就需要开启...
本文实例为大家分享了EasyUI Combobox下拉列表的具体代码,供大家参考,具体内容如下 1. html代码 性别: <input class="easyui-combobox" style="width: 100px;" type="text" id="gender" /> 2.显示 3.js...
EasyUI是一个基于jQuery的轻量级前端框架,它提供了一系列易于使用的UI组件,包括Combobox,用于创建下拉列表框,同时支持后台数据加载,实现动态筛选和搜索功能。 **EasyUI Combobox组件** EasyUI的Combobox组件...
Combobox 是 EasyUI 中的一个基础组件,它允许用户从下拉列表中选择一个值。在后端,我们需要组装数据成 JSON 格式,以便于传递给前端。JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读...
在jQuery EasyUI中,DataGrid是一种常用的表格展示控件,它可以与各种编辑器结合使用,如combobox(下拉框)来实现更丰富的交互功能。本文主要探讨的是如何利用jQuery EasyUI的DataGrid和combobox组件实现多级联动的...
2. **Combobox and Combotree**:这两个组件用于创建下拉列表和下拉树。Combobox用于简单的选项选择,而Combotree则适用于层级结构的数据选择。通过这些示例,你可以学习如何绑定数据源,如何触发事件,以及如何实现...
5. **Combobox**:Combobox 是下拉选择框组件,它提供了输入框和下拉列表的组合,方便用户在预设选项中选择,同时允许自定义输入。 6. **Layout**:Layout 组件用于构建页面布局,支持多区域划分,方便创建复杂且...
5. **下拉框(Combobox)**:结合了输入框和下拉列表,常用于选择项输入,可以极大地提高用户输入的效率和准确性。 6. **滑块(Slider)**:用于创建可滑动的条形控件,适用于数值选择或进度条显示。 此外,jQuery...
在默认情况下,ComboBox内的文本都是单一的颜色,但有时为了提高可读性或者美化界面,我们可能需要为ComboBox下拉框内的字体添加不同的颜色。本篇文章将详细介绍如何在ComboBox下拉框内实现字体加颜色的功能。 首先...
- **组件丰富**:jQuery EasyUI 提供了诸如对话框(Dialog)、表格(Grid)、树形控件(Tree)、下拉选择框(ComboBox)、菜单(Menu)等多种常见的 UI 控件,满足开发各种复杂界面的需求。 - **响应式设计**:...
1.2 主要组件:jQuery EasyUI 提供了包括对话框(Dialog)、表格(Grid)、菜单(Menu)、按钮(Button)、表单(Form)等多种组件,以及下拉列表(Combobox)和Layout布局在内的高级功能。 二、下拉列表(Combobox...
- **Combobox**:下拉菜单组件结合了输入框和下拉列表,方便用户从预定义的选项中选择,也可进行模糊搜索。 - **Datebox**:日期选择器组件提供日历控件,使用户能方便地选择日期,支持日期格式化和范围限制。 **...
本文实例为大家分享了EasyUI Combobox级联下拉列表的具体代码,供大家参考,具体内容如下 1. html代码 信息查询 学校: <input class="easyui-combobox" type="text" id="School" /> 院系: <...
ComboBox是一个常用的UI组件,通常用于提供下拉选择列表,而fieldLabel是与之相关的标签,用于显示提示信息。在某些设计中,我们可能希望fieldLabel不显示,以达到更简洁的界面效果。 在描述中提到的博客文章...
`easyui-combobox` 是一个组合输入框和下拉列表的组件,用户可以在输入框中输入文本,也可以从下拉列表中选择一个值。 12. **easyui-combotree (组合树形框)** `easyui-combotree` 将下拉列表扩展为树形结构,...
- 设置`combobox`的相关属性,例如`valueField`、`textField`等,这些属性分别表示下拉列表项的值字段和文本字段。 - 通过`url`属性指定获取省份数据的接口地址。 - 使用`onChange`事件监听省份的选择变化。 ``...
- 表单处理:表单组件如复选框(checkbox)、单选按钮(radio)、下拉列表(combobox)等,简化表单元素的创建和验证。 - 导航:菜单(menu)、导航条(navbar)、树形结构(tree)等,帮助用户在应用中导航。 - ...
这些组件包括但不限于:数据表格(datagrid)、对话框(dialog)、菜单(menu)、按钮(button)、表单(form)、树形视图(tree)、下拉树(combotree)、下拉列表(combobox)等。这些组件不仅在外观上美观,而且...