`

关于向easyui插件combobox,添加下拉选项

阅读更多
    今天在开发过程中,遇到了一个如何关于向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-combobox、combotree后台数据数据组装与前台绑定实例

    EasyUI 是一个基于 jQuery 的 UI 插件库,它提供了丰富的界面组件,包括我们这里讨论的 Combobox 和 Combotree。这两个组件都是用于在前端展示下拉选择框,但 Combotree 还增加了树形结构的功能,使得用户可以选择树...

    unigui_easyui_combo_下拉panel

    这里的`data.json`应提供下拉选项的数据,`valueField`和`textField`分别指定值字段和显示字段。 为了增加交互性,我们可能还需要监听ComboBox的事件,例如“onSelect”,当用户从下拉列表中选择一项时触发。这可以...

    jQuery EasyUI 为Combo,Combobox添加清除值功能的实例

    Combo组件类似于一个带有下拉选项的输入框,而Combobox则是更高级的选择框,它既可以像Combo一样显示预设选项,也可以像文本框一样进行编辑。 知识点二:添加清除值功能的思路 为了给Combo和Combobox添加清除值功能...

    jquery easyui combobox mysql 数据库的省市县三级联动的例子

    首先,jQuery EasyUI 是一个基于 jQuery 的 UI 库,提供了丰富的组件和插件,如 ComboBox(下拉框)。ComboBox 是一种组合输入框和下拉列表的控件,用户可以手动输入或从下拉列表中选择值。 在"省市县"的三级联动中...

    下拉多选框美化下拉多选框美化下拉多选框美化

    总之,使用EasyUI插件美化下拉多选框,可以使开发者快速创建出符合设计规范且易于使用的多选下拉菜单。通过调整样式、配置参数以及利用JavaScript进行动态交互,可以实现各种定制化的功能,满足不同项目的需求。在...

    easyui扩展版本的插件

    5. **其他扩展功能**:除了以上提到的,扩展可能还包括对其他组件的增强,例如下拉菜单(combobox)、树形结构(tree)、表单验证(form validation)等。这些增强可能涉及到性能优化、新功能添加或现有功能的定制化...

    Easyui二级联动

    EasyUI 是一个基于 jQuery 的 UI 插件集合,它提供了一套完整的用户界面组件库,包括但不限于按钮、对话框、菜单、表格等。这些组件不仅易于使用,而且功能丰富,可以帮助开发者快速构建出美观且交互性良好的 Web ...

    简单的easyui页面

    1. **组件丰富**:EasyUI提供了大量的预定义组件,如表格(datagrid)、对话框(dialog)、下拉选择框(combobox)、树形结构(tree)、表单(form)等,这些组件可以直接用于快速构建功能丰富的网页应用。...

    EasyUI的说明文档

    EasyUI包含了一系列的组件,如对话框(dialog)、表格(datagrid)、下拉菜单(combobox)、树形控件(tree)、按钮(button)等,这些组件可以满足网页设计中的各种需求。每个组件都有详细的配置选项和API,可以...

    Jquery EasyUI 最新版本

    - **Combobox**:下拉列表,结合输入框,提供预设选项供用户选择,同时支持手动输入。 - **Pagination**:分页组件,帮助用户在大量数据中分页浏览,提供上一页、下一页、跳转页码等操作。 **3. 使用步骤** - ...

    jquery-easyui完整demo演示

    EasyUI 提供了诸如窗口(Window)、表单(Form)、面板(Panel)、菜单(Menu)等丰富的组件,以及数据网格(DataGrid)、树形控件(Tree)和下拉选择框(ComboBox)等数据展示和交互的工具。 2. **组件介绍** - *...

    easyui的例子

    - **ComboBox**:下拉框,结合输入框和下拉列表,提供多种选择。 - **Menu**:菜单栏,用于组织和展示多个操作选项。 - **Button**:按钮,可触发相应的操作。 - **Form**:表单,用于收集用户输入的数据。 3....

    jQuery EasyUI Demo 官方实例

    1. **组件库**:EasyUI 提供了多种组件,如对话框(dialog)、表格(datagrid)、表单(form)、菜单(menu)、树形视图(tree)、下拉选择框(combobox)、滑块(slider)等,这些组件都封装了丰富的功能,能适应...

    jquery easyUI

    - **实例**:jQuery EasyUI 提供了大量的示例代码,帮助开发者了解如何使用各个组件,如对话框(dialog)、表格(datagrid)、树形控件(tree)、下拉菜单(combobox)等。 ### 2. 主要组件介绍 #### 2.1 数据网格...

    关于easyUI基础知识

    EasyUI 的组件包括但不限于:数据表格(datagrid)、对话框(dialog)、下拉菜单(combobox)、按钮(button)等,这些组件都经过精心设计,符合常见的业务需求和交互习惯。 在压缩包中的"认识EasyUI_帮助手册"中,...

    easyui1.5中文API+easyui1.5.5.4

    EasyUI 的核心组件包括:布局(layout)、表格(datagrid)、对话框(dialog)、菜单(menu)、表单(form)、树形控件(tree)、下拉树(combotree)、下拉框(combobox)、按钮(button)、提示(tooltip)等。...

    easyui demo

    - **下拉列表(ComboBox)**:组合输入框,提供下拉选项供用户选择。 - **日期选择器(DatePicker)**:用户选择日期的控件,常用于日志记录或预约系统。 - **滑块(Slider)**:用于数值选择,通常在需要连续...

    jQuery EasyUI 1.5 离线简体中文API文档 含完整开发工具包+皮肤+扩展+演示

    combobox:修复在加载包含所选项数据的时候不会触发“onSelect”事件的BUG; datagrid:修复在字段设置为一个空值的时候导致在某些情况下“updateRow”方法无法正常工作的BUG。 Improvement(改进) 一个label标签...

    李炎恢jQuery EasyUI讲义代码

    - **下拉列表**: `&lt;input class="easyui-combobox" ... /&gt;` - **日期选择器**: `&lt;input class="easyui-datebox" ... /&gt;` #### 4. **布局与容器** - **面板**: `&lt;div class="easyui-panel" ... &gt;` - 可嵌套其他 UI...

    jquery-easyui文档

    2. **EasyUI组件**:jQuery EasyUI包含了大量的UI组件,如对话框(dialog)、表格(datagrid)、表单(form)、菜单(menu)、分页(pagination)、下拉树(combobox)、树形控件(tree)和拖放功能(draggable/...

Global site tag (gtag.js) - Google Analytics