Razor: автозаполнение текстового поля внутри jqGrid, как связать значения?

Question

Я разрабатываю страницу, на которой мне нужно показать jqGrid со встроенным режимом редактирования. (Razor view, MVC3) В Grid изначально не будет строк, но будет пустая строка для добавления элементов, и нажатие клавиши «enter» в последнем поле должно сохранить данные строки, а затем должна быть создана пустая 2-я строка.

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

Я уже написал метод контроллера, который обращается к БД и возвращает мне значения до контроллера. Эти значения доступны для автоматического заполнения.

Может ли кто-нибудь пролить свет на

1. Запись jqGrid с автозаполнением текстового поля внутри, которое связывает возвращаемые значения контроллера (я мог бы добиться этого, оставив текстовое поле вне сетки)

2. Сохранение первой строки после нажатия Enter и создание пустой второй строки

Отредактировано: Вот мой обновленный код:

   myGrid.jqGrid({
                url: '@Url.Action("Skills")',
                onSelectRow: function(currentSelectedRow)  {
                    alert("Always triggered inside");
                    if(currentSelectedRow && currentSelectedRow != $.lastSelectedRow){
                        alert("Before Block 1");
                        $('#jqgSkills').jqGrid('saveRow', $.lastSelectedRow, false); 
                        alert("After Block 1");
                        $.lastSelectedRow = currentSelectedRow; 
                   }
                    alert("before block 2");
                    $('#jqgSkills').jqGrid('editRow', $.lastSelectedRow, true); 
                    alert("after block 2");
                },

                datatype: 'json',
                mtype: 'POST',
                colNames: ['ID', 'SkillName', 'SkillType', 'RequiredDesired', 'RelevantExp'],
                colModel: [

                    {
                    name:'ID', index: 'ID', editable: true, width: 10
                    },
                    { name: 'SkillName', index: 'SkillName', editable: true, width: 150,
                        editoptions: {
                            sopt: ['cn', 'nc', 'bw', 'bn', 'eq', 'ne', 'ew', 'en', 'lt', 'le', 'gt', 'ge'],
                            dataInit: function (elem) {
                                $(elem).autocomplete({ source: '@Url.Action("GetSkillNameAutocomplete")' });
                            }
                        }
                    },
                    { name: 'SkillType', editable: true, index: 'SkillType', width: 40, edittype: 'select', editoptions: { dataUrl: '@Url.Action("SkillTypes")' }
                    },
                    { name: 'RequiredDesired', editable: true, index: 'RequiredDesired', width: 40, edittype:"select", editoptions:{value:":;R:Required;D:Desired"}
                    },
                    { name: 'RelevantExp', editable: true, index: 'RelevantExp', width: 40, key: true
                    },
                ],
               // pager: '#jqgpSkills',
                autowidth: true,
                rowNum: 10,
                rowList: [5, 10, 20, 50],
                sortname: 'SkillName',
                sortorder: 'asc',
                rownumbers: true,
                viewrecords: true,
                altRows: true,
                altclass: 'myAltRowClass',
                height: '100%',
                gridview: true,
                jsonReader: { cell: "" },
                caption: 'RRF - Skill Association',
            });

Вот кнопка "Нажмите, чтобы добавить строку"

$("#addrow").click( function(currentSelectedRow) {

            var emptyRow = [{ID:"",SkillName:"",RequiredDesired:"",RelevantExp:"" }];
            alert("Before new row addition");
            jQuery("#jqgSkills").addRowData(emptyRow.id, emptyRow);
            alert("new row added");
});

Answer 1

Посмотрите ответ с демо-проектом . В нем показано, как использовать автозаполнение jQuery UI при поиске. Если вы просто определите dataInit внутри editoptions вместо searchoptions , у вас будет то, что вам нужно.

ОБНОВЛЕНО : Вы должны прочитать ответ , который описывает, как jqGrid генерирует новый rowid, если id (первый параметр) в addRowData равен undefined или пустой строке "". Чтобы исправить вашу текущую проблему, вы можете сгенерировать rowid самостоятельно и выбрать новую добавленную строку явно , например, со следующим кодом:

$("#addrow").click( function(currentSelectedRow) {
    var myGrid = $("#jqgSkills"),
        rowid = $.jgrid.randId();

    myGrid.jqGrid('addRowData', rowid,
       {ID: "", SkillName: "", RequiredDesired: "", RelevantExp: ""}));
    myGrid.jqGrid('setSelection', rowid);
});