javascript - 为什么 jqGrid 拒绝使用 OnSelectRow 事件多次调用它的 Ajax 调用

Question

我的两个 jqGrid 网格有问题。首先，我有一个网格，其中包含一些运行良好的数据。它有一个 loadComplete 事件，该事件将第一行设置为选定的。这样，第二个 jqGrid 就会根据第一个 jqGrid 上选定的行 (id) 进行填充。

我在第一个网格上有一个 onSelectRow 事件，它调用一个包含第二个网格的 $('#grid).jqGrid() 调用的函数。第二个网格有一个 url，它链接到 Controller 中的一个方法，该方法从数据库获取一些数据。

这对于第一个选择行来说一切正常(在加载完成后自动发生)。

我的问题是，在我选择不同的行后，第二个 jqGrid 不会重新填充。程序永远不会到达 Controller 中的方法(我用一些日志记录进行了测试)。我真的很困惑，因为它适用于第一次加载，但不适用于第二次加载，依此类推。

  $("#fontsgrid").jqGrid({ 
        url: 'getfonts',
        mtype: "post",
        datatype: "json",
        sortable: true,
        colNames: ['Name', 'Family', 'Cost', 'Lic', 'File', 'Added', 'Mod', 'Add', 'Edit'],
        colModel: [
            { name: 'name', index: 'name', width: 90, sorttype: "text", sortable: true, align: 'left'},
            { name: 'family', index: 'family', width: 100, sorttype: "text", sortable: true},
            { name: 'cost', index: 'cost', width: 60, sorttype: "currency", sortable: true, formatter: 'currency', formatoptions: {decimalSeparator: ",", thousandsSeparator: ",", decimalPlaces: 2, prefix: "€ "}},
            { name: "licenses", index: "licenses", width: 30, sorttype: "int", sortable: true},
            { name: "filename", index: "filename", width: 90, sorttype: "text", sortable: true},
            { name: "date_upload", index: "date_upload", width: 80, sortable: true, sorttype: "date", formatter: "date", formatoptions: { newformat: 'Y-m-d' }},
            { name: "date_edit", index: "date_edit", width: 80, sortable: true, sorttype: "date", formatter: "date", formatoptions: { newformat: 'Y-m-d' }},
            {name: "add_cart", index: 'add_cart', width: 70},
            {name: "edit", index: "edit", width: 30}
        ],
        rowNum: 100,
        width: 580,
        height: 359,
        rowList: [100, 250, 500],
        sortname: "name",
        sortorder: 'asc',
        viewrecords: true,
        gridview: true,
        caption: "Font List",
        pager: $('#pager'),
        loadComplete: function () { 
            $('#fontsgrid').jqGrid('setSelection', $("#fontsgrid tr[role]").next().attr("id"));
        },
        onSelectRow: function (id) {
            loadInstallGridFonts(id);
        }
    }).navGrid('#pager', {edit: false, add: false, del: false});

    function loadInstallGridFonts($fontid) {
        $('#installGridFonts').jqGrid({
            url: 'getinstallations',
            mtype: "post",
            datatype: "json",
            sortable: true,
            postData: {'fontid': $fontid},
            colNames: ['Installation', 'Bedrijfsnaam', 'Date Installed', 'Edit'],
            colModel: [
                { name: 'installation', index: 'installation', width: 90, sorttype: "text", sortable: true, align: 'left'},
                { name: 'bedrijf', index: 'bedrijf', width: 100, sorttype: "text", sortable: true},
                { name: "date_installed", index: "date_installed", width: 80, sortable: true, sorttype: "date", formatter: "date", formatoptions: { newformat: 'Y-m-d' }},
                {name: "edit", index: "edit", width: 30}
            ],
            rowNum: 50,
            width: 480,
            height: 359,
            altRows: 'true',
            rowList: [50, 75, 100],
            sortname: "installation",
            sortorder: 'asc',
            viewrecords: true,
            gridview: true,
            caption: "Installation List",
            pager: $('#pagerInstall')
        }).navGrid('#pagerInstall', {edit: false, add: false, del: false});
    }

“getfonts”和“getinstallations”都是路由 (codeIgniter) 中使用的 Controller /方法的别名。

问题是程序仅在“getinstallations”后面执行一次，而不是在新的行选择之后执行。

Answer 1

我在您的代码中发现了很多问题。首先，重要的是要理解类似的代码

$('#installGridFonts').jqGrid({
    ...
});

创建网格。这意味着它转换<table>元素(最初放置在页面上)到相对复杂的 div 和表格结构(请参阅 here 的示例)。其结果是:您只能仅进行一次这样的调用。如果您尝试在第二次 jqGrid 创建相同的网格，请验证该网格是否已存在并且不执行任何操作。这正是您所看到的。

更重要的事情如下:jqGrid 创建代表网格一次的 div 和表格结构，但它可以填充网格的主体(网格内的数据)多次。如果您需要使用从服务器返回的数据填充网格，您只需设置网格的参数( url 、 datatype 、 postData 等)，然后 make $("#installGridFonts").trigger("reloadGrid") 。重新加载意味着向服务器执行新的请求并加载网格中的数据。

所以代码可能如下:

// we will use navGrid below more as once without editing buttons
// so we change defaults of navGrid with the folling settings
$.extend($.jgrid.nav, {edit: false, add: false, del: false});

// creates the second grid. because we don't want to make any request
// to the server at the time we will use datatype: "local"
$("#installGridFonts").jqGrid({
    datatype: "local",
    ...
}).jqGrid("navGrid", "#pagerInstall");

// create the first grid
$("#fontsgrid").jqGrid({
    ...
    onSelectRow: function (rowid) {
        $("#installGridFonts").jqGrid("setGridParam", {
            datatype: "json",
            postData: {fontid: rowid}
        }).trigger("reloadGrid");
    }
}).jqGrid("navGrid", "#pager");

如果需要，您可以在创建后直接隐藏第二个网格并将其显示在onSelectRow内回调。