Question

如果你看到jqGrid演示：

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

部分：高级 - ＆gt;多选

当我移动到下一页时，您会看到已选中的复选框不会保留，并且再次返回上一页..

如何让它坚持下去？

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

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

我该怎么做？（make jqgrid，multiselect persist？）

感谢。

Answer 1

使用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 2

查看此处的事件列表http://www.trirand.com/jqgridwiki/doku.php?id=wiki:events

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

Answer 3

我的解决方案:(定义变量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();
}

函数get multi select Values数组

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 4

我使用以下功能在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 5

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

中的演示

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

我必须说它很好。

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

6 个答案: