2010-01-28 37 views
10

Tengo una cuadrícula de árbol con muchas columnas, todas con ancho especificado. Y chico, parece terrible ya que los encabezados no están sincronizados con las columnas de abajo, incluso si tengo datos cortos en ellos.Descripción de los comportamientos de ancho de columna de JQGrid

En concreto, si el título del encabezado de columna es más corto que este ancho de columna, el encabezado se reduce al tamaño del texto en el encabezado.

¿Cómo puedo hacer que el encabezado sea exactamente del mismo tamaño que la columna?

Pregunta 2: Noté que aunque la documentación dice que la opción "ancho" de las columnas está en píxeles, puedo ver que en realidad no está en píxeles, sino solo un número relativo a otros anchos en grilla. P.ej. si todos los campos tienen el tamaño 10, todos serán iguales en tamaño, pero no de 10 píxeles de ancho.

Gracias de antemano por las aclaraciones, ya que este simple problema parece tener raíces más profundas de lo que pensaba.

Respuesta

13

Intenta jugar con los parámetros de 'autowidth' y 'shrinkToFit' jqGrid. Por ejemplo, si 'shrinkToFit' es verdadero, el ancho de las columnas se cambiará como si el ancho inicial define el porcentaje. Leer más here.

1
colModel: [ 
{ name: 'Email', index: 'Email', editable: true, edittype: 'custom', width: 220, 
       editoptions: { 
        custom_element: function(value, options) { return EmailAddressCustomElement(value, options); }, 
        custom_value: function(elem) { var inputs = $("input", $(elem)[0]); return inputs[0].value; } 
       } 
      }, 
      { name: 'LocationAndRole', index: 'LocationAndRole', editable: true, align: "left", edittype: "button", width: 170, 
       editoptions: { value: 'Edit Location And Role', dataEvents: [{ type: 'click', fn: function(e) { ShowUsersLocationAndRoles(e); } }, ] } 
      }, 



gridComplete: function() { 
var objRows = $("#list_accounts tr"); 
       var objHeader = $("#list_accounts .jqgfirstrow td"); 
       if (objRows.length > 1) { 
        var objFirstRowColumns = $(objRows[1]).children("td"); 
        for (i = 0; i < objFirstRowColumns.length; i++) { 
         $(objFirstRowColumns[i]).css("width", $(objHeader[i]).css("width")); 
        } 
       } 
      } 
1

Estaba teniendo el mismo problema. Resolví este problema al agregar 4 líneas de código en GridComplete. estas 4 líneas cambiarán el estilo de td del área de contenido [la modificación de estilo de la primera fila de td es suficiente]. Este es un problema en jqgid. Que en realidad está configurando el td dentro del '' pero este estilo no se refleja en el td del área de contenido. Al desarrollar jqgrid, supusieron que el ancho total de las columnas se vería modificado cambiando los anchos de los tds de una fila, pero solo cambiaron para '', que es el problema que persiste aquí.

ancho de las columnas en el conjunto de ColModel:

colModel: [ 
    { 
     name: 'Email', 
     index: 'Email', 
     editable: true, 
     edittype: 'custom', 
     width: 220, 
     editoptions: { 
      custom_element: function(value, options) { 
       return EmailAddressCustomElement(value, options); 
      }, 
      custom_value: function(elem) { 
       var inputs = $("input", $(elem)[0]); 
       return inputs[0].value; 
      } 
     } 
    }, 
    { 
     name: 'LocationAndRole', 
     index: 'LocationAndRole', 
     editable: true, 
     align: "left", 
     edittype: "button", 
     width: 170, 
     editoptions: { 
      value: 'Edit Location And Role', 
      dataEvents: [{ 
       type: 'click', 
       fn: function(e) { ShowUsersLocationAndRoles(e); } 
      }] 
     } 
    }, 

añadir el código de abajo en caso gridComplete:

gridComplete: function() { 
    var objRows = $("#list_accounts tr"); 
    var objHeader = $("#list_accounts .jqgfirstrow td"); 
    if (objRows.length > 1) { 
     var objFirstRowColumns = $(objRows[1]).children("td"); 
     for (i = 0; i < objFirstRowColumns.length; i++) { 
      $(objFirstRowColumns[i]).css("width", $(objHeader[i]).css("width")); 
     } 
    } 
} 

espero que el código anterior le ayudará en la solución del problema.

1
<div id="pager"></div> 
<span id='ruler' class='ui-th-column' style='visibility:hidden;font-weight:bold'></span> 
<script type="text/javascript"> 
    var colNamesData = ['Inv No','Date Of the Transaction', 'Amount That Is Owed']; 
    var colModelData = [ 
     {name:'invid', index:'invid', width:55}, 
     {name:'invdate', index:'invdate', resizeToTitleWidth:true}, 
     {name:'amount', index:'amount', align:'right', resizeToTitleWidth:true}]; 
    jQuery(document).ready(function() { 
     var ruler = document.getElementById('ruler'); 
     for (var i in colNamesData) { 
      if (colModelData[i].resizeToTitleWidth != true) { 
       continue; 
      } 
      // Measure the title using the ruler span 
      ruler.innerHTML = colNamesData[i]; 
      // The +26 allows for padding and to fit the sorting UI 
      var newWidth = ruler.offsetWidth + 26; 
      if (newWidth < 100) { 
       // Nothing smaller than 100 pixels 
       newWidth = 100; 
      } 
      colModelData[i].width = newWidth; 
     } 
     jQuery("#list").jqGrid({ 
      ... 
      colNames: colNamesData, 
      colModel: colModelData, 
      shrinkToFit:false, 
      ... 
    }); 
</script> 
+0

Ver la fuente (debe ser mencionado) del código copiado para commen ts: http://www.dorffweb.com/wordpress/2010/04/setting-jqgrid-column-width-from-titles/ –

3

que tenían el mismo problema. Resultó ser las definiciones de CSS existentes y predeterminadas para el relleno de las celdas de la tabla. Asegúrate de que tu relleno sea uniforme entre tus etiquetas th y td. Pongo un div alrededor de la rejilla con una clase de div, y añadió lo siguiente a mi CSS:

.grid td, .grid th { 
    padding: 1pt 1ex !important; 
} 
0

Ajuste el ancho de cada columna de porcentaje en CSS

Añadir las clases CSS de la siguiente manera

table.ui-jqgrid-htable thead{display:table-header-group} 
#JQGridClientMaster td, #ui-jqgrid-htable th{display:table-cell} 

Ahora establecer el ancho de cada columna de y

#JQGridClientMaster td:nth-child(1),th#JQGridClientMaster_rn{width:2% !important;} 
Cuestiones relacionadas