javascript - 在 jqGrid 中调用选定的行只能工作一次

Question

好吧，这一定很愚蠢，但我没能发现它......

我有一个 ID 为“grid”的 jqGrid(灵感，我知道)。我在网格中添加了一个导航按钮:

jQuery("#grid").navButtonAdd('#pager', {
        caption : "Manage Files",           
        onClickButton : function(){                         
            var rowid = $('#grid').jqGrid('getGridParam', 'selrow');
            if(rowid == null) 
                alert('Please select a record before trying to manage files');
            makeUploadDialog(rowid);
        }

    });

所以，这行得通。你第一次这样做。如果您点击另一行并再次点击按钮，我会收到此错误:

Uncaught TypeError: Object [object Object] has no method 'jqGrid' 

我猜测事件的排序有一些不好的魔力，但我知道我已经在堆栈帖子中看到 Oleg 使用的这种方法(尽管是 2 年前的)。

有什么建议吗？

[编辑以添加更多代码和上下文]

我发现这个问题是由对话框内容的 AJAX 加载以某种方式触发的。我已经在其他项目上完成了这种类型的操作而没有出现问题，所以我很困惑为什么在这种情况下它会导致我“失去上下文”。如果我注释掉下面的最后一行...加载调用，我可以反复打开和关闭对话框并保持网格功能。我只是不明白为什么...

function makeUploadDialog(rowID) {      
    var dialog = $('<div></div>').appendTo('body');
    dialog.dialog({
        width: 850, 
        autoOpen: true,
        draggable: true,
        resizable: false,
        title: 'Manage Artifacts',
        buttons: {
            Close: function () {
                $("#grid").trigger("reloadGrid");
                dialog.remove();                
            }
        }, 
        close: function () {                
            $("#grid").trigger("reloadGrid");
            dialog.remove();                
        }
    }); 
    dialog.load('getUploadDialog.html?rowId='+rowID);

[编辑 x2]

我刚刚发现 #grid 对象看起来已被 #.load 以某种方式损坏？我做了 $('#grid') 的 console.log 并且可以看到它实际上缺少所有 jqGrid 方法，但是有一些内容似乎属于对话框(比如对 MultiFile 对象的引用。 ..这是对话框本身用于某些文件上传的 MultiFile.js 的一部分)。真是令人费解。

Answer 1

我准备了一个generic working example ，它会正确触发选择事件 (jsFiddle)。它基本上做的是添加列，添加一些数据，最后添加一个函数来响应 onSelectRow 事件，如下所示:

$("#grid").jqGrid('setGridParam', 
    {onSelectRow: function(rowid,iRow,iCol,e){alert('selected id='+rowid);}});

在任何行上单击两次或更多次，它会按预期触发。

根据 Bikonja 的建议，如果您的问题更具体到您添加的功能，请修改我通过链接给您的示例并发布，以便我们查看是否有任何副作用(例如来自其他链接JavaScript 库)。

---

完整的JavaScript代码:

var data = [[12345, "ABC", "", "3454354", "OPEN"], 
    [98765, "DEF", "", "452673", "CLOSED"]];

$("#grid").jqGrid({
    datatype: "local",
    height: 250,
    colNames: ['Inv No', 'User ID', ' ', 'Number', 'Status'],
    colModel: [{
        name: 'id',
        index: 'id',
        width: 60,
        sorttype: "int"},
    {
        name: 'fld1',
        index: 'fld1',
        width: 90,
        sorttype: "date"},
    {
        name: 'fld2',
        index: 'fld2',
        width: 10},
    {
        name: 'fld3',
        index: 'fld3',
        width: 80,
        sorttype: "float"},
    {
        name: 'fld4',
        index: 'fld4',
        width: 80,
        sorttype: "float"}
    ],
    caption: "Stack Overflow Example"
});


var names = ["id", "fld1", "fld2", "fld3", "fld4"];
var mydata = [];

for (var i = 0; i < data.length; i++) {
    mydata[i] = {};
    for (var j = 0; j < data[i].length; j++) {
        mydata[i][names[j]] = data[i][j];
    }
}

for (var i = 0; i <= mydata.length; i++) {
    $("#grid").jqGrid('addRowData', i + 1, mydata[i]);
}

/*
$("#grid").jqGrid('setGridParam', 
    {ondblClickRow: function(rowid,iRow,iCol,e){alert(dbl clicked id='+rowid);}});
*/
$("#grid").jqGrid('setGridParam', 
    {onSelectRow: function(rowid,iRow,iCol,e){alert('selected id='+rowid);}});

HTML 表格定义:

<table id="grid"></table>