¿Encabezados de cuadrícula consistentes con Flexigrid?

Así que estoy tratando de usar el plugin flexigrid. Parece que va a funcionar muy bien, aparte del hecho de que parece que tiene que configurar manualmente los anchos de columna. De lo contrario, los encabezados de columna no coinciden con las columnas del cuerpo.

¿Hay alguna forma de hacer una comparación automática de estos, a la vez que permite que los anchos de columna se definan por la longitud del contenido en las columnas (como es el comportamiento normal de la tabla)?

También he estado trabajando en esto hoy. Lo que se me ocurrió implica agregar un controlador onSuccess y determinar cuál es el tamaño máximo de cada columna entre el encabezado y el cuerpo, y luego establecer el ancho de ambos al máximo para esa columna.

grid.flexigrid({ ...other setup... onSuccess: function() { format(); }); } }); function format() { var gridContainer = this.Grid.closest('.flexigrid'); var headers = gridContainer.find('div.hDiv table tr:first th:not(:hidden)'); var drags = gridContainer.find('div.cDrag div'); var offset = 0; var firstDataRow = this.Grid.find('tr:first td:not(:hidden)'); var columnWidths = new Array( firstDataRow.length ); this.Grid.find( 'tr' ).each( function() { $(this).find('td:not(:hidden)').each( function(i) { var colWidth = $(this).outerWidth(); if (!columnWidths[i] || columnWidths[i] < colWidth) { columnWidths[i] = colWidth; } }); }); for (var i = 0; i < columnWidths.length; ++i) { var bodyWidth = columnWidths[i]; var header = headers.eq(i); var headerWidth = header.outerWidth(); var realWidth = bodyWidth > headerWidth ? bodyWidth : headerWidth; firstDataRow.eq(i).css('width',realWidth); header.css('width',realWidth); drags.eq(i).css('left', offset + realWidth ); offset += realWidth; } } 

Yo tuve este problema también. Aquí está mi solución, y funciona muy bien. En flexigrid.js alrededor de la línea 678, cambie esta línea.

 $(tdDiv).css({textAlign:pth.align,width: $('div:first',pth)[0].style.width}); 

a esto

 $(tdDiv).css({textAlign:pth.align,width: $('div:first',pth).width() + "px"}); 

Y estás todo listo.

Mi solución es mucho más simple que las otras sugeridas.

Antes de llamar a la función flexigrid, agregue esto:

 $("#yourtable th").each(function() { $(this).attr("width", $(this).width()); }); 

Esto establecerá el ancho de los encabezados de columna en el ancho del texto (en lugar de establecer manualmente cada ancho de encabezado con css o en el marcado) y hará que las columnas del cuerpo de la tabla tengan el mismo ancho.

He conseguido que esto funcione (al menos parcialmente). El problema que estaba teniendo con mi iteración anterior (que también era un problema con la implementación de tvanfosson) era que una vez que cambiaba el tamaño de los encabezados, las barras de “arrastre” no se alinearían con los nuevos anchos de columna.

Mi implementación actual es la siguiente, que funciona en Firefox 3.5 y Chrome. Desafortunadamente, hay una excepción lanzada en IE (todas las versiones) que es bastante desconcertante. Voy a depurar más el lunes:

 $(".flexigrid").each(function() { var grid = $(this); var headers = grid.find(".hDiv thead th"); var row = grid.find(".bDiv tbody tr:first"); var drags = grid.find("div.cDrag div"); if (row.length >= 1) { var cells = row.find("td"); var offsetAccumulator = 0; headers.each(function(i) { var headerWidth = $(this).width(); var bodyWidth = cells.eq(i).width(); var realWidth = bodyWidth > headerWidth ? bodyWidth : headerWidth; $(this).width(realWidth); cells.eq(i).width(realWidth); var drag = drags.eq(i); var dragPos = drag.position(); var offset = (realWidth - headerWidth); var newPos = dragPos.left + offset + offsetAccumulator; offsetAccumulator += offset; drag.css("left", newPos); }); } }); 

Gracias. Basado en el post de la línea 678, la mía se arregló con lo siguiente:

 $(tdDiv).css({textAlign:pth.align,width: $('div:first',pth).width()-10 + "px"}); 

Por alguna razón, la fuente del encabezado es más grande que la fuente detallada … espero que esto ayude.

A partir de su propia respuesta, agregué la configuración de ancho mínimo para que las columnas no se expriman de manera diferente si el ancho del flexigrid era demasiado estrecho o el tamaño del flexigrid, probado solo en cromo:

  $(this).width(realWidth); cells.eq(i).width(realWidth); // these two lines added $(this).css('min-width', realWidth); cells.eq(i).css('min-width',realWidth); 

