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

Why does jqGrid refuses to call it's Ajax Call more than once using the OnSelectRow Event

本文关键字：调用 Ajax 事件 拒绝 jqGrid OnSelectRow 为什么      更新时间：2023-09-26

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

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

这对于第一个选择行(在 loadComplete 后自动发生(都很好。

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

  $("#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(的别名。

问题是程序只转到"getinstallations"后面的方法一次，而不是在新的rowselect之后。

我在你的代码中看到了很多问题。首先，重要的是要了解代码，例如

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

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

更重要的事情如下：jqGrid 创建div 和表的结构，这些结构代表网格一次，但它可以多次填充网格的主体(网格内的数据(。如果需要用服务器返回的数据填充网格，只需设置网格的参数(url、datatype、postData等(，然后$("#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。

相关文章：