Wordwrap de columna en JQGrid

Question

Cualquiera sabe cómo ajustar los nombres de columna en JQGrid. Por favor, encontrar el código de JSON a continuación

colModel: [{ nombre: 'RequestID', índice: 'CreditRequest.CreditRequestID, anchura: 100, alinee: 'izquierda'}, .....

Con referencia al código anterior si el tamaño del contenido excede Quiero que se envuelva. Cualquier idea o comentario

Answer 1

Bueno, la forma más sencilla de garantizar un salto de línea es poner una etiqueta <BR/> en el nombre de la columna donde quiera que necesite un salto de línea. Por ejemplo ClientPrimaryName se puede escribir como Client<BR/>PrimaryName, por lo que en realidad se renderiza como:

cliente
PrimaryName

Answer 2

Puede establecer una propiedad css de espacio en blanco de la etiqueta th a la normalidad. Usando jQuery que debe ser:

$('.ui-jqgrid .ui-jqgrid-htable th div').css('white-space', 'normal'); 

Answer 3

Es necesario echar un vistazo a las clases específicas aplicadas a su jqGrid º encabezados de columna. En mi caso tuve la siguiente: ui-th-div-ie ui-jqgrid-sortable

Mirando un poco más allá me encontré con que había dos problemas de CSS:

1. de espacios en blanco: normal
2. altura: 16px

Tanto estos atributos CSS se definieron en ui.jqgrid.css. Al darse cuenta de que tenía un requisito específico para esta cuadrícula que yo no quiero tener que afecta a otras implementaciones que se me ocurrió la siguiente solución:

$(".ui-jqgrid-sortable").css('white-space', 'normal'); 
$(".ui-jqgrid-sortable").css('height', 'auto'); 

Answer 4

sólo hacen referencia a él en su propio archivo CSS.

.ui-jqgrid tr.jqgrow td { 
    height: 50px; 
    white-space: normal; 
} 

Mientras su archivo CSS aparece en el encabezado del archivo después de la jqGrid.css entonces lo supera.

Answer 5

Por lo que vale la pena, aquí está para que la fila de encabezado:

.ui-jqgrid .ui-jqgrid-htable th div, .ui-jqgrid-sortable { 
    height:auto; 
    overflow:hidden; 
    white-space:normal !important; 
} 

Answer 6

Aquí es un par de pasos para habilitar el ajuste de texto en las celdas.

Abrir ui.jqgrid.css Buscar .ui-jqgrid tr.jqgrow td Cambio “white-space: pre;” a “white-space: normal;”

para el abrigo en la celda:

.ui-jqgrid tr.jqgrow td { 
    white-space: normal !important; 
    height:auto; 
    vertical-align:text-top; 
    padding-top:2px; 
} 

Y para encabezados de columna

.ui-jqgrid .ui-jqgrid-htable th div { 
     height:auto; 
    overflow:hidden; 
    padding-right:4px; 
    padding-top:2px; 
    position:relative; 
    vertical-align:text-top; 
    white-space:normal !important; 
} 

Answer 7

Utilice esta css

.ui-jqgrid tr.jqgrow td { 
     word-wrap: break-word; /* IE 5.5+ and CSS3 */ 
     white-space: pre-wrap; /* CSS3 */ 
     white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ 
     white-space: -pre-wrap; /* Opera 4-6 */ 
     white-space: -o-pre-wrap; /* Opera 7 */ 
     overflow: hidden; 
     height: auto; 
     vertical-align: middle; 
     padding-top: 3px; 
     padding-bottom: 3px 
    } 

Answer 8

que no puedo acaba de poner un <BR/>, mientras que las obras en envolver la línea - es imposible ajustar la altura adecuada

Answer 9

Este trabajó con jqGrid 4.4.4

.ui-jqgrid .ui-jqgrid-htable th div 
{ 
    white-space:normal; 
    height:auto !important; 
}