Razor：jqGrid 内的自动完成文本框，如何绑定值？

Question

我正在开发一个页面，我需要在其中显示具有内联编辑模式的 jqGrid。 （剃刀视图，MVC3） Grid 最初没有行，但有一个空行来添加项目并在最后一个字段上点击“enter”应该保存行数据，然后应该创建空的第二行。

网格中有 4 列，第一列应该是自动完成的。 我已经编写了多选 jqGrid，它工作正常。但现在方法改为自动完成。

我已经编写了控制器方法，它可以与 DB 对话，并在控制器之前获取值。这些值可用于自动完成。

有人能解释一下吗，

1. 用内部自动完成文本框编写 jqGrid，绑定控制器返回值（我可以通过将文本框保持在网格之外来实现）

2. 按回车键保存第一行并创建一个空的第二行

编辑： 这是我更新的代码：

   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

查看the answer 和the demo project。它展示了如何在搜索中使用 jQuery UI 自动完成。如果你只是在editoptions 中定义dataInit 而不是searchoptions，你就会得到你需要的东西。

更新：您应该阅读the answer，它描述了如果addRowData 中的id（第一个参数）是undefined 或空字符串“”，jqGrid 如何生成新的rowid。要解决您当前的问题，您可以自己生成 rowid 并显式选择新添加的行，例如以下代码：

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

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