javascript - paginada - segmentacion de memoria

Hacer que la selección jqGrid multiselección persista después de la paginación, búsqueda en la barra de herramientas o filtro

Question

Tengo este jqGrid . El siguiente es mi comportamiento deseado:

1. El elemento seleccionado tendrá la selección persistente (y se representará como tal para el usuario) después de cambiar las páginas o hacer una búsqueda (barra de herramientas o filtro)

2. Cuando se selecciona el botón Seleccionar todo, si no se seleccionan elementos en la página actual, los selecciona a todos. Si ya hay un elemento seleccionado, borrará toda la lista, ya sea en la página o no.

3. Cuando se hace clic en el botón Imprimir factura, o bien utiliza la lista de ID que se ha creado a medida que avanzamos, o bien crea una lista de todos los IDS que se han seleccionado, ya sea en la pantalla actual o no.

Sería aceptable si el filtro no fuera compatible, pero preferido.

Para estar seguro, sé muy poco sobre js, pero he aquí algunas cosas que he intentado con éxito mixto:

1. Esta respuesta sugiere utilizar onSelectRow y onSelectAll, pero no pude implementarlo. ver falla

2. Esto parece prometedor, pero solo arreglará la cosa de la paginación. Entonces # 1 parece una ruta preferida. pastebin para la pregunta n. ° 2

PD de nuevo a saber poco sobre js. en mi proyecto, la funcionalidad de alerta y no mostrada de la función select_ids funciona, no estoy seguro de por qué no muestra la alerta en jsfiddle. lo siento mucho de antemano que necesita reparación, puntos brownie sin embargo publica la corrección bifurcada.

grid.jqGrid({
            datatype: "local",
            data: mydata,
            colNames:[''Inv No'',''Date'', ''Client'', ''Amount'',''Tax'',''Total'',''Notes''],
            colModel:[
                {name:''id'',index:''id'', key: true, width:70, sorttype:"int"},
                {name:''invdate'',index:''invdate'', width:90, sorttype:"date"},
                {name:''name'',index:''name'', width:100},
                {name:''amount'',index:''amount'', width:80, align:"right",sorttype:"float"},
                {name:''tax'',index:''tax'', width:80, align:"right",sorttype:"float"},
                {name:''total'',index:''total'', width:80,align:"right",sorttype:"float"},
                {name:''note'',index:''note'', width:150, sortable:false}
            ],
            search:true,
            pager:''#pager'',
            jsonReader: {cell:""},
            rowNum: 10,
            rowList: [5, 10, 20, 50],
            sortname: ''id'',
            sortorder: ''asc'',
            viewrecords: true,
            multiSort: true, 
            multiselect: true, 

            height: "100%",
            caption: "Invoice Print"
        });
        grid.jqGrid(''navGrid'',''#pager'',{add:false,edit:false,del:false,search:true,refresh:true},
                    {},{},{},{multipleSearch:true, multipleGroup:true, showQuery: true});
        grid.jqGrid(''filterToolbar'',{stringResult: true,searchOnEnter : false, defaultSearch:"cn"});

Answer 1

aquí está el guión onSelectAll y onSelectRow permiten guardar el estado que se restaura en gridComplete

$(function () {

            var selectedRows = {};
            var agentsGrid = $(''#agentsTbl'');
            agentsGrid.jqGrid({
                height: 400,
                datatype: ''local'',
                multiselect: true,
                ignoreCase: true,
                colNames: [
                    ''isn'', ''Agent'', ''Type'', ''Country'', ''Plan'', ''Date To''],
                colModel: [
                    { name: ''isn'', index: ''isn'', hidden: true, key: true, align: ''center'' },
                    { name: ''agentName'', index: ''agentName'', align: ''center'', search: true, stype: ''text'', searchoptions: { sopt: [''cn''] } },
                    { name: ''agentType'', index: ''agentType'', hidden: true },
                    { name: ''country'', index: ''country'', align: ''center'', search: true, width: 100, fixed: true },
                    { name: ''scheme'', index: ''scheme'', align: ''center'', search: true, stype: ''text'', searchoptions: { sopt: [''cn''] } },
                    { name: ''dateTo'', index: ''dateTo'', align: ''center'', search: false }
                ],
                grouping: true,
                groupingView: {
                    groupField: [''agentType''],
                    groupDataSorted: true,
                    groupColumnShow: false
                },
                // to save selection state
                onSelectAll: function (rowIds, status) {
                    if (status === true) {
                        for (var i = 0; i < rowIds.length; i++) {
                            selectedRows[rowIds[i]] = true;
                        }
                    } else {
                        for (var i = 0; i < rowIds.length; i++) {
                            delete selectedRows[rowIds[i]];
                        }
                    }
                },
                onSelectRow: function (rowId, status, e) {
                    if (status === false) {
                        delete selectedRows[rowId];
                    } else {
                        selectedRows[rowId] = status;
                    }

                },
                gridComplete: function () {
                    for (var rowId in selectedRows) {
                        agentsGrid.setSelection(rowId, true);
                    }
                }
            });