Плагины форм jQuery EasyUI -Combobox

jQuery EasyUI 插件jQuery EasyUI Плагины

Наследуется от $.fn.combo.defaults. Переопределите настройки по умолчанию через $.fn.combobox.defaults.

Комбинированный список отображает редактируемое текстовое поле и раскрывающийся список, из которого пользователь может выбрать одно или несколько значений. Пользователи могут напрямую вводить текст в верхней части списка или выбирать одно или несколько существующих значений из списка.

Зависимости

  • combo

Использование

Создайте комбинированный список из элемента <select> с предопределённой структурой.

<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>.

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

Создайте комбинированный список с помощью JavaScript.

<input id="cc" name="dept" value="aa">

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

Создайте два зависимых комбинированных списка.

<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. Ниже перечислены свойства, добавленные для комбинированного списка.

Name Type Описание Default
valueField string Имя базового поля данных, привязанного к значению ComboBox. value
textField string Имя базового поля данных, привязанного к тексту ComboBox. 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 Определяет способ загрузки данных списка при изменении текста. Установите 'remote', если поле со списком загружает данные с сервера. В режиме 'remote' введённое пользователем значение будет отправлено на сервер как параметр HTTP-запроса с именем 'q' для получения новых данных. 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 функция Определяет способ фильтрации локальных данных, когда 'mode' имеет значение 'local'. Функция имеет два параметра:
q: текст, введённый пользователем.
row: данные строки в списке.
Верните true, чтобы разрешить отображение строки.

Пример кода:
$('#cc').combobox({
    filter: function(q, row){
        var opts = $(this).combobox('options');
        return row[opts.textField].indexOf(q) == 0;
    }
});
formatter функция Определяет способ отрисовки строки. Функция имеет один параметр: 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
loadFilter function(data) 返回要显示的过滤后数据。该属性从版本 1.3.3 开始可用。

Events

这些事件继承自 combo。以下是为 combobox 添加的事件。

Name Parameters Описание
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.

Name Parameters Описание
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 插件Плагины jQuery EasyUI Другие расширения