jquery - full - Haz que el ancho de JqGrid sea fluido

jqgrid guriddo

Question

Esta pregunta ya tiene una respuesta aquí:

• Forma de hacer que jqGrid responda en buscadores web 4 respuestas

Código corregido:

<script>
    var $grid = $("#list2");
    emptyMsgDiv = $("<div><span style=''color:red; text-align:center;font-size:18px;display:block;''>No Workorder Found</span></div>");
    jQuery("#list2").jqGrid({
        url:''server.php'',
        datatype: "json",
        mtype: ''POST'',
        colNames:[''WO#'',''Status'',''Customer Name'',''Salesman'', ''Created Date'', ''WO Total'', ''Notes'', ''Edit''],  
        colModel:[ 
               {name:''id'',index:''id'', align:"center"}, 
               {name:''status1'',index:''status1'', align:"center", width:100}, 
               {name:''status2'',index:''status2'', align:"center", width:50}, 
               {name:''status3'',index:''status3'', align:"center"}, 
               {name:''result'',index:''result'', align:"center", sortable:false}          
        ],
        rowNum:10,
        rowList:[10,20,30],
        pager: ''#pager2'',
        sortname: ''Invoice.id'',
        viewrecords: true,
        height:''100%'',
        autowidth:true,
        sortorder: "desc",
        height: ''100%'',
        loadComplete: function() {
             var ts = this;
             if (ts.p.reccount === 0) {
                 $(this).hide();
                 emptyMsgDiv.show();
             } else {
                 $(this).show();
                 emptyMsgDiv.hide();
             }
        }
    });
    emptyMsgDiv.insertAfter($grid.parent());
    </script>

Aquí está el código que tengo para mi JqGrid:

<script>
var $grid = $("#list2");
emptyMsgDiv = $("<div><span style=''color:red; text-align:center;font-size:18px;display:block;''>No Workorder Found</span></div>");
jQuery("#list2").jqGrid({
    url:''server.php'',
    datatype: "json",
    mtype: ''POST'',
    colNames:[''WO#'',''Status'',''Customer Name'',''Salesman'', ''Created Date'', ''WO Total'', ''Notes'', ''Edit''],  
    colModel:[ 
           {name:''id'',index:''id'', align:"center"}, 
           {name:''status1'',index:''status1'', align:"center"}, 
           {name:''status2'',index:''status2'', align:"center"}, 
           {name:''status3'',index:''status3'', align:"center"}, 
           {name:''result'',index:''result'', align:"center", sortable:false}          
    ],
    rowNum:10,
    rowList:[10,20,30],
    pager: ''#pager2'',
    sortname: ''Invoice.id'',
    viewrecords: true,
    height:''100%'',
    sortorder: "desc",
    height: ''100%'',
    loadComplete: function() {
         var ts = this;
         if (ts.p.reccount === 0) {
             $(this).hide();
             emptyMsgDiv.show();
         } else {
             $(this).show();
             emptyMsgDiv.hide();
         }
    }
});
emptyMsgDiv.insertAfter($grid.parent());
</script>

Estoy tratando de hacer que el ancho del fluido del colmodel para la página, puedo cambiar el ancho manualmente para cada una de las columnas como en el siguiente tidbit:

{name:''status1'',index:''status1'', align:"center", width:50}

Sin embargo, no puedo definir porcentajes, o parezco descubrir cómo hacer el ancho de fluido. ¿Alguien tiene alguna idea?

Answer 1

puede hacer que llene la página usando lo siguiente:

auto ancho: verdadero,

También establecí anchos mínimos personalizados para algunas de las columnas que se enumeran arriba

Answer 2

En primer lugar, debe agregar la opción autowidth: true , que establece el ancho inicial de la grilla al ancho del contenedor externo en la página HTML. colModel cambio de tamaño de todas las columnas proporcionales al valor de la propiedad de width en colModel . Como no especifica ninguna propiedad de width , se usará el valor predeterminado de 150 . En caso de cambio de tamaño, significa que ha especificado el mismo ancho para todas las columnas. Si necesita mantener un ancho fijo para algunas columnas, por ejemplo para la columna que tiene formatter: "actions" (que muestra dos iconos de edición en la cuadrícula), puede agregar fixed: true a la columna.

Para cambiar el tamaño de la cuadrícula cada vez que se cambie el tamaño de la ventana del navegador web o del div externo, puede usar el siguiente código

$(window).bind("resize", function () {
    var newWidth = $grid.closest(".ui-jqgrid").parent().width();
    $grid.jqGrid("setGridWidth", newWidth, true);
}).trigger("resize");

(ver la respuesta anterior ).

Existen características adicionales en jqGrid libre , la bifurcación de jqGrid que desarrollo comenzando con renombrar jqGrid a Guriddo jqGrid JS (ver la publicación ) y hacerlo comercial. La demostración: http://jsfiddle.net/OlegKi/andm1299/19/ usa <div class="container"> como div externo de jqGrid y para agregar classes: "hidden-xs", labelClasses: "hidden-xs" clases de arranque (ver la documentación ) a la columna menos importante ComboDuration de la demostración. Como resultado, la columna se hará automáticamente oculta / visible al redimensionar la cuadrícula. Podría ser muy útil producir buenos resultados en dispositivos móviles con baja resolución de píxeles.