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

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

Расширяет $.fn.combo.defaults и $.fn.datagrid.defaults. Переопределите значения по умолчанию через $.fn.combogrid.defaults.

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

Зависимости

  • combo
  • datagrid

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

Создание combogrid

1. Создайте combogrid из разметки.

<select id="cc" class="easyui-combogrid" name="dept" style="width:250px;"
    data-options="
    panelWidth:450,
    value:'006',
    idField:'code',
    textField:'name',
    url:'datagrid_data.json',
    columns:[[
    {field:'code',title:'Code',width:60},
    {field:'name',title:'Name',width:100},
    {field:'addr',title:'Address',width:120},
    {field:'col4',title:'Col41',width:100}
    ]]
    "></select>

2. Создайте его из существующего элемента <select> или <input> с помощью JavaScript.

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

    $('#cc').combogrid({
    panelWidth:450,
    value:'006',
    idField:'code',
    textField:'name',
    url:'datagrid_data.json',
    columns:[[
    {field:'code',title:'Code',width:60},
    {field:'name',title:'Name',width:100},
    {field:'addr',title:'Address',width:120},
    {field:'col4',title:'Col41',width:100}
    ]]
    });

Функция автозаполнения

Давайте добавим функциональность автозаполнения в combogrid. Выпадающая таблица данных будет отображать возможные результаты на основе ввода пользователя.

$('#cc').combogrid({
    delay: 500,
    mode: 'remote',
    url: 'get_data.php',
    idField: 'id',
    textField: 'name',
    columns: [[
        {field:'code',title:'Code',width:120,sortable:true},
        {field:'name',title:'Name',width:400,sortable:true}
    ]]
});

На стороне сервера сначала нужно получить параметр 'q'. Можно выполнить запрос к базе данных, а затем вернуть браузеру результат SQL в формате JSON.

get_data.php: 

$q = isset($_POST['q']) ? $_POST['q'] : ''; // the request parameter
// query database and return JSON result data
$rs = mysql_query("select * from item where name like '$q%'");
echo json_encode(...);

Свойства

Эти свойства наследуются от combo и datagrid. Ниже перечислены свойства, добавленные для combogrid.

Name Type Описание Значение по умолчанию
loadMsg string Сообщение, отображаемое, когда datagrid загружает удаленные данные. null
idField string Имя поля для id. null
textField string Имя поля текста, отображаемого в текстовом поле. null
mode string Определяет, как загружать данные datagrid при изменении текста. Установите 'remote', если combogrid загружается с сервера. Когда установлен режим 'remote', введённое пользователем значение будет отправлено на сервер как параметр HTTP-запроса с именем 'q' для получения новых данных. local
filter function(q, row) Определяет, как выбирать локальные данные, когда для 'mode' установлено значение 'local'. Возвращайте true, чтобы выбрать эту строку.
Пример кода:
$('#cc').combogrid({
    filter: function(q, row){
        var opts = $(this).combogrid('options');
        return row[opts.textField].indexOf(q) == 0;
    }
});
100

Events

Эти события наследуются от combo и datagrid.

Методы

Эти методы наследуются от combo. Ниже перечислены методы, добавленные или переопределённые для combogrid.

Name Parameters Описание
options none Возвращает объект options.
grid none Возвращает объект datagrid. В примере ниже показано, как получить выбранную строку:
var g = $('#cc').combogrid('grid');    // get datagrid object
var r = g.datagrid('getSelected');    // get the selected row
alert(r.name);
setValues values Устанавливает массив значений компонента.
Пример кода:
$('#cc').combogrid('setValues', ['001','007']);
setValue value Устанавливает значение компонента.
Пример кода:
$('#cc').combogrid('setValue', '002');
clear none Очищает значение компонента.
jQuery EasyUI 插件Плагины jQuery EasyUI Другие расширения