0

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

我在第一个网格上有一个 onSelectRow 事件，它调用一个包含第二个网格的 $('#grid).jqGrid() 调用的函数。第二个网格有一个 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”后面的方法一次，而不是在新的行选择之后。

4

1 回答 1

2

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

$('#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回调中。

于 2013-10-03T11:32:52.110 回答