JQGrid 以编程方式选择网格行 [英] JQGrid Programmatically Select Grid Row

问题描述

我有一个 JQGrid，它带有 loadonce:true(所以它都是客户端)和启用分页(比如说 20 页).

I have a JQGrid with loadonce:true(so it's all client side) and paging enabled(with, say 20 pages).

我想指定一行(以编程方式，无需用户输入)并让我的网格导航到相应的页面以选择指定的行.

I would like to specify a row(programmatically, without user input) and have my grid navigate to the corresponding page to select the specified row.

当前的 JQGrid 可以做到这一点吗?

Is this possible with the current JQGrid?

我已经研究过搜索和过滤，但这只是用新行重新加载网格 - 我需要我的网格导航到正确的页面 - 保留其数据和结构.

I've looked into search and filter, but that just reloads the grid with new rows - I need my grid to navigate to the correct page - Keeping its data and structure.

我正在优化我的网格结构，因此任何需要的更改(比如客户端到服务器端)都是可能的.

I'm in the process of optimizing my grid structure, so any changes needed(say client side to server side) would be possible.

推荐答案

因为你使用loadonce:true，所以你在服务器上准备数据.在服务器端，您可以决定必须选择哪一行.在服务器端，您还可以轻松计算哪个页面将成为所选行.例如，您可以将所选行的 ID 和所选页面包含为 用户数据.因此从服务器发送的数据可能如下所示:

Because you use loadonce:true, then you prepare the data on the server. On the server side you can decide which row must be selected. On the server side you can also easy calculate on which page will be the selected row. The id of selected row and the selected page you can for example include as a part of the userdata. So the data sent from the server could looks like following:

{
    "total": 5,
    "page": 1,
    "records": 107,
    "rows": [
        ...
    ],
    "userdata": {
        "page": 3,
        "selId": 24 
    }
}

在 loadComplete 里面你可以做以下事情

Inside of loadComplete you can do about following

loadComplete: function(data) {
    if (jQuery("#list").getGridParam('datatype') === "json") {
        // data.userdata is the same as jQuery("#list").getGridParam('userData');
        var userdata = jQuery("#list").getGridParam('userData');
        var curPage = jQuery("#list").getGridParam('page'); // is always 1
        if (curPage !== userdata.page) {
            setTimeout(function(){
                jQuery("#list").setGridParam(
                    { page: userdata.page }).trigger("reloadGrid");
                jQuery("#list").setSelection (userdata.selId, true);
            },100);
        }
        else {
            jQuery("#list").setSelection (userdata.selId, true);
        }
    }
}

您可以在 http://www.ok- 上看到一个工作示例soft-gmbh.com/jqGrid/DataToSelect.htm 和 http://www.ok-soft-gmbh.com/jqGrid/DataToMultiSelect.htm.

更新:Free jqGrid 支持multiPageSelection:从版本 4.10.0 开始的 true 选项.该选项允许非常容易地设置网格中多行的选择(并且它工作得非常快，因为它在创建网格的主体期间直接设置选择状态).请参阅答案和demo 和 4.10.0 的自述文件.

UPDATE: Free jqGrid supports multiPageSelection:true option strarting with the version 4.10.0. The option allows to set selection of multiple rows in the grid very easy (and it works very quickly, because it set selection state directly during creating the body of the grid). See the answer and the demo and the readme to 4.10.0.

这篇关于JQGrid 以编程方式选择网格行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！