(jqGrid) 向服务器发布额外的自定义参数

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主网格的作为详细信息网格的服务器请求的参数。我们在这里有一些选择：

• 我们可以将详细信息网格的 url 附加一个字符串，如'?userId='+id. 为了更仔细地做到这一点，我们应该考虑id可能有一些特殊字符。所以可以肯定的是，我们应该'?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 数据）。