当前位置：文江博客话题详情

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

发布于 2024-09-08 18:40:42 字数 133 浏览 3 评论 0原文

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

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

暗藏城府 2024-09-15 18:40:42

您可以在 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' 并设置 页：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 作为函数（请参阅注释行）。除了一些小例外之外，这种方法会非常有效。例如，如果主网格中选定的行被删除，我们将很难清除详细网格。在其他一些情况下，我们的灵活性也较差。因此，我只想提及这种可能性，但我仅将其作为评论包含（请参阅如果您对这种方式感兴趣，如何不使用内置搜索/过滤框来过滤 jqGrid 数据）。

You can find an example of this scenario on http://trirand.com/blog/jqgrid/jqgrid.html if you choose "Advanced" and then "Master Detail". I include below a small variation of the code.

Let us we have two grids on the HTML page: one "master" grid and another "details" grid, which needs to load data based on the row selected into the master grid. Let us both grids must fill the data from the server which send back the data in the JSON format. We suppose , that we use single row selection (no multiselect: true is defined) in the master grid.

Here is the code template

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'
});

Now some comments to the code. At the beginning no rows will be selected in the master grid. So we set datatype: 'local' as a parameter of details grid to deny and data loading.

If a row in the master grid will be selected we set the title (the caption) of the details grid, change datatype of details grid to 'json' and set page: 1. Resetting of the page parameter is important because it will be send to the server as additional parameter. If at the last selection the user choosed another page before and for the new selection there are not so many datails rows as before the details grid could be empty. To fix the problem we should set always page to 1.

Now the main work: sending the id of the master grid as a parameter of the server request for the details grid. We have some options here:

we can append the url of details grid with a string like '?userId='+id. To do this more carefully we should take in consideration that id can has some special characters. So to be sure we should use '?userId='+encodeURIComponent(id) instead. The function jQuery.param do the same in more readable form. So we can use '?'+jQuery.param({userId:id}) instead. I recommend to use the way if the url of the details grid should be in the REST format (like "blabla/id"). In this case the setting of url of the details grid to urlDetail+'/'+encodeURIComponent(id) is probably the best way.
we can set parameter postData:{userId:id}. It follows to the same as '?'+jQuery.param({userId:id}) if we use HTTP GET for the requests to the server. The advantage of the way is that we use also HTTP POST. Then the parameters will be posted in the body instead of appended to the URL. So the usage of postData has a small advantage.
we can remove the code from onSelectRow event of the master grid and include in the the detail grid an additional parameter postData as a function (see commented line). The way will work very good with small exceptions. For example, it will be difficult for us to clear the details grid if the selected row in the master grid will be deleted. In some other situations we have also less flexibility. So I wanted only mention this possibility, but I included it only as a comment (see How to filter the jqGrid data NOT using the built in search/filter box if you have interest to this way).