Solo haciendo este cambio de tamaño de la columna de ruptura, ya que esto modifica el ancho de la división dentro de th y td, pero eso se puede arreglar con algunas líneas adicionales en flexigrid en la función “arrastrar y soltar”:

 . . . // LINE 211 $('th:visible div:eq(' + n + ')', this.hDiv).css('width', nw); // ADD THIS AFTER LINE 211 $('th:visible div:eq(' + n + ')', this.hDiv).parent().css('min-width', nw); $('th:visible div:eq(' + n + ')', this.hDiv).parent().css('width', nw); . . . // LINE 214 $('td:visible div:eq(' + n + ')', this).css('width', nw); // ADD THIS AFTER LINE 214 $('td:visible div:eq(' + n + ')', this).parent().css('width', nw); $('td:visible div:eq(' + n + ')', this).parent().css('min-width', nw); 

Un problema similar para mí. Tener una página con 3 tabs, cada una con un flexigrid. Solo una de las tabs tenía problemas donde la celda del encabezado era de alguna manera más corta que las celdas de datos debajo de ella. Lo que también eliminó la alineación de todas las celdas de encabezado que siguen a esa.

… lo que descubrí al inspeccionar los elementos renderizados utilizando la funcionalidad CTRL + MAYÚS + J de Chrome e inspeccionar hacia abajo dentro del elemento

... finalmente, encontrando el campo

... era que el width: px parte ni siquiera estaba allí!

Regresé e inspeccioné donde estaba definiendo colModel y noté solo esa columna ... en lugar de width: , inadvertidamente Width: , lugar (mayúsculas y minúsculas). Era una diferencia tan sutil que mis ojos no la captaban cuando examinaba y comparaba / contrastaba inicialmente las tabs que funcionaban con esta que tenía el problema.

Sé que esto resultará extraño para algunos, pero tuve el mismo problema y una vez que reorganicé mi diseño (toda la página, no la cuadrícula en sí), todo estaba bien.

Tenía un diseño fluido de 3 columnas. Moví la cuadrícula a la parte superior de la página, justo después de la etiqueta del cuerpo, ¡y se alineó perfectamente! Guau…

Encontré esto en otra parte:

Lo descubrí, para cualquier persona con un problema similar: lo

a

, cuando lo

a

todo funcionó muy bien!

http://markmail.org/message/kibcuxu3kme2d2e7

Este me funcionó:

  onSuccess : function(){ $('#flex1 > tbody').wrap('
'); },

Agregue esto a las opciones de construcción de flexgrid. flex1 es tu id div flexgrid

Moshe.

Me encontré con lo mismo, descubriendo que el ancho de mis divs que contenían los encabezados de las columnas y las celdas de la tabla tenía el ancho = 0. Así que tuve que esperar un poco hasta que se construyó toda la tabla html, luego tuve que correr El método de “formato”. Lo siguiente es que tengo la tabla HTML incorporada en un div invisible al principio. Así que tuve que omitir el selector not(:hidden) dentro de mi código.

Aquí vamos:

  $.fn.flexAddData = function(data) { // function to add data to grid ... }; // my own method to justify the column headers with the body $.fn.flexFormat = function() { return this.each(function() { var gridContainer = $('.flexigrid'); var headers = gridContainer.find('.hDiv table tr:first th'); var firstDataRow = gridContainer.find('.bDiv table tr:first td'); var offSet = 10; // for each element in headers // compare width with firstDataRow elemts // the greater one sets the width of the lower one $.each(headers, function(i) { var thWidth = $(this).find('div').outerWidth(); var tdWidth = $(firstDataRow[i]).find('div').outerWidth(); thWidth > tdWidth ? $(firstDataRow[i]).find('div').width(thWidth - offSet) : $(this).find('div').width(tdWidth - offSet); }); }); }; // end format 

La convocatoria para el método de la siguiente manera:

  setTimeout(function() { $('.flexigrid').flexFormat(); } , 10 ); 

Espero tener otra solución para el problema 😉 Saludos, Christoph

Este código funciona bien en mi proyecto. Es similar a otras respuestas.

 $("#my_table").flexigrid({ ... onSuccess: function(){ columnWidth(); $(window).resize(function(){ columnWidth(); }); } }); function columnWidth(){ var num_col = 0; //Work with the columns width of the first row of body $("#row1 td").each(function(td){ //row's column's width greater than header's column's width if($(this).width() > $("th[axis='col"+num_col+"']").width()){ $("th[axis='col"+num_col+"']").width($(this).width()); $("th[axis='col"+num_col+"']").css({"min-width":$(this).width()}); } //header's column's width greater than row's column's width else if($("th[axis='col"+num_col+"']").width() > $(this).width()){ $("td[abbr='"+$(this).prop('abbr')+"']").width($("th[axis='col"+num_col+"']").width()); $("td[abbr='"+$(this).prop('abbr')+"']").css({"min-width":$("th[axis='col"+num_col+"']").width()}); } ++num_col; }); } 

Espero que esto haya resuelto tus problemas.

    Intereting Posts