jquery - ¿Cómo usar la columna congelada jqgrid para diferentes anchos de pantalla?

jquery-ui frozen-columns

Question

Tengo una cuadrícula JQgrid con muchas columnas. Algunas personas tienen monitores muy amplios y algunos tienen computadoras portátiles pequeñas.

Quiero una solución donde las personas que tienen monitores anchos pueden hacer que la malla se estire siempre que tenga el tamaño de la ventana.

Para los que tienen computadoras portátiles, quiero que tengan las columnas congeladas para que cuando se desplacen, no pierdan la primera columna de la cuadrícula.

¿Cuál es la mejor manera de apoyar este diseño?

Answer 1

Para tener tanto el diseño fluido como las columnas congeladas de acuerdo con el tamaño del monitor, vea este ejemplo con una tabla fluida y una primera columna congelada:

Paso 1: agregue el script jquery.jqGrid.min.js desde el sitio principal.

Paso 2: agregue el script jquery.jqGrid.fluid.js desde el sitio http://code.google.com/p/codeincubator/source/browse/Samples/steveharman/jQuery/jquery.jqgrid.fluid/jquery.jqGrid.fluid. js? r = 170

Paso 3 - html

<div id="grid_wrapper" class="ui-corner-all floatLeft">
<table id="theGrid" class="scroll">
</table>
<div id="pager" class="scroll" style="text-align:center;"></div>
</div>

Paso 4 - Activar el script

function resize_the_grid()

      {
        $(''#theGrid'').fluidGrid({base:''#grid_wrapper'', offset:-20});
      }

$(document).ready(function(){

        var myGrid = $(''#theGrid'');        

        myGrid.jqGrid({

          datatype:''clientSide'',

          altRows:true,

          colNames:[''Name'', ''Side'', ''Power''],

          colModel:[

            { name:''name'', index: ''name'', frozen : true },

            { name:''side'', index: ''side'' },

            { name:''power'', index: ''power'' } ],

          pager: jQuery(''#pager''),

          viewrecords: true,

          imgpath: ''css/start/images'',

                caption: ''The Force: Who/'s Who?'',

                height: "100%"

        });

        myGrid.addRowData("1", {name:"Luke", side:"Good", power:"6"});

        myGrid.addRowData("2", {name:"Vader", side:"Dark", power:"9"});

        myGrid.addRowData("3", {name:"Han", side:"meh?", power:"0"});        

        resize_the_grid();
});

$(window).resize(resize_the_grid);

Espero que esto haya ayudado.

Answer 2

Este hilo describe cómo establecer el ancho de la cuadrícula según el tamaño de la ventana del navegador:

javascript - ¿Cambia el tamaño de jqGrid cuando se cambia el tamaño del navegador? - Desbordamiento de pila

Este sugiere usar la opción colModel ''fija'' para establecer ciertas columnas a un tamaño constante:

jQGrid establece ancho de columna - Desbordamiento de pila

Y, finalmente, este sitio ofrece algunos ejemplos de código y consejos adicionales para usar JQGrid:

10 JQGrid Tipls aprendidos de mi experiencia << SANDBOX .......