2012-10-15 130 views
2

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

也许你可以告诉我初始化是否存在问题,或者我是否知道事件发布后的“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时将其移除。这也没有解决这个问题。它似乎只需要触发自动完成下拉菜单。

回答

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 Assocaitive阵列:http://blog.xkoder.com/2008/07/10/javascript-associative-arrays-demystified/