Jquery JQGrid – ¿Cómo establecer la alineación de las celdas del encabezado de la grilla?

¿Es posible alinear los encabezados de columna de cuadrícula en jqgrid? por ejemplo, alinear a la izquierda a la derecha o al centro?

En los documentos jqrid http://www.trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options dice:

align: Defines the alignment of the cell in the Body layer, not in header cell. Possible values: left, center, right. 

Tenga en cuenta que dice “no en la celda del encabezado”. ¿Cómo puedo hacer esto para la celda del encabezado (celda de título de la grilla)? La documentación no menciona este pequeño detalle …

La mejor manera documentada para cambiar la alineación de encabezado de columna es el uso del método setLabel de jqGrid (ver http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods ).

Puede cambiar la alineación de la columna identificada por 'name': 'Name' con el siguiente código:

 grid.jqGrid ('setLabel', 'Name', '', {'text-align':'right'}); 

Con el código

 grid.jqGrid ('setLabel', 'Name', 'Product Name', {'text-align':'right'}, {'title':'My ToolTip for the product name column header'}); 

puede cambiar el nombre del encabezado a ‘Nombre del producto’ y establecer ‘Mi información sobre herramientas para el encabezado de la columna del nombre del producto’ como una información sobre herramientas para el encabezado de la columna correspondiente.

También puede definir algunas clases en su CSS y configurarlas para los encabezados de columna también con respecto setLabel método setLabel .

Por cierto, se elige el nombre de la función ‘setLabel’ porque no se puede definir el parámetro colNames de jqGrid, pero se usa 'label' opción 'label' adicional en el colModel para definir un encabezado de columna como el valor 'name' .

ACTUALIZADO : Puedes hacer uso de clases para definir 'text-align' o 'padding' . Solo intenta seguir

 .textalignright { text-align:right !important; } .textalignleft { text-align:left !important; } .textalignright div { padding-right: 5px; } .textalignleft div { padding-left: 5px; } 

y

 grid.jqGrid ('setLabel', 'Name', '', 'textalignright'); grid.jqGrid ('setLabel', 'Description', '', 'textalignleft'); 

(Definí 5px como el relleno para ver mejor los resultados. Puede elegir el valor de relleno que encontrará mejor en su caso).

Simplemente vaya a su archivo css de su jqgrid.

Buscar:

 ui-th-column,.ui-jqgrid .ui-jqgrid-htable th.ui-th-column {overflow:hidden;white-space:nowrap;text-align:center; ... 

Y cambie el texto-alinear.

No lo encontré con opciones regulares.

Espero que esto ayude.

Bruno

Por favor, intente esto

 loadBeforeSend: function () { $(this).closest("div.ui-jqgrid-view").find("table.ui-jqgrid-htable>thead>tr>th").css("text-align", "left"); } 

Si bien el uso del método ‘setLabel’ parece factible, siempre quiero tener mis celdas de encabezado alineadas de la misma manera que las celdas. Entonces solo uso esta función:

 function pimpHeader(gridObj) { var cm = gridObj.jqGrid("getGridParam", "colModel"); for (var i=0;i 

Esto usa la alineación de las celdas para alinear el encabezado. Para ser llamado así:

 pimpHeader(jQuery("#grid")); 

Si lo desea, puede ampliar su Column-Model con 'titletext', que se muestra como tooltip-header, así:

 colModel: [{ name: 'name', label: 'Name', align: 'right', titletext: 'Name-Tooltip'}, ...] 

mira la fuente para averiguar el CSS al que se refiere tu grilla y luego puedes probar esto:

 setTimeout(function(){ jQuery('.ui-th-column').css('text-align','center'); },1); 

Simplemente puede agregar el atributo de alineación a su columna en ColModel:

 colModel: [ {name: 'MyColumn', index: 'MyColumn', align: 'center'} ],