jQuery Grid с автозаполнением

Question

Я создаю веб-приложение, используя jQuery и jQuery UI. Я в тупике. Мне нужна сетка jQuery, которая имеет редактируемые поля и каким-то образом включает поле автозаполнения в одну из этих редактируемых ячеек, и я не могу найти какие-либо предложения сетки, которые реализуют это.

Я смотрю на StickGrid и jgGrid

Мне особенно нравится jqGrid, так как он готов к Themeroller. Кто-нибудь знает, удалось ли кому-нибудь успешно интегрировать автозаполнение в одну из этих сеток или любую другую сетку jquery в этом отношении?

Answer 1

Я думаю, что вы хотите, должно быть достижимо довольно легко. Я сделал тебе быструю копирование-вставку / кражу вместе.

Если щелкнуть столбец «Дата», вы получите селектор календаря.

Если вы щелкнете по столбцу «Клиент» и удалите содержимое, вы увидите автозаполнение (css не подходит для быстрой вставки), в котором перечислены американские города (я знаю, что города - это не названия клиентов, а просто демо).

Код взят из jqGrid Демонстрационная страница редактирования ячейки + Автозаполнение jQuery Демонстрационная страница

http://jsbin.com/owatu (добавьте /edit к URL, чтобы увидеть код)

Конечно, демо немного грубовато по краям

• проблемы css
• быстрый взлом в afterSaveCell вставлен, чтобы получить jQgrid для вставки выбранного значения из автозаполнения, если пользователь использует клавиши со стрелками + клавиша ввода с мышью, он работает без взлома

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

В основном это сводится к

jQuery("#celltbl").jqGrid({
    ...
    {name:'name', width:100, editable:true}, //e.g.
    ...
    afterEditCell: function (id,name,val,iRow,iCol) {
        if(name=='name') {
            //cities here is local json object
            jQuery("#"+iRow+"_name","#celltbl").autocomplete(cities);
        }
    },
    afterSaveCell : function(rowid,name,val,iRow,iCol) {
        if(name == 'name') {
            jQuery("#celltbl").jqGrid('setRowData',rowid,{name:jQuery(".ac_over").text()});
            jQuery(".ac_results").remove();
        }
    }
    ...

Answer 2

Я не реализовал автозаполнение, но я работал с jqGrid, и он имеет потрясающую поддержку событий javascript.

Например: Если вы поместили идентификатор в одну из ячеек и хотите автоматически заполнить информацию в других ячейках, вы можете использовать afterEditCell, где вы указываете пользовательскую функцию, которая будет получать rowid, имя ячейки, значение, iRow, iCol и проверять, является ли iRow той же строкой, что и ваш идентификатор, принимать это значение и заполнять другие ячейки на основе этого значения. - в основном автозаполнение

Или можете использовать событие beforeEditCell и создать свою собственную функцию, которая будет получать rowid, имя ячейки, значение, iRow, iCol и возвращаемый результат будут помещены в ячейку.

проверить раздел событий http://www.trirand.com/jqgridwiki/doku.php?id=wiki:cell_editing

удачи!