JQGrid和JQuery自動完成

Question

在實現JQGrid 4.3.0，Jquery 1.6.2和JQuery UI 1.8.16時，我遇到了內聯編輯問題。 激活內聯編輯后，某些元素將被分配為自動完成。 取消或保存嵌入式編輯時，自動完成功能不會總是消失（通過雙擊文本然后單擊刪除，然后單擊轉義以退出行編輯來選擇文本）。 當不再在編輯模式下考慮該行時，將自動完成控件置於編輯模式。

也許您可以告訴我初始化是否存在問題，或者我是否知道在“ afterrestorefunc”之后發生的事件，該事件可以將字段恢復為“原始”狀態。 原始狀態在JQGrid行中顯示為數據。

我試過在行關閉.remove（）和.empty（）之后刪除DOM：

 ... 
"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時將其刪除。 那也沒有解決問題。 似乎只需要觸發自動完成下拉菜單即可。

Answer 1

在調用自動​​完成功能之前，我有一個自定義的啟用/禁用功能。 這將導致對同一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/