博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery EasyUI 表单插件 - Combobox 组合框
阅读量:4563 次
发布时间:2019-06-08

本文共 2891 字,大约阅读时间需要 9 分钟。

扩展自 $.fn.combo.defaults。通过 $.fn.combobox.defaults 重写默认的 defaults。

组合框(combobox)显示一个可编辑的文本框和下拉列表,用户可以从下拉列表中选择一个或多个值。用户可以直接输入文本到列表的顶部,或者从列表中选择一个或多个现成的值。

依赖

  • combo

用法

从带有预定义结构的 <select> 元素创建组合框(combobox)。

从 <input> 标记创建组合框(combobox)。

使用 javascript 创建组合框(combobox)。

$('#cc').combobox({    url:'combobox_data.json',    valueField:'id',    textField:'text'});

创建两个依赖的组合框(combobox)。

json 数据格式的示例:

[{    "id":1,    "text":"text1"},{    "id":2,    "text":"text2"},{    "id":3,    "text":"text3",    "selected":true},{    "id":4,    "text":"text4"},{    "id":5,    "text":"text5"}]

属性

该属性扩展自组合(combo),下面是为组合框(combobox)添加的属性。

名称 类型 描述 默认值
valueField string 绑定到该组合框(ComboBox)的 value 上的基础数据的名称。 value
textField string 绑定到该组合框(ComboBox)的 text 上的基础数据的名称。 text
groupField string 指示要被分组的字段。该属性自版本 1.3.4 起可用。 null
groupFormatter function(group) 返回要显示在分组项目上的分组文本。该属性自版本 1.3.4 起可用。
代码实例:
$('#cc').combobox({	groupFormatter: function(group){		return '' + group + '';	}});
 
mode string 定义在文本改变时如何加载列表数据。如果组合框(combobox)从服务器加载就设置为 'remote'。当设置为 'remote' 模式时,用户输入的值将会被作为名为 'q' 的 http 请求参数发送到服务器,以获取新的数据。 local
url string 从远程加载列表数据的 URL 。 null
method string 用来检索数据的 http 方法。 post
data array 被加载的列表数据。
代码实例:
null
filter function 定义当 'mode' 设置为 'local' 时如何过滤本地数据。该函数有两个参数:
q:用户输入的文本。
row:列表中的行数据。
返回 true 则允许显示该行。
代码实例:
$('#cc').combobox({	filter: function(q, row){		var opts = $(this).combobox('options');		return row[opts.textField].indexOf(q) == 0;	}});
 
formatter function 定义如何呈现行。该函数有一个参数:row。
代码实例:
$('#cc').combobox({	formatter: function(row){		var opts = $(this).combobox('options');		return row[opts.textField];	}});
 
loader function(param,success,error) 定义如何从远程服务器加载数据。返回 false 则取消该动作。该函数有下列参数:
param:要传到远程服务器的参数对象。
success(data):当获取数据成功时将被调用的回调函数。
error():当获取数据失败时将被调用的回调函数。
json loader
loadFilter function(data) 返回要显示的过滤数据。该属性自版本 1.3.3 起可用。  

事件

该事件扩展自组合(combo),下面是为组合框(combobox)添加的事件。

名称 参数 描述
onBeforeLoad param 在请求加载数据之前触发,返回 false 则取消加载动作。
代码实例:
// change the http request parameters before load data from server$('#cc').combobox({	onBeforeLoad: function(param){		param.id = 2;		param.language = 'js';	}});
onLoadSuccess none 当远程数据加载成功时触发。
onLoadError none 当远程数据加载失败时触发。
onSelect record 当用户选择一个列表项时触发。
onUnselect record 当用户取消选择一个列表项时触发。

方法

该方法扩展自组合(combo),下面是为组合框(combobox)添加或重写的方法。

名称 参数 描述
options none 返回选项(options)对象。
getData none 返回加载的数据。
loadData data 加载本地列表数据。
reload url 请求远程的列表数据。传 'url' 参数来重写原始的 URL 值。
代码实例:
$('#cc').combobox('reload');  // reload list data using old URL$('#cc').combobox('reload','get_data.php');  // reload list data using new URL
setValues values 设置组合框(combobox)值的数组。
代码实例:
$('#cc').combobox('setValues', ['001','002']);
setValue value 设置组合框(combobox)的值。
代码实例:
$('#cc').combobox('setValue', '001');
clear none 清除组合框(combobox)的值。
select value 选择指定的选项。
unselect value 取消选择指定的选项。

转载于:https://www.cnblogs.com/plzdaye/p/3947710.html

你可能感兴趣的文章
进程/线程切换原则
查看>>
正则表达式语法
查看>>
20165301 2017-2018-2 《Java程序设计》第四周学习总结
查看>>
Vue的简单入门
查看>>
urllib 中的异常处理
查看>>
通过SQL Server的扩展事件来跟踪SQL语句在运行时,时间都消耗到哪儿了?
查看>>
gulp
查看>>
pgsql查询优化之模糊查询
查看>>
不变模式
查看>>
20181227 新的目标
查看>>
androidtab
查看>>
php 事件驱动 消息机制 共享内存
查看>>
剑指offer 二叉树的bfs
查看>>
LeetCode Maximum Subarray
查看>>
让我们再聊聊浏览器资源加载优化
查看>>
underscore demo
查看>>
CSS hack
查看>>
浏览器全屏之requestFullScreen全屏与F11全屏
查看>>
软件包管理:rpm命令管理-安装升级与卸载
查看>>
旋转图像
查看>>