Question

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

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

（我不想使用子网格功能）

Answer 1

如果您选择“高级”，然后选择“主要详细信息”，则可以在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作为详细信息网格的服务器请求的参数。我们在这里有一些选择：

我们可以使用类似'?userId='+id的字符串附加详细信息网格的网址。为了更谨慎地做到这一点，我们应该考虑id可以有一些特殊字符。所以要确保我们应该使用'?userId='+encodeURIComponent(id)代替。函数jQuery.param以更易读的形式执行相同的操作。所以我们可以使用'?'+jQuery.param({userId:id})代替。如果详细信息网格的url应该是REST格式（如“blabla / id”），我建议使用这种方式。在这种情况下，将详细信息网格url设置为urlDetail+'/'+encodeURIComponent(id)可能是最佳方式。
我们可以设置参数postData:{userId:id}。如果我们将HTTP GET用于对服务器的请求，则它与'?'+jQuery.param({userId:id})相同。方法的优点是我们也使用HTTP POST。然后参数将发布在正文中，而不是附加到URL。因此postData的使用有一个小优势。
我们可以从主网格的onSelectRow事件中删除代码，并在详细网格中包含一个附加参数postData作为函数（请参阅注释行）。除了小的例外，这种方式将非常有效。例如，如果主网格中的选定行将被删除，我们将很难清除详细信息网格。在其他一些情况下，我们的灵活性也较低。所以我只想提一下这种可能性，但我只是把它作为一个评论（如果你有兴趣的话，可以参考How to filter the jqGrid data NOT using the built in search/filter box）。

（jqGrid）向服务器发布额外的自定义参数

1 个答案: