3

我的 HTML 页面上有 2 个网格。当我单击一个网格中的一行时，它需要根据所选行将数据加载到另一行。

因此我需要将rowId作为第二个网格的额外参数发送..无法弄清楚如何..

（我宁愿不喜欢使用 subgrid 功能）

4

1 回答 1

5

如果您选择“高级”，然后选择“主详细信息”，您可以在http://trirand.com/blog/jqgrid/jqgrid.html上找到此场景的示例。我在下面包含了代码的一个小变体。

让我们在 HTML 页面上有两个网格：一个“主”网格和另一个“详细”网格，它需要根据选择到主网格中的行来加载数据。让我们两个网格都必须填充来自服务器的数据，服务器以 JSON 格式发回数据。我们假设，我们在主网格中使用单行选择（没有multiselect: true定义）。

这是代码模板

var detailsTitle = 'Details';
var grid = jQuery('#master').jqGrid({ // ... some parameters
    url: masaterUrl,
    datatype: 'json',
    colModel: [ // ... some column definitions
        { name: 'Name', width: 120 }
    ],
    onSelectRow: function(id) {
        var selName = grid.getCell(id, 'Name');
        gridDetails.setCaption(detailsTitle + ' for "' + selName + '"');
        gridDetails.setGridParam({
            //url: urlGetDetail + '/' + encodeURIComponent(id),
            //url: urlGetDetail + '?' + $.param( { userId: id });
            postData: { userId: id },
            page: 1,
            datatype: 'json' }).trigger('reloadGrid');
    }
}).navGrid('#pager', {}, {}, {}, {
    afterSubmit: function(response, postdata) {
        gridDetails.setCaption(detailsTitle);
        gridDetails.setGridParam({ datatype: 'local',
                                   page: 1 }).trigger('reloadGrid');
        return [true, ''];
    }
});

var gridDetails = jQuery('#detail').jqGrid({ // ...
    caption: detailsTitle,
    url: urlDetail,
    //postData: { userId: function() { return grid.getGridParam('selrow'); } },
    datatype: 'local'
});

现在对代码进行一些注释。一开始不会在主网格中选择任何行。所以我们设置datatype: 'local'为细节网格的参数来拒绝和数据加载。

如果将选择主网格中的一行，我们将设置详细信息网格的标题（标题），将详细信息网格更改datatype为'json'并设置page: 1。重置page参数很重要，因为它将作为附加参数发送到服务器。如果在最后一次选择中，用户在之前选择了另一个页面并且对于新选择，则没有像之前那样多的数据行，详细信息网格可能为空。要解决这个问题，我们应该始终设置page为 1。

现在的主要工作：发送id主网格的参数作为服务器请求细节网格的参数。我们在这里有一些选择：

  • 我们可以将详细信息网格的 url 附加一个字符串，如'?userId='+id. 为了更仔细地做到这一点，我们应该考虑到idcan 有一些特殊字符。所以可以肯定的是，我们应该'?userId='+encodeURIComponent(id)改用。该函数jQuery.param以更具可读性的形式执行相同的操作。所以我们可以'?'+jQuery.param({userId:id})改用。url如果详细信息网格的格式应为 REST 格式（如“blabla/id”），我建议使用该方式。在这种情况下url，将详细信息网格设置urlDetail+'/'+encodeURIComponent(id)为可能是最好的方法。
  • 我们可以设置参数postData:{userId:id}。这与'?'+jQuery.param({userId:id})我们使用 HTTP GET 对服务器的请求相同。这种方式的优点是我们也使用 HTTP POST。然后参数将发布在正文中，而不是附加到 URL 中。所以使用postData有一个小的优势。
  • 我们可以从主网格的事件中删除代码，onSelectRow并在细节网格中包含一个附加参数postData作为函数（参见注释行）。该方法将非常有效，只有少量例外。例如，如果主网格中的选定行将被删除，我们将很难清除详细信息网格。在其他一些情况下，我们的灵活性也较小。所以我只想提及这种可能性，但我只是将其作为评论包含（如果您对这种方式感兴趣，请参阅如何过滤 jqGrid 数据而不使用内置的搜索/过滤框）。
于 2010-07-11T00:05:57.830 回答