2

在实现 JQGrid 4.3.0、Jquery 1.6.2 和 JQuery UI 1.8.16 时，我遇到了内联编辑的问题。当内联编辑被激活时，一些元素被分配一个自动完成。当内联编辑被取消或保存时，自动完成并不总是消失（通过双击选择文本然后点击删除，然后点击转义退出行编辑）。当该行不再处于编辑模式时，将自动完成控件留在编辑模式。

也许您可以告诉我初始化是否有问题，或者您是否知道事件后“afterrestorefunc”字段可以返回到它们的“原始”状态。原始状态在 JQGrid 行中显示为数据。

我尝试在行关闭后删除 DOM，.remove() 和 .empty()：

 ... 
"afterrestorefunc": function(){ 
    $('.ui-autocomplete-input').remove();  }
...

但这会导致其他问题，例如 jqgrid 在序列化数据行或编辑时无法找到单元格，并且需要刷新页面，而不仅仅是 jqgrid，才能再次看到该行中的数据.

双击该行会创建元素的自动完成功能：

function CreateCustomSearchElement(value, options, selectiontype) {
...
            var el;
            el = document.createElement("input");
            ...
            $(el).autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: '<%=ResolveUrl("~/Services/AutoCompleteService.asmx/GetAutoCompleteResponse") %>',
                        data: "{ 'prefixText': '" + request.term + "', 'contextKey': '" + options.name + "'}",
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        success: function (data) {
                            response($.map(data.d, function (item) {
                                    return {
                                        label: Trim(item),
                                        value: Trim(item),
                                        searchVal: Trim(item)
                                    }

                            }))
                        }
                    });
                },
                select: function (e, item) {
                    //Select is on the event of selection where the value and label have already been determined.                        
                },
                minLength: 1,
                change: function (event, ui) {
                    //if the active element was not the search button                      
                    //...                       
                }
            }).keyup(function (e) {
                if (e.keyCode == 8 || e.keyCode == 46) {
                    //If the user hits backspace or delete, check the value of the textbox before setting the searchValue                
                    //...
                }
            }).keydown(function (e) {
                //if keycode is enter key and there is a value, you need to validate the data through select or change(onblur)
                if (e.keyCode == '13' && ($(el).val())) {
                    return false;
                }
                if (e.keyCode == '220') { return false }
            });
        }

其他来源： http ://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing

http://api.jqueryui.com/autocomplete/

更新： 我尝试仅在元素聚焦时创建自动完成，并在 onblur 时将其删除。那也没有解决问题。似乎只需要触发自动完成下拉菜单。

4

1 回答 1

0

在调用自动​​完成之前，我有一个自定义启用/禁用功能。这会导致对同一个 jqgrid 单元格的多次引用调用，从而导致冲突。因此，在我应该打开内联编辑的行上双击事件期间。根据记录类型，获取并分析需要启用/禁用哪些单元格。它从页面加载期间的代码中确定关联数组可用的字段，序列化为隐藏字段值。

function tableRowDoubleClick(id, iRow, iCol, e) {
...
setCellEditabilityByRecordType(id);
...    
}

单元格可编辑性通过以下方式设置：

 function setCellEditabilityByRecordType(id) {
//change some of the fields to read-only
var grid = $('#mygrid');
var i;
var cm;
var cellRecordType = grid.jqGrid('getCell', id, 'RecordType')
//Determine Fields Disabled by evaluation of data from a hidden field.
var disablefields = eval(pg_FieldDisable[cellRecordType]);
for (i = 0; i < disablefields.length; i++) {
cm = grid.jqGrid('getColProp', disablefields[i]);
cm.editable = false;
}
...
}
...

因此，当行的初始设置对双击做出反应时，就设置了单元格可编辑性。然后“CreateCustomSearchElement”触发。

但是，如果用户双击该行，它会再次触发双击，设置单元格可编辑性，但针对同一行。所以这会导致对单元格的多次引用，在这一点上，我不确定发生了什么。我所知道的是我必须将行可编辑性集中到一个函数，或者找到一种方法来读取被双击的当前行是否真的需要再次设置可编辑性。

参考 JavaScript 关联数组：http ://blog.xkoder.com/2008/07/10/javascript-associative-arrays-demystified/

于 2012-10-17T16:58:09.097 回答