jqGrid多选，复选框在移动到下一页时保持不变

Question

如果你看到 jqGrid 演示：

http://www.trirand.com/blog/jqgrid/jqgrid.html

部分：高级 --> 多选

当我移动到下一页时，您会看到选中的复选框不会持续存在，并且 再次返回上一页..

如何让它持续存在？

这是我的场景，在我的应用程序中有一个组功能，我可以 添加几个客户，我正在使用 jqgrid 来显示数千个客户。

我想检查我想要的每个客户，然后提交这个选定的客户并将其添加到指定的组..

我该怎么做？ （让 jqgrid，多选坚持？）

谢谢。

Answer 1

在这里查看活动列表http://www.trirand.com/jqgridwiki/doku.php?id=wiki:events

逻辑是： 每次触发“onPaging”事件时，您应该遍历每一行并将每行的唯一 id 存储到一个数组中，还遍历您的 id 数组并在每次触发“onPaging”时检查所有选择框。

Answer 2

我使用这些函数在jqGrid 调用中设置了以下三个选项：

onSelectRow: HandleSelectRow,
onSelectAll: HandleSelectAll,
gridComplete: HandleSelectedIds,

我的函数如下所示：

function HandleSelectRow(id, selected)
{
    // Did they select a row or de-select a row?
    if (selected == true)
    {
        var currIndex = SELECTEDIDS.length;
        //selected_jq_ids_array[currIndex] = id;
        SELECTEDIDS.push(id); //SELECTEDIDS is a global variable I defined.
    }
    else
    {
        // Filter through the array returning every value EXCEPT the id I want removed.
        SELECTEDIDS = $.grep(SELECTEDIDS, function(value)
        {
            return value != id;
        });
    }
}

下一个：

function HandleSelectAll(id, selected)
{
    // Did they select or deselect?
    if (selected == true)
    {
        for (single_id in id)
        {
            // If the value is NOT in the array, then add it to the array.
            if ($.inArray(id[single_id], SELECTEDIDS) == -1)
            {
                SELECTEDIDS.push(id[single_id]);
            }
        }
    }
    else
    {
        for (single_id in id)
        {
            // If the value is in the array, then take it out.
            if ($.inArray(id[single_id], SELECTEDIDS) != -1)
            {
                SELECTEDIDS = $.grep(SELECTEDIDS, function (value)
                {
                    return value != id[single_id];
                });
            }
        }
    }
}

最后一个：

function HandleSelectedIds()
{
    if (SELECTEDIDS != null)
    {
        currentGridIds = new Array();
        currentGridIds = $("#lookupControl").getDataIDs();

        //Make Selection
        for (var e = 0; e < currentGridIds.length; e++)
            for (var i = 0; i < SELECTEDIDS.length; i++)
                if (SELECTEDIDS[i] == currentGridIds[e])
                    jQuery("#lookupControl").setSelection(SELECTEDIDS[i], false);

        // TODO: Some logic on if all the rows on the current page are selected, then make sure to check the "Select All" checkbox.
        //var selectedIds = $("#lookupControl").getGridParam('selarrrow');  
    }
}

Answer 3

没有直接通过jqgrid保留复选框值的方法，而是我们可以创建一个新列来保留复选框值。请参阅以下链接中的演示http://jsfiddle.net/vasece/cLV4M/

Answer 4

使用 gridComplete 和 onPaging 事件以及 jquery .data() 方法非常简单。这比我在网上看到的很多东西要简单得多，所以我想我会分享它。我的网格的选择器是“#employeerolegrid”。

       gridComplete: function () {

            var currentPage = $(this).getGridParam('page').toString();

            //retrieve any previously stored rows for this page and re-select them
            var retrieveSelectedRows = $(this).data(currentPage);
            if (retrieveSelectedRows) {
                $.each(retrieveSelectedRows, function (index, value) {
                    $('#employeerolegrid').setSelection(value, false);
                });
            }
        },
        onPaging: function () {
            var saveSelectedRows = $(this).getGridParam('selarrrow');
            var page = $(this).getGridParam('page') - 1;

            //Store any selected rows
            $(this).data(page.toString(), saveSelectedRows);
        }

Answer 5

我的解决方案：（定义变量 current_page 并在 Event loadBeforeSend 中设置）因为

var page = $(this).getGridParam('page') - 1; not work.

var current_page=0;

...

   gridComplete: function () {

        var currentPage = $(this).getGridParam('page').toString();

        //retrieve any previously stored rows for this page and re-select them
        var retrieveSelectedRows = $(this).data(currentPage);
        if (retrieveSelectedRows) {
            $.each(retrieveSelectedRows, function (index, value) {
                $('#employeerolegrid').setSelection(value, false);
            });
        }
    },
    onPaging: function () {
        var saveSelectedRows = $(this).getGridParam('selarrrow');
        //Store any selected rows
        $(this).data(current_page, saveSelectedRows);
    },
    loadBeforeSend:function(){
                    //set current page
        current_page = $(this).getGridParam('page').toString();
}

函数获取多选值数组

function getSelectedValues(){

    var saveSelectedRows = $("#YourGrid").getGridParam('selarrrow');

    $("#YourGrid").data(current_page, saveSelectedRows);

    var retrieveSelectedRows = $("#YourGrid").data();       

    var arr_values = new Array();

    if (retrieveSelectedRows) {
        $.each(retrieveSelectedRows, function (index, value) {
            $.each(value, function (index, sub_value) {
                if(typeof(sub_value)=='string')
                arr_values.push(sub_value);
            });
        });
    }

    return arr_values;
}

Answer 6

我发现了这个：

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

我必须说，它工作得很好。