Question

过去几天我一直在撕扯我的头发。就像问题的快速概述一样。我正在使用JqGrid 4.2.0（撰写本文时的最新版本）。在一个页面中，我有两个网格。一个在左边，希望充当导航员。我想在右侧网格上加载数据，数据由左侧点击的项目的行ID确定。

我的问题是第一个选定的行ID被“卡住”，将来所有的ajax调用都是相同的rowid（例如：如果第一个选择的行是514，则每个其他选定的行将在ajax调用上输出514加载另一个网格，如果第一次选择是513，其他所有513，等等）

我怀疑它可能是某种变量交叉或某些因为我在整个执行期间放置了警报调用以进行测试，并且它们都会警告正确的ID号，直到加载下一个网格的点为止，此时行ID变为错误的。

以下是我的代码：

第一段是左边的初始列表，带有OnSelectRow调用，第二段代码用于右侧的数据网格，实际上保存数据）

renderImportsList = function(url, data, firstrow) {
var cnames = data.names;
var cmodel = data.model;
currentrow = firstrow;
$("#imports_grid").jqGrid({
    url: url + "&type=list",
    //caption: "Imports",
    datatype: "json",
    colNames: cnames,
    colModel: cmodel,
    recordtext: "<b>Imports: {1}</b>",
    autowidth: true,
    rowNum: 10000,
    toolbar: [true,"top"],
    pager: "#imports_grid_pager",
    pgbuttons: false,
    pginput: false,
    viewrecords: true,
    multiselect: false,
    sortorder: "desc",
    sortable: true,
    onSelectRow: function(rowid) {
        if (rowid != firstrow) {
            if ($("#" + firstrow).hasClass("ui-state-highlight"))
                $("#" + firstrow).removeClass("ui-state-highlight")
        }
        setTimeout(function() { 
            // Display import items
            var itype = "checkpoint";
                            alert(rowid); // This returns the right row ID so far
            renderImportItems(url, rowid, itype);
        }, 500);
    },
    loadComplete: function() {
        $("#imports_grid tr").css("border-color", "#666");
        $("tr.jqgroup").css("background", "#e9efff");
        $("tr.jqfoot").css("background", "#ced5e9");
        $("#imports_grid tr.jqfoot td").css("border-right", "none");
        $("#t_imports_grid").css("padding-bottom", "3px");
        $("#imports_grid").setSelection(firstrow, true);
        $("#imports_grid").trigger("reloadGrid"); // Call to fix client-side sorting
    }
});     
$("#imports_grid").jqGrid('navGrid','#imports_grid_pager',{edit:false,add:false,del:false,search:false});
$("#imports_grid").trigger("reloadGrid"); // Call to fix client-side sorting
sizeGrid("imports_grid");

}

这部分执行正常，根据上面的警告，此阶段的rowid是我点击的。下面是在上面函数中从OnSelectRow内部调用的第二个函数。

renderImportItems = function(url, rowid, itype) {
$.ajax({
    url: srvrname + "applications/PMS/views/view/imports/" + itype + ".php",
    success: function(data) {
        var cnames  = data.names;
        var cmodel  = data.model;
                    alert(rowid); // Here, the code still executes the right row ID
        $("#checkpoint_grid").jqGrid({
            url: url + "&rid=" + rowid + "&type=" + itype,
            // This is where it breaks. No matter what, I keep getting rowid to equal whichever row was selected the very first time the grid was clicked (or loaded programatically onload)
            datatype: "json",
            colNames: cnames,
            colModel: cmodel,
            recordtext: "<b>Total: {1}</b>",
            autowidth: true,
            rowNum: 500,
            pager: "#" + itype + "_grid_pager",
            pgbuttons: false,
            pginput: false,
            viewrecords: true,
            multiselect: false,
            sortorder: "desc",
            sortable: true,
            loadComplete: function() {
                $("#" + itype + "_grid tr").css("border-color", "#666");
                $("tr.jqgroup").css("background", "#e9efff");
                $("tr.jqfoot").css("background", "#ced5e9");
                $("#" + itype + "_grid tr.jqfoot td").css("border-right", "none");
                $("#" + itype + "_grid").trigger("reloadGrid"); // Call to fix client-side sorting
            }
        }); 
        $("#" + itype + "_grid").jqGrid('navGrid','#' + itype + 'grid_pager',{edit:false,add:false,del:false,search:false});
        $("#" + itype + "_grid").trigger("reloadGrid"); // Call to fix client-side sorting
        sizeGrid(itype + "_grid");
    }
});

}

如上所示：在第一个警报被调用的时刻;它仍然输出正确的ID号，但是一旦第二个网格被初始化; ID返回到第一次调用时无法设置的任何内容。

非常感谢提供的任何帮助。如果它有帮助，这里有一些firebug输出来证明这个问题......

（隐私删除域名）

（首次加载：程序化：选择第一次= 514）回复：//mydomain.com/views/view/grid.php ?rid = 514＆amp; type = checkpoint＆amp; _search = false＆amp; end = 1321336809180＆amp ;rows = 500＆amp; page = 1＆amp; sidx =＆amp; sord = desc

（点击行：选定行= 503）回复：//mydomain.com/views/view/grid.php ?rid = 514＆amp; type = checkpoint＆amp; _search = false＆amp; end = 1321336863994＆amp ;rows = 500＆amp; page = 1＆amp; sidx =＆amp; sord = desc

（点击行：选定行= 510）回复：//mydomain.com/views/view/grid.php ?rid = 514＆amp; type = checkpoint＆amp; _search = false＆amp; end = 1321336864848＆amp ;rows = 500＆amp; page = 1＆amp; sidx =＆amp; sord = desc

Answer 1

我自己也经历过同样的问题。我建议你在onSelectRow函数之外定义你的网格，数据类型设置为“local”，只改变onSelectRow中每个加载之间变化的部分：

$("#checkpoint_grid").jqGrid('setGridParam', {
    url: null
}).jqGrid('setGridParam', {
    url: url + "&rid=" + rowid + "&type=" + itype,
    datatype: "json"
}).trigger("reloadGrid");

我通常使用postData: null执行此操作，但我认为根本问题是jqGrid会缓存一些网格参数。

Answer 2

您应该在GridUnload内$("#checkpoint_grid")包含renderImportItems（例如在var cmodel = data.model;之后）：

$("#checkpoint_grid").jqGrid('GridUnload');

问题是创建网格的代码应该执行一次。代码创建例如网格标题，寻呼机和除网格主体之外的一些其他区域。然后将进行Ajax请求以获取网格的数据并填充正文。如果用户单击列标题按列对数据进行排序，或者如果用户单击“下一页”按钮，则只会在网格中刷新数据。因此，应该只创建一次网格。如果将对现有网格进行下一次呼叫，则将忽略该呼叫。这是the line代码（内部属性grid将设置为here）。

此外，我将至少在第二次cache: false调用（$.ajax内部的调用）中包含renderImportItems参数。

Here您会找到一个使用GridUnload的演示。

Answer 3

我认为以下步骤应该有效：

调用onRowSelect函数。为您的ajax调用设置async：false（可选），并将rowid保存为全局var
使用This

JQGrid使用OnSelectRow在另一个网格上加载数据

3 个答案: