forme jQuery EasyUI plugin - zone de liste déroulante Combobox
jQuery EasyUI plug - in Extended de .fn.combo.defaults de $. Par $ .fn.combobox.defaults remplacent les valeurs par défaut par défaut.
Combo box (combobox) affiche une zone de texte et listes déroulantes peuvent être modifiés, l'utilisateur peut sélectionner une ou plusieurs valeurs de la liste déroulante. L'utilisateur peut saisir du texte directement dans le haut de la liste, ou sélectionnez un ou plus de valeur existante dans la liste.
Fiez
- combo
usage
Créer une zone de liste déroulante de l'élément <select> avec une structure prédéfinie (combobox).
<Select id = class "cc" = name = le style "easyui-combobox" "dept" = "width: 200px;">
<Option value = "aa"> aitem1 </ option>
<Option> bitem2 </ option>
<Option> bitem3 </ option>
<Option> ditem4 </ option>
<Option> eitem5 </ option>
</ Select>
De la <input> balises créent une zone de liste déroulante (ComboBox).
<Entrée id = classe "cc" = "easyui-combobox" name = "dept"
data-options = "ValueField: 'id', textField: 'text', url: 'get_data.php'">
Utilisez javascript pour créer une zone de liste déroulante (ComboBox).
<Id d'entrée = "cc" name = valeur "dept" = "aa">
$ ( '# Cc'). Combobox ({
url: 'combobox_data.json',
ValueField: 'id',
textField: 'text'
});
Créer deux zones de liste déroulante à charge (combobox).
<Entrée id = classe "cc1" = "easyui-combobox" data-options = "
ValueField: 'id',
textField: «texte»,
url: 'get_data1.php',
onSelect: function (rec) {
var url = + rec.id 'id = get_data2.php?';
. $ ( '# Cc2') combobox ( «reload», url);
} ">
<input id = classe "CC2" = "easyui-combobox" data-options = "ValueField: 'id', textField: 'text'">
json exemples de formats de données:
[{
"Id": 1,
"Texte": "text1"
}, {
"Id": 2,
"Texte": "text2"
}, {
"Id": 3,
"Texte": "text3",
"Sélectionné": true
}, {
"Id": 4,
"Texte": "text4"
}, {
"Id": 5,
"Texte": "text5"
}]
propriété
La propriété s'étend de la combinaison (combo), ce qui suit est une zone de liste déroulante (combobox) Propriété ajoutée.
| 名称 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| 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 '<span style="color:red">' + group + '</span>';
}
});
|
|
| mode | string | 定义在文本改变时如何加载列表数据。如果组合框（combobox）从服务器加载就设置为 'remote'。当设置为 'remote' 模式时，用户输入的值将会被作为名为 'q' 的 http 请求参数发送到服务器，以获取新的数据。 | local |
| url | string | 从远程加载列表数据的 URL 。 | null |
| method | string | 用来检索数据的 http 方法。 | post |
| data | array | 被加载的列表数据。 代码实例：
<input class="easyui-combobox" data-options="
valueField: 'label',
textField: 'value',
data: [{
label: 'java',
value: 'Java'
},{
label: 'perl',
value: 'Perl'
},{
label: 'ruby',
value: 'Ruby'
}]" />
|
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 起可用。 |
événement
L'événement élargi d'une combinaison (combo), ce qui suit est une zone de liste déroulante (ComboBox) pour ajouter un événement.
| 名称 | 参数 | 描述 |
|---|---|---|
| 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 | 当用户取消选择一个列表项时触发。 |
manière
Les méthodes étendent à partir d'une combinaison (combo), ce qui suit est une zone de liste déroulante (ComboBox) pour ajouter ou remplacer les méthodes.
| 名称 | 参数 | 描述 |
|---|---|---|
| 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 | 取消选择指定的选项。 |
jQuery EasyUI plug - in