自强学堂
自强学堂:学习、分享、让你更强!
jQuery EasyUI 教程HTMLCSSJAVASCRIPTJQUERYSQLPHPBOOTSTRAPANGULARXML
×

jQuery EasyUI 教程

jQuery EasyUI 教程 jQuery EasyUI 简介

jEasyUI 应用

jEasyUI 创建 CRUD 应用 jEasyUI 创建 CRUD 数据网格 jEasyUI 表单的 CRUD 应用 jEasyUI 创建 RSS 阅读器

jEasyUI 拖放

jEasyUI 基本的拖动和放置 jEasyUI 创建拖放的购物车 jEasyUI 创建学校课程表

jEasyUI 菜单与按钮

jEasyUI 创建简单的菜单 jEasyUI 创建链接按钮 jEasyUI 创建菜单按钮 jEasyUI 创建分割按钮

jEasyUI 布局

jEasyUI 创建边框布局 jEasyUI 创建复杂布局 jEasyUI 创建折叠面板 jEasyUI 创建标签页 jEasyUI 动态添加标签页 jEasyUI 添加自动播放标签页 jEasyUI 创建 XP 风格左侧面板

jEasyUI 数据网格

jEasyUI 转换 HTML 表格为数据网格 jEasyUI 取得选中行数据 jEasyUI 添加查询功能 jEasyUI 添加工具栏 jEasyUI 创建复杂工具栏 jEasyUI 设置冻结列 jEasyUI 动态改变列 jEasyUI 格式化列 jEasyUI 设置排序 jEasyUI 自定义排序 jEasyUI 创建列组合 jEasyUI 添加复选框 jEasyUI 自定义分页 jEasyUI 启用行内编辑 jEasyUI 扩展编辑器 jEasyUI 列运算 jEasyUI 合并单元格 jEasyUI 创建自定义视图 jEasyUI 创建页脚摘要 jEasyUI 条件设置行背景颜色 jEasyUI 创建属性网格 jEasyUI 扩展行显示细节 jEasyUI 创建子网格 jEasyUI 显示海量数据 jEasyUI 添加分页组件

jEasyUI 窗口

jEasyUI 创建简单窗口 jEasyUI 自定义窗口工具栏 jEasyUI 窗口与布局 jEasyUI 创建对话框 jEasyUI 自定义对话框

jEasyUI 树形菜单

jEasyUI 使用标记创建树形菜单 jEasyUI 创建异步树形菜单 jEasyUI 树形菜单添加节点 jEasyUI 创建带复选框的树形菜单 jEasyUI 树形菜单拖放控制 jEasyUI 树形菜单加载父/子节点 jEasyUI 创建基础树形网格 jEasyUI 创建复杂树形网格 jEasyUI 树形网格动态加载 jEasyUI 树形网格添加分页 jEasyUI 树形网格惰性加载节点

jEasyUI 表单

jEasyUI 创建异步提交表单 jEasyUI 表单验证 jEasyUI 创建树形下拉框 jEasyUI 格式化下拉框 jEasyUI 过滤下拉数据网格

jEasyUI 参考手册

jQuery EasyUI 插件 jQuery EasyUI 扩展

 

jQuery EasyUI 表单插件 – Combobox 组合框


jQuery EasyUI 插件 jQuery EasyUI 插件

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

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

依赖

  • combo

用法

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

<select id="cc" class="easyui-combobox" name="dept" style="width:200px;">
    <option value="aa">aitem1</option>
    <option>bitem2</option>
    <option>bitem3</option>
    <option>ditem4</option>
    <option>eitem5</option>
</select>

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

<input id="cc" class="easyui-combobox" name="dept"
    data-options="valueField:'id',textField:'text',url:'get_data.php'">

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

<input id="cc" name="dept" value="aa">
$('#cc').combobox({
    url:'combobox_data.json',
    valueField:'id',
    textField:'text'
});

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

<input id="cc1" class="easyui-combobox" data-options="
    valueField: 'id',
    textField: 'text',
    url: 'get_data1.php',
    onSelect: function(rec){
    var url = 'get_data2.php?id='+rec.id;
    $('#cc2').combobox('reload', url);
    }">
<input id="cc2" class="easyui-combobox" data-options="valueField:'id',textField:'text'">

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)添加的属性。

名称类型描述默认值
valueFieldstring绑定到该组合框(ComboBox)的 value 上的基础数据的名称。value
textFieldstring绑定到该组合框(ComboBox)的 text 上的基础数据的名称。text
groupFieldstring指示要被分组的字段。该属性自版本 1.3.4 起可用。null
groupFormatterfunction(group)返回要显示在分组项目上的分组文本。该属性自版本 1.3.4 起可用。
代码实例:
$('#cc').combobox({
	groupFormatter: function(group){
		return '<span style="color:red">' + group + '</span>';
	}
});
modestring定义在文本改变时如何加载列表数据。如果组合框(combobox)从服务器加载就设置为 'remote'。当设置为 'remote' 模式时,用户输入的值将会被作为名为 'q' 的 http 请求参数发送到服务器,以获取新的数据。local
urlstring从远程加载列表数据的 URL 。null
methodstring用来检索数据的 http 方法。post
dataarray被加载的列表数据。
代码实例:
<input class="easyui-combobox" data-options="
		valueField: 'label',
		textField: 'value',
		data: [{
			label: 'java',
			value: 'Java'
		},{
			label: 'perl',
			value: 'Perl'
		},{
			label: 'ruby',
			value: 'Ruby'
		}]" />
null
filterfunction定义当 'mode' 设置为 'local' 时如何过滤本地数据。该函数有两个参数:
q:用户输入的文本。
row:列表中的行数据。
返回 true 则允许显示该行。

代码实例:
$('#cc').combobox({
	filter: function(q, row){
		var opts = $(this).combobox('options');
		return row[opts.textField].indexOf(q) == 0;
	}
});
formatterfunction定义如何呈现行。该函数有一个参数:row。
代码实例:
$('#cc').combobox({
	formatter: function(row){
		var opts = $(this).combobox('options');
		return row[opts.textField];
	}
});
loaderfunction(param,success,error)定义如何从远程服务器加载数据。返回 false 则取消该动作。该函数有下列参数:
param:要传到远程服务器的参数对象。
success(data):当获取数据成功时将被调用的回调函数。
error():当获取数据失败时将被调用的回调函数。
json loader
loadFilterfunction(data)返回要显示的过滤数据。该属性自版本 1.3.3 起可用。

事件

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

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

方法

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

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

jQuery EasyUI 插件 jQuery EasyUI 插件