将选定的行从 Jqgrid 置于顶部答案

【问题标题】：Bring selected rows to the top from the Jqgrid将选定的行从 Jqgrid 置于顶部
【发布时间】：2011-12-28 18:11:55
【问题描述】：

我在“多选”模式下使用 jqgrid，并且没有分页。当用户通过鼠标单击选择单个记录时，有什么方法可以将这些选择的记录带到网格的顶部？

提前感谢您的帮助。

【问题讨论】：

我很难想象这个功能。让我们使用有很多行的长网格。用户在网格中间滚动并选择行。现在选定的行行应该从当前光标位置消失并移动到顶部？如果您甚至滚动顶部的网格并且用户仍然是刚刚选择的行，那么似乎我不太好，用户必须向下滚动到最后选择的位置才能继续他/她的工作。
@Oleg 感谢您的想法。从可用性的角度来看，我认为您是对的。但是让我们说如果用户想根据选定的行进行排序？他需要查看选择了哪些记录。所以在这种情况下，我们不能简单地将“排序”行为赋予“全选”列标题。我正在考虑一个单独的按钮，例如“查看选定的记录”。当用户单击时，我可以根据网格中的复选框选择进行排序吗？（考虑根据复选框列的“真”“假”值进行排序）您能提出您的想法吗？谢谢您的帮助。欣赏它。

标签： javascript jquery jqgrid

【解决方案1】：

在 cmets 中与您进行小型讨论后，我可以将您的问题重新表述为：“如何通过多选列实现排序？”

这个问题发现非常有趣，所以我投入了一些时间，并且可以建议一个解决方案，以防 jqGrid 保存本地数据（datatype 不是 'xml' 或 'json' 或具有 'loadonce: true' 选项)。

首先是演示我的建议的工作演示，你可以找到here：

实现由两部分组成：

将选择作为本地数据的一部分。 选择将在本地数据分页期间保留。这个功能很有趣，独立于多选列的排序。
多选列排序的实现。

为了实现保持选择，我建议扩展本地data 参数，该参数使用新的布尔属性cb 保存本地数据（与多选列的名称完全相同）。您可以在下面找到实现：

multiselect: true,
onSelectRow: function (id) {
    var p = this.p, item = p.data[p._index[id]];
    if (typeof (item.cb) === "undefined") {
        item.cb = true;
    } else {
        item.cb = !item.cb;
    }
},
loadComplete: function () {
    var p = this.p, data = p.data, item, $this = $(this), index = p._index, rowid;
    for (rowid in index) {
        if (index.hasOwnProperty(rowid)) {
            item = data[index[rowid]];
            if (typeof (item.cb) === "boolean" && item.cb) {
                $this.jqGrid('setSelection', rowid, false);
            }
        }
    }
}

要使“cb”列（多选列）可排序，我建议执行以下操作：

var $grid = $("#list");

// ... create the grid

$("#cb_" + $grid[0].id).hide();
$("#jqgh_" + $grid[0].id + "_cb").addClass("ui-jqgrid-sortable");
cbColModel = $grid.jqGrid('getColProp', 'cb');
cbColModel.sortable = true;
cbColModel.sorttype = function (value, item) {
    return typeof (item.cb) === "boolean" && item.cb ? 1 : 0;
};

更新：The demo 包含基于相同想法的一些改进代码。

【讨论】：

这太棒了。所以你隐藏了“selectAll”复选框并覆盖了它的行为。伟大的工作奥列格。非常感谢演示，我调试了它并了解它是如何工作的。 'getColProp' api 调用对我来说是全新的，我在想如何覆盖列属性属性。这很摇滚，它真的很酷的解决方案。感谢您的努力和宝贵的时间 Oleg。再次感谢。
@Sam：不客气！关于$grid.jqGrid('getColParam', 'colModel');，可以得到colModel 参数的引用。使用$grid.jqGrid('getColProp', columnName) 可以从colModel 中获得一个项目的引用。 $grid.jqGrid('setColProp', columnName, modExt) 将从colModel 中获取一个项目的引用，然后调用$.extend，它将modExt 的属性与列的属性合并。最后一行（将sorttype 设置为函数）定义了自定义排序，这在许多其他情况下很重要。
非常感谢您的解释。它有很大帮助。保持良好的工作奥列格。谢谢。
@Sam：我更新了演示以提高在网格多行的情况下的性能。请参阅答案的 UPDATED 部分。我根据这里的演示发布了the feature request。
再次非常感谢。我也通过了你的功能请求。希望新版本附带此功能。感谢您为调整 jqgrid 所做的努力。谢谢。

【解决方案2】：

如果您有行的 ID，您可以使用以下命令在服务器端进行特殊排序，例如MySQL：

Select a,b,c
FROM t
ORDER BY FIND_IN_SET(yourColumnName, "5,10,44,29") DESC

或

ORDER BY FIELD(yourColumnName, "5") DESC

【讨论】：