Question

我正在开发一个页面，我需要使用内联编辑模式显示jqGrid。（Razor观点，MVC3） Grid最初没有行，但是添加项目的空行和在最后一个字段上点击“enter”应该保存行数据，然后应该创建第二行空白。

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

我已经编写了与DB对话的控制器方法，并获取值直到控制器。这些值是可用于自动完成的值。

有人可以点亮，

使用自动完成文本框编写jqGrid，绑定控制器返回的值（我可以通过将文本框保留在网格外部来实现）
在按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

使用the answer查看the demo project。它显示了如何在搜索中使用jQuery UI Autocomplete。如果您只是在editoptions内定义dataInit而不是searchoptions，那么您将拥有所需的内容。

更新：您应该阅读the answer，其中介绍了如果addRowData中的ID（第一个参数）为undefined或者是$("#addrow").click( function(currentSelectedRow) { var myGrid = $("#jqgSkills"), rowid = $.jgrid.randId(); myGrid.jqGrid('addRowData', rowid, {ID: "", SkillName: "", RequiredDesired: "", RelevantExp: ""})); myGrid.jqGrid('setSelection', rowid); });，jqGrid如何生成新的rowid空字符串“”。要修复当前问题，您可以自己生成rowid并选择新添加的行显式，例如以下代码：

{{1}}

剃刀：jqGrid里面自动完成文本框，如何绑定值？

1 个答案: