2

我有一个 jqgrid 宽度多页。每一行都有一个唯一的 id。是否有直接滚动到行 id 的功能1234？

var mygrid = $("#list").jqGrid({
    url: 'get_sql_json.php',
    datatype: "json",
    mtype: "GET",
    pager: "#pager",
    rowNum: 100,
    rowList: [100, 200, 500],
    autoencode: true,
    autowidth: true,
    sortorder: "desc",
    shrinkToFit: true,
    viewrecords: true,
    loadonce: true,
    gridview: true,
    autoencode: true
    });
4

2 回答 2

2

我觉得你的问题很有趣，所以我准备了演示相应解决方案的演示。

在此处输入图像描述

可以在下拉框中选择行，然后单击“按 ID 选择行”按钮。如果指定的行在setSelection当前页面上，将使用方法选择它。如果该行在另一页上，则将计算新的页码，并重新加载网格并预先选择指定的行。我使用这里描述current: true的选项。reloadGrid

重要的是，您使用loadonce: true允许将更多内容保存为一页行。在这种情况下，网格的工作方式类似于具有参数定义的网格，该datatype: "local"参数data由第一次加载时从服务器返回的数据定义。

对于选择的实施，我使用答案中描述的方法。我覆盖（子类化）了jqGrid 使用select的内部$.jgrid.from方法的方法，以便将最后一次完整排序和过滤的本地数据保存在新的内部变量 lastSelected 中。它允许访问完整的数据集而不是仅访问当前页面（仅在执行from the line之后才包含来自line的数据而不是当前页面）。slice

演示代码中最重要的部分如下：

var mydata = [ ... ],
    $grid = $("#list"),
    oldFrom = $.jgrid.from,
    lastSelected, i, n, $ids, id;

// "subclass" $.jgrid.from method and save the last
// select results in lastSelected variable
$.jgrid.from = function (source, initalQuery) {
    var result = oldFrom.call(this, source, initalQuery),
        old_select = result.select;
    result.select = function (f) {
        lastSelected = old_select.call(this, f);
        return lastSelected;
    };
    return result;
};

// create the grid
$grid.jqGrid({
    datatype: "local",
    data: mydata,
    ...
    loadComplete: function () {
        this.p.lastSelected = lastSelected; // set this.p.lastSelected
    }
});

...
// fill select with all ids from the data
$ids = $("#selectedId");
for (i = 0, n = mydata.length; i < n; i++) {
    id = mydata[i].id;
    $("<option>").val(id).text(id).appendTo($ids);
}

$("#selectId").button().click(function () {
    var filteredData = $grid.jqGrid("getGridParam", "lastSelected"), j, l,
        idName = $grid.jqGrid("getGridParam", "localReader").id,
        idToSelect = $("#selectedId").val(),
        rows = $grid.jqGrid("getGridParam", "rowNum"),
        currentPage = $grid.jqGrid("getGridParam", "page"),
        newPage;
    if (filteredData) {
        for (j = 0, l = filteredData.length; j < l; j++) {
            if (String(filteredData[j][idName]) === idToSelect) {
                // j is the 0-based index of the item
                newPage = Math.floor(j / rows) + 1;
                if (newPage === currentPage) {
                    $grid.jqGrid("setSelection", idToSelect);
                } else {
                    // set selrow or selarrrow
                    if ($grid.jqGrid("getGridParam", "multiselect")) {
                        $grid.jqGrid("setGridParam", {
                            page: newPage,
                            selrow: idToSelect,
                            selarrrow: [idToSelect]
                        });
                    } else {
                        $grid.jqGrid("setGridParam", {
                            page: newPage,
                            selrow: idToSelect
                        });
                    }
                    $grid.trigger("reloadGrid", [{current: true}]);
                    break;
                }
            }
        }
        if (j >= l) {
            $grid.jqGrid("resetSelection");
            alert("The id=" + idToSelect + " can't be seen beacuse of the current filter.");
        }
    }
});
于 2013-10-25T10:58:54.843 回答
0

您可以选择一个 IDsetSelection用于滚动到该行，但前提是它位于当前页面上。

于 2013-10-24T20:40:19.447 回答