jquery-plugins - (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'作为details grid的参数来拒绝和数据加载。

如果主网格中的一行将被选中，我们设置细节网格的标题(标题)，将细节网格的 datatype 更改为 'json' 和设置页面: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}。如果我们对服务器的请求使用 HTTP GET，它遵循与 '?'+jQuery.param({userId:id}) 相同的规则。这种方式的优点是我们还使用 HTTP POST。然后参数将发布在正文中而不是附加到 URL。所以使用 postData 有一个小优势。
• 我们可以从主网格的 onSelectRow 事件中删除代码，并在详细信息网格中包含一个附加参数 postData 作为函数(参见注释行)。除了小的异常(exception)，这种方式将非常有效。例如，如果删除主网格中的选定行，我们将很难清除详细信息网格。在其他一些情况下，我们的灵 active 也较低。所以我只想提及这种可能性，但我只是将其作为评论包含在内(如果您对这种方式感兴趣，请参阅 How to filter the jqGrid data NOT using the built in search/filter box)。