javascript - tactiles - no funciona el boton de retroceso de mi celular

El botón Agregar jqGrid en la barra de herramientas de navegación no funciona

Question

Intento crear una grilla que permita al usuario agregar, editar y eliminar el registro. He terminado de trabajar para llenar la grilla ahora voy a mostrar el cuadro de diálogo para agregar registro. Pero, no sé por qué no funciona. El cuadro de diálogo no se muestra.

Esta es la instantánea de mi grilla.

y esta es mi función js

InfoDesk.GridManager.postsGrid = function (gridName, pagerName) {
    //Create the grid
    $(gridName).jqGrid({
        //server url and other ajax stuff
        url: ''/Admin/Posts'',
        datatype: ''json'',
        mtype: ''GET'',

        height: ''auto'',

        //Columns
        colNames: colNames,
        colModel: columns,

        //pagination options
        toppager: true,
        pager: pagerName,
        rowNum: 10,
        rowList: [10, 20, 30],

        //row number columns
        rownumbers: true,
        rownumWidth: 40,

        //default sorting
        sortname: ''PostedOn'',
        sortorder: ''desc'',

        //display the no. of records message
        viewrecords: true,

        jsonReader: { repeatitems: false },

        afterInsertRow: function (rowid, rowdata, rowelem) {
            var tags = rowdata["Tags"];
            var tagStr = "";

            $.each(tags, function (i, t) {
                if (tagStr) tagStr += ", "
                tagStr += t.Name;
            });


            $(gridName).setRowData(rowid, { "Tags": tagStr });

        }


    });

    $(gridName).navGrid(pagerName,
                     {
                         cloneToTop: true,
                         search: false,
                         add:true
                     }, editOptions, addOptions, deleteOptions);                
    };

Cuando hago clic en el botón Agregar. Nada esta pasando. Este es mi primer proyecto con jqGrid. Entonces, estoy completamente en blanco al respecto.

EDITADO:

Encontré un ejemplo de violín y lo modifiqué para la barra de navegación. Está funcionando bien pero, aun así, no pude reconocer el problema en el que estoy cometiendo un error en mi código.

violín

Answer 1

Me parece que su objetivo principal es comprender cómo puede usar navGrid correctamente con localizadores superiores e inferiores. Así que explicaré exactamente cómo funciona todo.

No está claro si necesita agregar los iconos de navegador en el buscapersonas superior o en el buscapersonas superior e inferior. No está claro si usa el buscapersonas inferior en absoluto.

jqGrid tiene dos opciones principales que especifican las opciones de la página: pager y toppager . Para usar la opción de pager necesita crear <div> que tenga el atributo id , coloque el div en la página en alguna parte y use el selector de id o el nombre id como el valor de la opción de pager . Por ejemplo, puede colocar <div id="mypager"></div> y usar pager: "#mypager" como la opción jqGrid. Si usa el valor de la opción de pager en otra forma compatible: pager: "mypager" o pager: $("#mypager") entonces jqGrid normalizará la opción al selector de id. Si usara var thePager = $(gridName).jqGrid("getGridParam", "pager"); para obtener el valor de la opción "buscapersonas" directamente después de que se crea la cuadrícula, obtendrá la thePager === "#mypager" independientemente de la forma en que utilizó el parámetro del pager entrada.

La opción toppager funciona un poco de otra manera. Debería usar toppager: true para crear el localizador superior. En el caso de jqGrid crea el <div> correspondiente. La id del div se construirá a partir de la identificación de la grilla y de la cadena _toppager . Entonces, en caso de tener gridName igual a #mygrid tendrías el buscapersonas superior con id="mygrid_toppager" . Si obtiene el valor de la opción toppager después de toppager la cuadrícula

var theTopPager = $(gridName).jqGrid("getGridParam", "pager");

obtendrá el selector de id del buscapersonas superior en lugar de true : theTopPager será igual a "#mygrid_toppager" ( gridName + "_toppager" ).

El valor del primer parámetro de navGrid debe ser el selector de id del buscapersonas en el que desea colocar los botones del navegador. Entonces debería ser $(gridName).navGrid(gridName + "_toppager", ...); para agregar los botones en el buscapersonas superior y $(gridName).navGrid(pagerName, ...); si desea agregar botones en el buscapersonas inferior. El uso $("#grid").navGrid(''setGridParam'', ... como lo hace en la demostración jsfiddle es incorrecto porque ''setGridParam'' no es el selector de id de ningún buscapersonas.

En caso de que tenga dos buscapersonas (en la parte inferior y en la parte superior de la cuadrícula) puede usar el selector de pager como primer parámetro de navGrid y usar la opción adicional cloneToTop: true . Por cierto, el método navButtonAdd que se puede usar para agregar un botón personalizado no tiene ninguna opción cloneToTop: true y usted tendría que especificar el selector de id del buscapersonas directamente.

Por lo tanto, si necesita crear la cuadrícula con un buscapersonas superior solamente, puede eliminar el paginador de opción jqGrid innecesario pager: pagerName y usar el siguiente código para crear la barra de navegación con los botones Agregar, Editar, Eliminar y Actualizar:

$(gridName).navGrid($(gridName).getGridParam("toppager"), { search: false });

Si desea crear una cuadrícula en el buscapersonas superior e inferior, debe usar las dos opciones de jqGrid toppager: true y pager: pagerName y puede usar cualquiera

$(gridName).navGrid($(gridName).getGridParam("pager"), { search: false });
$(gridName).navGrid($(gridName).getGridParam("toppager"), { search: false });

o la forma corta

$(gridName).navGrid($(gridName).getGridParam("pager"),
    { search: false, cloneToTop: true });

Por cierto, uso $(gridName).getGridParam("pager") lugar de pagerName como el parámetro de navGrid porque no estoy seguro de si usas id name (como "mypager" ) o id selector (como "#mypager" ) como el parámetro de InfoDesk.GridManager.postsGrid . El método navGrid acepta solo el selector de id.

Si necesita especificar parámetros adicionales de los métodos de edición de formularios utilizados durante las operaciones Agregar, Editar o Eliminar, debe especificar parámetros opcionales adicionales editOptions, addOptions, deleteOptions, searchOptions, viewOptions (consulte la documentación ). Debería de causa definir los objetos editOptions, addOptions, deleteOptions, searchOptions, viewOptions antes del uso. El código actual que publicó no contiene la definición de la opción.

ACTUALIZADO : Por cierto, implementé algunas características nuevas en la bifurcación de jqGrid que publico aquí en GitHub. 1) Uno ahora puede usar pager: true opción pager: true como toppager: true . 2) uno puede usar navGrid sin el buscapersonas (como $(gridName).navGrid({search: false}); ). En el caso, jqGrid agregará los botones en todos los localizadores que tenga jqGrid. 3) navGrid nueva opción navGrid : iconsOverText:true que permite otra vista de los botones del navegador con textos (ver la demostración ). 4) los botones del navegador se envolverán automáticamente en la siguiente fila de buscapersonas si se agregan demasiados iconos y la cuadrícula no tiene un width tan grande. Puede ver más demos de las características en la parte inferior del archivo léame en la página .