今天在开发过程中,遇到了一个如何关于向easyui插件combobox,添加下拉选项的问题。搞了很久,终于曲线找到了一条解决办法,把解决问题的过程记录如下,供有需要的人参考。
源代码如下,通过ajax调用,从服务端返回json字符串,并显示在客户端。
$('#test').combobox({
url:'地址',
valueField:'version',
textField:'name',
filter: function(q, row){
var opts = $(this).combobox('options');
return row[opts.textField].toLowerCase().indexOf(q.toLowerCase()) >= 0; // 同一转换成小写做比较,==0匹配首位,>=0匹配所有
}
});
现在需要对,返回的结果,增加一个值对选项。
最先想到的办法当然是通过操作combobox对象属性进行添加。但通过查看官方API,没有提供相应的方法。
好在有google和baidu,结果搜了一把,没有任何可用方案。网上有方案如下:
$('#test').append('<option value="">增加内容</option>');
证实这个方案起不到任何作用。
最后想用最直接的方法,后台在返回数据的时候,添加上我需要的键值对,这样前台显示的内容有了,但总感觉这个方法有点挫,还是不甘心就这么作罢了。
再次查看官方API,发现有个data属性,自动将data属性对应的json对象,解析为combobox下拉列表。突然想到,通过设置、修改data属性值来完成combobox下拉列表的添加。改造代码如下:
$.ajax({
url: '远程地址',
dataType: 'json',
success: function(jsonstr){
// 修改ajax返回的值
jsonstr.push({
'name':'新增值',
'version':'新增键'
});
$('#test').combobox({
data:jsonstr,
valueField:'version',
textField:'name',
filter: function(q, row){
var opts = $(this).combobox('options');
return row[opts.textField].toLowerCase().indexOf(q.toLowerCase()) >= 0; // 同一转换成小写做比较,==0匹配首位,>=0匹配所有
}
});
}
});
这样,就解决了通过服务端返回的数据,使用combobox,在前端进行动态添加修改键值对。绕了一圈,总算解决问题。
PS:如果大家有其他什么好的方法,欢迎提供。
分享到:
相关推荐
EasyUI 是一个基于 jQuery 的 UI 插件库,它提供了丰富的界面组件,包括我们这里讨论的 Combobox 和 Combotree。这两个组件都是用于在前端展示下拉选择框,但 Combotree 还增加了树形结构的功能,使得用户可以选择树...
这里的`data.json`应提供下拉选项的数据,`valueField`和`textField`分别指定值字段和显示字段。 为了增加交互性,我们可能还需要监听ComboBox的事件,例如“onSelect”,当用户从下拉列表中选择一项时触发。这可以...
Combo组件类似于一个带有下拉选项的输入框,而Combobox则是更高级的选择框,它既可以像Combo一样显示预设选项,也可以像文本框一样进行编辑。 知识点二:添加清除值功能的思路 为了给Combo和Combobox添加清除值功能...
首先,jQuery EasyUI 是一个基于 jQuery 的 UI 库,提供了丰富的组件和插件,如 ComboBox(下拉框)。ComboBox 是一种组合输入框和下拉列表的控件,用户可以手动输入或从下拉列表中选择值。 在"省市县"的三级联动中...
总之,使用EasyUI插件美化下拉多选框,可以使开发者快速创建出符合设计规范且易于使用的多选下拉菜单。通过调整样式、配置参数以及利用JavaScript进行动态交互,可以实现各种定制化的功能,满足不同项目的需求。在...
5. **其他扩展功能**:除了以上提到的,扩展可能还包括对其他组件的增强,例如下拉菜单(combobox)、树形结构(tree)、表单验证(form validation)等。这些增强可能涉及到性能优化、新功能添加或现有功能的定制化...
EasyUI 是一个基于 jQuery 的 UI 插件集合,它提供了一套完整的用户界面组件库,包括但不限于按钮、对话框、菜单、表格等。这些组件不仅易于使用,而且功能丰富,可以帮助开发者快速构建出美观且交互性良好的 Web ...
1. **组件丰富**:EasyUI提供了大量的预定义组件,如表格(datagrid)、对话框(dialog)、下拉选择框(combobox)、树形结构(tree)、表单(form)等,这些组件可以直接用于快速构建功能丰富的网页应用。...
EasyUI包含了一系列的组件,如对话框(dialog)、表格(datagrid)、下拉菜单(combobox)、树形控件(tree)、按钮(button)等,这些组件可以满足网页设计中的各种需求。每个组件都有详细的配置选项和API,可以...
- **Combobox**:下拉列表,结合输入框,提供预设选项供用户选择,同时支持手动输入。 - **Pagination**:分页组件,帮助用户在大量数据中分页浏览,提供上一页、下一页、跳转页码等操作。 **3. 使用步骤** - ...
EasyUI 提供了诸如窗口(Window)、表单(Form)、面板(Panel)、菜单(Menu)等丰富的组件,以及数据网格(DataGrid)、树形控件(Tree)和下拉选择框(ComboBox)等数据展示和交互的工具。 2. **组件介绍** - *...
- **ComboBox**:下拉框,结合输入框和下拉列表,提供多种选择。 - **Menu**:菜单栏,用于组织和展示多个操作选项。 - **Button**:按钮,可触发相应的操作。 - **Form**:表单,用于收集用户输入的数据。 3....
1. **组件库**:EasyUI 提供了多种组件,如对话框(dialog)、表格(datagrid)、表单(form)、菜单(menu)、树形视图(tree)、下拉选择框(combobox)、滑块(slider)等,这些组件都封装了丰富的功能,能适应...
- **实例**:jQuery EasyUI 提供了大量的示例代码,帮助开发者了解如何使用各个组件,如对话框(dialog)、表格(datagrid)、树形控件(tree)、下拉菜单(combobox)等。 ### 2. 主要组件介绍 #### 2.1 数据网格...
EasyUI 的组件包括但不限于:数据表格(datagrid)、对话框(dialog)、下拉菜单(combobox)、按钮(button)等,这些组件都经过精心设计,符合常见的业务需求和交互习惯。 在压缩包中的"认识EasyUI_帮助手册"中,...
EasyUI 的核心组件包括:布局(layout)、表格(datagrid)、对话框(dialog)、菜单(menu)、表单(form)、树形控件(tree)、下拉树(combotree)、下拉框(combobox)、按钮(button)、提示(tooltip)等。...
- **下拉列表(ComboBox)**:组合输入框,提供下拉选项供用户选择。 - **日期选择器(DatePicker)**:用户选择日期的控件,常用于日志记录或预约系统。 - **滑块(Slider)**:用于数值选择,通常在需要连续...
combobox:修复在加载包含所选项数据的时候不会触发“onSelect”事件的BUG; datagrid:修复在字段设置为一个空值的时候导致在某些情况下“updateRow”方法无法正常工作的BUG。 Improvement(改进) 一个label标签...
- **下拉列表**: `<input class="easyui-combobox" ... />` - **日期选择器**: `<input class="easyui-datebox" ... />` #### 4. **布局与容器** - **面板**: `<div class="easyui-panel" ... >` - 可嵌套其他 UI...
2. **EasyUI组件**:jQuery EasyUI包含了大量的UI组件,如对话框(dialog)、表格(datagrid)、表单(form)、菜单(menu)、分页(pagination)、下拉树(combobox)、树形控件(tree)和拖放功能(draggable/...