Question

我正在使用带有sortableRows选项的jqGrid 一旦将行添加到网格中，我还使用行的内联编辑。它在我的Chrome中工作正常，但后来我在FireFox中尝试了它，我发现内联编辑不起作用。点击任何可编辑的网格单元格都会被忽略。

我将这个问题追溯到这样一个事实：在mousedown事件点击发生在网格单元格中，处理程序ui-disableSelection在Firefox中被调用（但不在Chrome中）。作为测试，我强制ui-disableSelection处理程序在mousedown上单击一个单元格时不被调用，然后内联编辑按预期工作。

基于此，我搜索并发现在jQuery中报告了类似这个问题的东西（我使用的是1.6.2版本）：

http://forum.jquery.com/topic/jquery-ui-sortable-disableselection-firefox-issue-with-inputs

jqueryUI Sortable: handling .disableSelection() on form inputs

http://bugs.jqueryui.com/ticket/4429

最后两篇文章提供了一些可能的解决方案。但我不知道到底要改变什么。

听起来不推荐使用disableSelection（），不建议使用。

jqGrid.src.js文件中包含以下代码：

sortableRows : function (opts) {
    // Can accept all sortable options and events
    return this.each(function(){
    ......

            $("tbody:first",$t).sortable(opts);
            $("tbody:first",$t).disableSelection();
        }
    });

根据评论，我认为问题是在这里使用disableSelection（）。

我尝试将其更改为：

            $("tbody:first",$t).sortable(opts);
            $("tbody:first",$t).disableSelection();
            $("tbody:first",$t).find("input").enableSelect();

但这似乎引入了更多问题。

Answer 1

我遇到了同样的问题。网络上有几个主题：

I can't type to inputs

UI Sortable | can't click input fields in Firefox if input field is in sortable element

另一种方法是使用X-editable之类的内容来完全删除表中的输入。

Answer 2

解决。我今天遇到了同样的问题，感谢这篇文章，我刚刚找到了一个基于其中一个引用链接的解决方案

jqueryUI Sortable: handling .disableSelection() on form inputs

最终代码如下：

$.fn.extend({
    preventDisableSelection: function(){
        return this.each(function(i) {
            $(this).bind('mousedown.ui-disableSelection selectstart.ui-disableSelection', function(e) {
                e.stopImmediatePropagation();
            });
        });
    }
});    

grid = $('#list');
grid.jqGrid({
   ...
   ondblClickRow: function (id) {
    if(id && id!==lastsel) {
        grid.jqGrid('restoreRow',lastsel);
        lastsel=id; 
    }

    grid.jqGrid('editRow',id,true);

    // This is the relevant line        
    grid.find("input").preventDisableSelection();
}
   ...
});
grid.jqGrid('navGrid',settings.pager,{edit:false,add:false,del:true});
grid.jqGrid('inlineNav',settings.pager, {
    addParams: {
        position:'last', 
        addRowParams: {keys: true}
    }, 
    editParams: {keys: true}
});
grid.jqGrid('sortableRows');

...

这段代码与我的实际代码非常不同，因为我在同一页面中使用了几个网格，因此我使用的通用可重用代码对于这种情况并不是那么清楚。

FireFox中的jqGrid sortableRows和disableSelection

2 个答案: