2011-06-28 21 views
10

En jqgrid recibimos texto largo de DB, pero debemos envolverlo mientras lo visualizamos en JQgrid, ¿hay alguna forma de ajustar el texto largo (sin espacios)? Solo tenemos 110px de repuesto para el campo de nombre del beneficiario porque tenemos que mostrar varias columnas. Nuestro código es comoenvoltura larga de texto jqgrid

{name:"firstPayeeName",index:"firstPayeeName", width:"110px", align:"left", sorttype:"string"}, 

pls proporciona una solución si los hay. Gracias por adelantado.

+2

Debes establecer el estilo 'white-space: normal! Important;' para las filas. Mire [la respuesta] (http://stackoverflow.com/questions/2994343/how-to-implement-wordwrap-on-jqgrid-which-works-on-ie7-ie8-and-ff/3006134#3006134). Si necesita ajustar los textos en los encabezados de columna, consulte [aquí] (http://stackoverflow.com/questions/3641400/problem-with-wrapping-jqgrid-column-headers-on-ie/3641561#3641561). – Oleg

+0

esto funciona solo cuando tenemos espacio entre las palabras. Pero no tengo espacio y la palabra es larga. – Sabarish

Respuesta

29

En el caso de la prueba de la que se necesita mostrar tiene ningún espacio en blanco u otros espacios en blanco no se puede utilizar el estilo CSS describe here y here.

le recomiendo que utilizar otro estilo CSS:

<style type="text/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 
    } 
</style> 

Como se puede ver en the demo el texto "testtesttesttesttesttesttesttesttest" se mostrará como la siguiente:

enter image description here

+0

cualquier forma de hacer un ajuste de palabras en el cuadro de diálogo de modelo de vista? porque tengo texto largo en mis campos Si hago clic en ver, se muestra una ventana emergente con barra de desplazamiento. No quiero eso. Quiero ajustar la palabra allí ... –

+0

@CJRamki: hay muchas opciones. [La respuesta] (http://stackoverflow.com/a/8171924/315935) le muestra la regla principal de CSS que puede usar. Puede combinarlo con la regla 'max-height' como [aquí] (http://stackoverflow.com/a/8378666/315935). – Oleg

1

Por encima de solución ¡No funcionó para mí, exactamente como es, pero con pequeñas modificaciones! Ir a temas/ui.jqgrid.css: búsqueda de: .ui-jqGrid tr.jqgrow td: y en los soportes de inserción:

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 
+0

¿Esto se debió a la orden de las hojas de estilo en su html? Parece que definiste tu estilo personalizado ** antes de ** tu enlace a 'ui.jqgrid.css' si tu estilo no hizo nada. –

+0

No recuerdo bien en este momento. ¡Definí mi propio estilo para el jqrid! y tal vez el orden afectó esto! gracias Scotty! – Paschalis

1
.ui-jqgrid tr.jqgrow td 
{   
    word-wrap: break-word; /* IE 5.5+ and CSS3 */ 
    white-space: pre-wrap; /* CSS3 */ 
    white-space: -pre-wrap; /* Opera 4-6 */ 
    white-space: -o-pre-wrap; /* Opera 7 */ 
    white-space: normal !important; 
    height: auto; 
    vertical-align: text-top; 
    padding-top: 2px; 
    padding-bottom: 3px; 
} 

uso del código por encima de su trabajo. Si no le das espacio también romperá las líneas

Cuestiones relacionadas