Question

我的两个jqGrid网格有问题。首先，我有一个网格，其中一些数据工作正常。它有一个loadComplete事件，它将第一行设置为选中状态。这样就可以根据第一个jqGrid上的选定行（id）填充第二个jqGrid。

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

这适用于第一个selectrow（在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之后。

Answer 1

我在你的代码中看到很多问题。首先，了解像

这样的代码非常重要

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

创建网格。这意味着它将您最初放置在页面上的<table>元素转换为相对复杂的div和表结构（有关示例，请参阅here）。其结果是：您只能拨打一次。如果您尝试在第二次创建相同的网格时jqGrid验证网格已存在且什么都不做。这正是你能看到的。

更重要的是以下内容：jqGrid创建div和表的结构，表示网格一次，但它可以填充网格的主体（网格内的数据）多次。如果您需要使用从服务器返回的数据填充网格，您应该只设置网格的参数（url，datatype，postData等）然后生成{{1 }}。重新加载意味着对服务器执行新请求并在网格中加载数据。

所以代码可以是以下内容：

$("#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");回调中显示。

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

1 个答案: