在 ASP.NET MVC 中呈现 jQuery jqGrid 插件后，我可以更改其双击事件处理程序 (ondblClickRow) 吗？答案

【问题标题】：Can I change the double click event handler (ondblClickRow) for a jQuery jqGrid plug-in after it has been rendered in ASP.NET MVC?在 ASP.NET MVC 中呈现 jQuery jqGrid 插件后，我可以更改其双击事件处理程序 (ondblClickRow) 吗？
【发布时间】：2010-12-21 00:58:48
【问题描述】：

我一直在成功使用 jqGrid；但是，我遇到了一些我似乎无法正常工作的东西。我通过 AJAX 将网格定义作为 PartialViewResult 返回并将结果附加到 div。

然后我想更改所述网格的双击事件。我正在使用 Firebug，似乎可以使用 $('#my-grid')[0] 访问网格元素，但是当我尝试像下面这样调用它的方法时，它告诉我 jqGrid 是“未定义”。

我很确定我已经正确引用了 jqGrid 的东西，否则我不会走到这一步（我已经在网格中显示和编辑数据了）。下面是获取并尝试修改网格定义的代码：

    $(document).ready(function() {

        //Add the grid by pulling it via AJAX
        $.get('<%=Url.Action("Grid","Entity", new {id = "CustomerAccount"}) %>', function(htmlResult) {

            //Append grid definition to div
            $('#customer-list').append(htmlResult);
            var myGrid = $($('#CustomerAccount-grid')[0]);
            $(myGrid).jqGrid('setGridParam', { ondblClickRow: function(rowid, iRow, iCol, e) { console.log('dblclicked'); } })
                .trigger('reloadGrid');
            //NOTE: I've tried with and without the reloadGrid
}

更新：我想我现在已经得出结论，我确定我将元素作为 jQuery 对象引用，存在时间问题。下面网格定义的简化负载说明了这个问题：

//Append grid definition to div
$('#customer-list').load('<%=Url.Action("Grid","Entity", new {id = "CustomerAccount"}) %>',function() {

    console.log('sortname=' + $($('#CustomerAccount-grid:first')).jqGrid('getGridParam', 'sortname'));
  });

这会记录 sortname=undefined;但是，如果我将同一行复制并粘贴到 Firebug 中，它会显示 sortname=Name，这是正确的。

最终更新：我的问题的很大一部分可能是我没有将元素作为 jQuery 对象获取，所以我将解决方案归功于 drachenstern（谢谢！）但是，一旦超出了事件处理程序仍然存在的原因没有连接是因为网格定义是通过 AJAX 检索的，当我尝试绑定 ondblclickrow 时它不存在。解决方案很简单：我只是在网格定义调用中添加了 async: false ，这样我就知道在绑定附加事件处理程序等之前定义将始终存在。我正在通过 AJAX 检索网格定义，因为我在 ASP.NET MVC 应用程序的服务器端动态构建网格。我仍在异步检索网格的数据。现在效果很好。

【问题讨论】：

标签： jquery asp.net-mvc jqgrid

【解决方案1】：

试试下面的代码

$('#my-grid').jqGrid('setGridParam',
                     { ondblClickRow: function(){console.log('Hello');} });

在许多情况下都可以工作（参见this 和this 对同一主题的回答），但它不起作用。问题是在 jqGrid 的初始化过程中将测试是否定义了ondblClickRow 的事件处理程序。如果没有定义（见the source code），则不绑定双击，以后ondblClickRow的设置什么也不做。

所以要在 jqGrid 初始化完成后设置ondblClickRow，你必须自己绑定dblclick。您可以使用以下代码执行此操作：

var grid = $('#customer-list');
grid.dblclick(function(e) {
    var td = e.target;
    var ptr = $(td,grid[0].rows).closest("tr.jqgrow");
    if($(ptr).length === 0 ){return false;}
    var ri = ptr[0].rowIndex;
    var ci = $.jgrid.getCellIndex(td);
    var rowId = $(ptr).attr("id");
    alert("in ondblClickRow");
    //ts.p.ondblClickRow.call(grid[0],rowId,ri,ci, e);
    return false;
});

注释行ts.p.ondblClickRow.call(grid[0],rowId,ri,ci, e)表示ondblClickRow的所有输入参数我们已经有了。

【讨论】：

【解决方案2】：

var myGrid = $('#my-grid')[0];

此代码将 myGrid 设置为 DOM 元素。所以其他一些 DOM 元素将是：

<a>, <div>, <input>, <body>, <table>, etc

没有原生 DOM 属性 .jqGrid。也许您的意思是获取第一个孩子，但将其保存在 jQuery 包装器中？有几个选项，具体取决于您想要的可读性。 http://api.jquery.com/first/ 允许您使用链接并且看起来更整洁，并且对于给定的情况可能更高效。还有：

var myGrid = $( $('#my-grid')[0] );

或者：

$(myGrid).jqGrid('setGridParam',{ ondblClickRow: function(){console.log('Hello');}});

当然你可以引入一个中间元素：

var myGridTemp = $('#my-grid')[0];
var myGrid = $( myGridTemp );
myGrid.jqGrid('setGridParam',{ ondblClickRow: function(){console.log('Hello');}});

但主要问题是您的示例的第一行只为您提供了 DOM 元素，而不是 jQuery 元素。

【讨论】：

这是真的，需要补充一点：您可以使用 var myGrid = $('#my-grid:first') 将第一个与查询匹配的元素作为 jQuery 对象获取。
@Michael ~ 好点。我不确定添加一个额外的选择器元素，因为我知道这会立即返回一个 jQuery 元素，并且 OP 不会知道 [0] 做了什么......但是是的，名义上这就是我在这种情况下会做的事情如果是我的代码。
感谢您的回复。正如您所指出的，我已尝试更改引用元素的方式；但是，双击仍然没有触发（没有错误，只是没有触发）。有趣的是，如果我在触发的网格定义中连接一个默认的 ondblClickRow。渲染 jqGrid 后是否有一些方法/事件无法更改？
我已经编辑了我的问题以显示通过 AJAX 获取网格定义并将其附加到 div 的代码
很抱歉，我不在办公桌前，无法更快地帮助您@tlangdon，但我看到您确实得到了您需要的解决方案。此外，您提到了上面的问题，当您使用“普通”方法定义事件处理程序时，它仅适用于 existing 元素。新创建的元素不会获得这些好处。使用“vanilla”jQuery 的替代方法是使用 live 处理程序，但这不适用于 jqGrid 之类的插件（更改需要在他们的代码中完成，而不是你的）。很高兴你明白了，再次为 /afk 感到抱歉