jqGrid множественный выбор, флажок сохраняется при переходе на следующую страницу

Question

Если вы видите демо jqGrid:

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

Раздел: Advanced -> Multiselect

Вы увидите, что установленный флажок не сохраняется, когда я перехожу на следующую страницу, и снова на предыдущую страницу ..

Как сделать так, чтобы оно сохранялось?

Это мой сценарий, в моих приложениях есть групповая функциональность, где я могу добавить несколько клиентов, я использую jqgrid для отображения тысяч клиентов.

Я хочу проверить каждого клиента, которого я хочу, а затем отправить этого выбранного клиента и добавить его в указанную группу.

Как я могу это сделать? (сделать jqgrid, мультиселект сохранится?)

Спасибо.

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», вы должны выполнять итерацию по каждой строке и сохранять уникальный идентификатор каждой строки в массиве, а также выполнять итерацию по всему массиву идентификаторов и проверять все поля выбора каждый раз, когда запускается «onPaging».

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

Функция получения множественного выбора массива значений

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

Я нашел это:

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

Должен сказать, все работает довольно хорошо.

Answer 5

Нет прямого способа сохранить значение флажка через jqgrid, вместо этого мы можем создать новый столбец, чтобы сохранить значение флажка. пожалуйста, посмотрите демо в ссылке ниже http://jsfiddle.net/vasece/cLV4M/

Answer 6

Я установил следующие три параметра в вызове 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');  
    }
}