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

问题描述

我在'multiselect'模式下使用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屋！