Columnas ocultas en jqGrid

3 minutos de lectura

avatar de usuario
maxpower47

¿Hay alguna forma de ocultar una columna en una tabla jqGrid, pero hacer que se muestre como de solo lectura cuando se edita la fila en el cuadro de diálogo modal del editor de formularios?

Esta función está integrada en jqGrid.

configure su función de cuadrícula de la siguiente manera.

$('#myGrid').jqGrid({
   ...
   colNames: ['Manager', 'Name', 'HiddenSalary'],
   colModel: [               
               { name: 'Manager', editable: true },
               { name: 'Price', editable: true },
               { name: 'HiddenSalary', hidden: true , editable: true, 
                  editrules: {edithidden:true} 
               }
             ],
   ...
};

Hay otras reglas de edición que se pueden aplicar, pero esta configuración básica ocultaría el salario del gerente en la vista de cuadrícula, pero permitiría la edición cuando se mostrara el formulario de edición.

  • Eso es casi lo que estoy buscando, excepto que no quiero que sea editable en el formulario de edición. Estoy pensando que no hay manera de hacer eso.

    – maxpower47

    17 de noviembre de 2009 a las 12:32

avatar de usuario
cris

Solo quiero ampliar reina3Sugerencia de , aplicar lo siguiente hace el truco:

editoptions: { 
              dataInit: function(element) { 
                          $(element).attr("readonly", "readonly"); 
                        } 
             }

Escenario 1:

  • El campo debe estar visible en la cuadrícula.
  • El campo debe estar visible en el formulario
  • El campo debe ser de solo lectura

Solución:

colModel:[
        {  name:'providerUserId',
               index:'providerUserId', 
               width:100,editable:true, 
               editrules:{required:true}, 
               editoptions:{ 
                            dataInit: function(element) { 
                                  jq(element).attr("readonly", "readonly"); 
                             } 
                           }
            },
],

El ID de usuario del proveedor está visible en la cuadrícula y visible al editar el formulario. Pero no puede editar los contenidos.


Escenario #2:

  • El campo no debe estar visible en la cuadrícula
  • El campo debe estar visible en el formulario
  • El campo debe ser de solo lectura

Solución:

colModel:[
           {name:'providerUserId',
            index:'providerUserId', 
            width:100,editable:true, 
            editrules:{
                         required:true, 
                         edithidden:true
                      },
            hidden:true, 
            editoptions:{ 
                  dataInit: function(element) {                     
                             jq(element).attr("readonly", "readonly"); 
                          } 
                     }
         },
        ]

Observe que en ambos casos estoy usando jq para hacer referencia a jquery, en lugar del habitual $. En mi HTML tengo el siguiente script para modificar la variable que usa jQuery:

<script type="text/javascript">
    var jq = jQuery.noConflict();
</script>

  • excelente explicación con escenarios..!! +1

    – Anuj Patel

    24 de enero de 2012 a las 9:30

Puede usar el siguiente código para ocultar una columna de tabla.

JQuery("tableName").hideCol("colName");

Y puede usar el siguiente código para mostrarlo nuevamente.

JQuery("tableName").showCol("colName");

Para su pregunta, puede llamar al código hideCol() en document.ready(), y puede vincular el código showCol() en el evento de edición/clic del cuadro de diálogo.

  • Probablemente también desee enlazar el código hideCol() en un evento que corresponda a la finalización de la edición, o cuando el usuario/editor esté editando.

    – Anthony M. Poderes

    2 de noviembre de 2009 a las 15:17

Supongo que este hilo es bastante antiguo, pero en caso de que alguien más se tropiece con esta pregunta… Tuve que tomar un valor de la fila seleccionada de una tabla, pero no quería mostrar la columna de la que era esa fila. Usé hideCol, pero tuve el mismo problema que Andy donde se veía desordenado. Para solucionarlo (llámalo truco), solo restablezco el ancho de la cuadrícula.

jQuery(document).ready(function() {

       jQuery("#ItemGrid").jqGrid({ 
                ..., 
                width: 700,
                ...
        }).hideCol('StoreId').setGridWidth(700)

Dado que mis anchos de fila son automáticos, cuando restablecí el ancho de la tabla, restablecí los anchos de columna pero excluí el oculto, por lo que llenaron el espacio.

Intenta usar edithidden: true y también haz

editoptions: { dataInit: function(element) { $(element).attr("readonly", "readonly"); } }

O vea jqGrid wiki para una edición personalizada, puede configurar cualquier tipo de entrada, incluso etiqueta, creo.

avatar de usuario
flexografía

Para ocultar la columna de la cuadrícula

jQuery("#validGrid").jqGrid('hideCol',str);

avatar de usuario
carros

Es un poco viejo, este post. Pero este es mi código para mostrar/ocultar las columnas. Uso la función incorporada para mostrar las columnas y simplemente marcarlas.

Función que muestra las columnas mostradas/columnas ocultas. #jqGrid es el nombre de mi cuadrícula, y columnChooser es el selector de columnas jqGrid.

  function showHideColumns() {
        $('#jqGrid').jqGrid('columnChooser', {
            width: 250,
            dialog_opts: {
                modal: true,
                minWidth: 250,
                height: 300,
                show: 'blind',
                hide: 'explode',
                dividerLocation: 0.5
            } });

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad