java easyui combobox_JQuery EasyUI combobox(下拉列表框)



下拉列表框

继承 $.fn.combo.defaults. 重写 $.fn.combobox.defaults.

组合框显示一个可编辑的文本框和下拉列表,用户选择一个或多个值。用户可以直接输入文本到顶部的列表,或选择一个或多个当前值列表。

依赖

应用实例

从创建下拉列表框元素与一个预定义的结构。

EasyUI-combobox"name="dept"style="width:200px;">

aitem1

bitem2

bitem3

ditem4

eitem5

aitem1

bitem2

bitem3

ditem4

eitem5

创建下拉列表框从标记。

使用javascript创建下拉列表框。

$('#cc').combobox({

url:'combobox_data.json',

valueField:'id',

textField:'text'

});

$('#cc').combobox({

url:'combobox_data.json',

valueField:'id',

textField:'text'

});

创建两个依赖的组合框。

onSelect: function(rec){

var url='get_data2.php?id='+rec.id;

$('#cc2').combobox('reload', url);

}" />

json数据格式示例:

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

属性

属性从Combo扩展,下面是添加属性组合框。

名称

类型

说明

默认

valueField

string

底层数据值名称绑定到这个组合框，传到后台实际值。

value

textField

string

底层数据字段名称绑定到这个组合框，

text

mode

string

定义了如何加载列表数据当文本改变。设置为“remote“如果下拉列表框从服务器加载。当设置为“remot“模式下,用户类型将被发送的http请求参数命名为“q”服务器来检索新数据。

local

url

string

一个URL加载列表数据从远程。

null

method

string

http方法检索数据。

post

data

array

数据列表加载。代码示例:

null

filter

function

定义了如何过滤本地数据当“model”设置为“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。这个函数接受一个参数row.代码示例:

$('#cc').combobox({ formatter: function(row){ var opts = $(this).combobox('options'); return row[opts.textField]; } });

loader

function(param,success,error)

定义了如何加载数据从远程服务器。可以放弃这次行动返回false。这个函数接受以下参数:

param: 参数对象传递给远程

json loader

事件

事件从Combo扩展,下面是添加事件为下拉列表框。

名称

参数

说明

onBeforeLoad

param

在加载数据前触发事件，如果返回false则不会加载数据代码示例:

// 改变参数的http请求从

onLoadSuccess

none

当远程数据加载成功。

onLoadError

none

当远程数据加载错误。

onSelect

record

当用户选择一个列表项。

onUnselect

record

当用户取消选择列表项。

方法

从Combo的方法扩展,下面是添加或重写的方法为下拉列表框。

名称

参数

说明

options

none

返回选择对象。

getData

none

返回数据的加载。

loadData

加载区域列表数据。

reload

url

请求远程列表数据。通过“url”参数覆盖原始url值。代码示例:

$('#cc').combobox('reload'); // 重新加载列表数据使用旧的URL $('#cc').combobox('reload','get_

setValues

values

设置组合框值数组。代码示例:

$('#cc').combobox('setValues', ['001','002']);

setValue

value

设置下拉列表框的值。代码示例:

$('#cc').combobox('setValue', '001');

clear

none

清除下拉列表框值。

select

value

选择指定的项。

unselect

value

取消选择指定的项。