将选定的行从 Jqgrid 置于顶部 [英] Bring selected rows to the top from the Jqgrid

问题描述

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

提前感谢您的帮助.

解决方案

在评论中与您进行了小幅讨论后，我可以将您的问题重新表述为:如何实现多选列排序?"

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

首先是演示我的建议的工作演示，您可以在包含一些基于改进的代码同样的想法.

I am using jqgrid in 'multiselect' mode and without pagination. When the user selects individual records by using mouse click, is there any way that I can bring those selected records to the top of the grid?

Thanks in advance for your help.

解决方案

After small discussion with you in comments I could reformulate your question so: "how one can implement sorting by multiselect column?"

The question find is very interesting so I invested some time and could suggest a solution in case of jqGrid which hold local data (datatype which is not 'xml' or 'json' or which has 'loadonce: true' option).

First of all the working demo which demonstrate my suggestion you can find here:

The implementation consist from two parts:

1. Making selection as part of local data. As the bonus of the selection will be hold during paging of local data. This feature is interesting independent on the sorting by multiselect column.
2. The implementation of sorting by multiselect column.

To implement of holding selection I suggest to extend local data parameter, which hold local data with the new boolean property cb (exactly the same name like the name of the multiselect column). Below you find the implementation:

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

To make 'cb' column (multiselect column) sortable I suggest to do following:

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

UPDATED: The demo contain a little improved code based on the same idea.

这篇关于将选定的行从 Jqgrid 置于顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！