jqGrid - встроенное редактирование с автозаполнением

Уверен, что уже видел это в примере, но больше не могу найти :(

У меня есть jqGrid со встроенным редактированием. Это нормально работает. В одном столбце есть поле выбора с 200 записями. Они уже извлекаются из запроса к базе данных.

Поскольку 200 записей - это слишком много, я хочу иметь поле ввода и поиск в реальном времени. После нажатия на нее идентификатор должен быть сохранен.

Кто-нибудь знает пример?

Большое спасибо, Антония


jquery autocomplete jqgrid inline-editing
person Antonia    schedule 29.10.2010    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вы можете использовать автозаполнение jQuery-ui, поскольку у вас уже есть библиотека jquery ui. Добавьте combobox.js, который настроит автозаполнение на основе значений поля выбора, просто класс "combobox" к нему.

// jquery and jquery UI already loaded...
<script src="combobox.js"></script>
<select class="combobox">
    <option value="foo">foo</option>
    <option value="bar">bar</option>
    <option value="baz">baz</option>
</select>

Живой пример: http://jsfiddle.net/CJTd2/1/

person denysonique    schedule 06.03.2011

arrow_upward
1
arrow_downward

попробуйте с этим:

function element(value,options){
    return $('<input type="hidden" value="'+value+'" />');
}
function elementval(elem){
    return elem.val();
}
function fieldfunctions(id){
    $( "#"+id+"_name").autocomplete({
        source: "list.php",
        minLength: 2,
        select: function(event, ui) {
            $("#"+id+"_id_name").val(ui.item.id);
        }
    });
}

$("#table").jqGrid({
    url: 'data.php',
    datatype: "json",
    mtype: 'POST', 
    height: 400,
    colNames: ['Name','Id name'],
    colModel: [
        {name: 'id_name',width: 30,hidden:true,editable:true,edittype:'custom',editoptions:{custom_element:element,custom_value:elementval}},
        {name: 'name',index: 'name',editable:true,edittype:'text',width: 100}

    ],
    onSelectRow: function(id){
        $("#table").jqGrid('editRow',id, true,fieldfunctions);
        }
    });
person fath    schedule 13.03.2012