jqGrid - Arrastrando una fila para clasificarla anula el ancho de las celdas

Question

Mi problema: Cuando arrastro una fila en jqGrid, y completa una función de recarga personalizada, las celdas de la grilla, anteriormente todas las anchuras variables se configuran cuando se define la grilla, se cambian de tamaño para que todos tengan el mismo ancho. Esto sucede en los navegadores Webkit pero no en Firefox.

Código: He arrastrando a ordenar la habilitada en una cuadrícula:

$mygrid.jqGrid(
    'sortableRows', { 
     update: function(e, ui) { 
      sort_grid(e, ui); 
     } 
    } 
); 

Como se puede ver que tengo una función de clasificación pedido a la fricción completa, sort_grid. Aquí está:

function sort_grid(e, ui) { 
    var current_grid = $(ui.item[0]).closest('table').attr('id'); 
    var $current_row, moved_id, next_id, next_priority; 
    var $moved_row = $('#' + current_grid + ' tr'); 
    var cnt = 0; 

    this_id = ui.item[0].id; 
    $moved_row.each(function() { 
     if ($(this).attr('id') == this_id) { 
      $current_row = $moved_row.eq(cnt); 
      moved_id = $current_row.attr("id"); 
      next_id = $current_row.next().attr("id"); 
      next_priority = $current_row.next().children("td:first").attr("title"); 
     } 
     cnt++; 
    }); 

    if (typeof moved_id !== 'undefined') { 
     if (next_priority == 'undefined') { 
      next_priority = '999'; 
     } 

     $.ajax({ 
      url:my_url, 
      type:"POST", 
      data:"moved_id=" + moved_id + "&next_id=" + next_id + "&next_priority=" + next_priority, 
      success: function(data) { 

       $('.grid').setGridParam({loadonce:false, datatype:'json'}); // force grid refresh from server 
       $('#' + current_grid).trigger("reloadGrid"); 
       $('.grid').setGridParam({loadonce:true}); // reset to use local values 

      } 
     }) 
    } 
} 

Una vez que llegué que recarga gatillo $('#' + current_grid).trigger("reloadGrid"); y recarga termina la red cuenta ahora con anchuras incorrectos en las celdas de la rejilla (pasan de ser de diferentes anchuras para todo ser del mismo ancho).

Cuando la rejilla se creó originalmente había anchuras definidas de la manera normal jqGrid:

colModel:[ 
    {name:'one', index:'one', sortable:true, width:45}, 
    {name:'two', index:'two', sortable:true, width:180}, 
] 

pero después de volver a cargar las anchuras se restablecen la cuadrícula ser todos de la misma anchura (yo supongo que esta es la anchura total de la cuadrícula se divide de manera uniforme sobre el número total de celdas en la fila). Entonces, ¿tengo que establecer estos anchos explícitamente de nuevo, tal vez con algo así como lo que se llama después de que la red se recarga?

$('.grid').setGridParam({ 
    colModel:[ 
     {name:'one', index:'one', sortable:true, width:45}, 
     {name:'two', index:'two', sortable:true, width:180}, 
    ] 
}); 

---

He intentado el arreglo anterior, la redefinición de los colModels después de recarga y establecer explícitamente los anchos, pero no tuvo ningún efecto. Más raro, si entro en la consola del navegador y establezco los anchos con javascript, tampoco tiene ningún efecto. Eso me tiene perplejo.

---

Por desgracia para mí parece que el jqGrid "Hombre Respuesta" (Oleg) no está cerca ... lol.

Answer 1

Ha intentado configurar esta propiedad en sus opciones jqGrid

width: 'auto', 

Si esto no funciona intente volver a cargar su parrilla después de la actualización de la fila

jQuery('.grid').trigger('reloadGrid'); 

Answer 2

.trigger('reloadGrid'); 

está causando problemas con sortablerows.

Debajo trabajo alrededor podría ayudarle (Unload & red de recarga)

crear una función para configurar la red, como a continuación

jQuery().ready(ConfigureGrid); 

function ConfigureGrid(){ 
    jQuery("#grdCategory").jqGrid({ 
     url: '/controller/action', 
     datatype: "xml", 
     colNames: ['Order', 'Name', 'Page Title', 'Is Active', 'Action' 
     ], 
     colModel: [ 
     { name: 'col1', index: 'col1', width: 50, sortable: true, sorttype: 'int' } 
     , { name: 'col2', index: 'col2', width: 150, sortable: true } 
], 
     rowNum: 10, 
     rowList: [10, 20, 30], 
    }); 

    $("#list1").jqGrid('navGrid', '#pager1', { edit: false, add: false, del: false, search: true }); 
    $("#list1").jqGrid('sortableRows', { update: function (event, ui) { updateOrder() } }); 
} 

Crear función para recargar la rejilla

function loadGrid() { 
      $('#grdCategory').jqGrid('GridUnload'); 
      ConfigureGrid(); 
     } 

uso loadGrid() función en la devolución de llamada ajax o para actualizar la cuadrícula

Answer 3

Me enfrenté al mismo problema para Chrome. Lo recreé aquí http://jsfiddle.net/gZSra/. Simplemente arrastre la fila y luego ordene cualquier columna.

Pero después de algunas horas difíciles de depuración de fuentes jqGrid finalmente arreglé este error. El problema aparece en emptyRows método de jqGrid.

emptyRows = function (scroll, locdata) { 
    var firstrow; 
    if (this.p.deepempty) { 
     $(this.rows).slice(1).remove(); 
    } else { 
     firstrow = this.rows.length > 0 ? this.rows[0] : null; 
     $(this.firstChild).empty().append(firstrow); // bug "activation" line 
    } 
    if (scroll && this.p.scroll) { 
     $(this.grid.bDiv.firstChild).css({height: "auto"}); 
     $(this.grid.bDiv.firstChild.firstChild).css({height: 0, display: "none"}); 
     if (this.grid.bDiv.scrollTop !== 0) { 
      this.grid.bDiv.scrollTop = 0; 
     } 
    } 
    if(locdata === true && this.p.treeGrid) { 
     this.p.data = []; this.p._index = {}; 
    } 
}, 

* En el reciente jqGrid-4.4.4 este código comienza a partir de 1070 línea de jqGrid.src.js

El problema conectado eliminación de y luego añadiendoFIRSTROW. Esta fila define el ancho de las columnas - Una de sus células en mi ejemplo jsFiddle es

<td role="gridcell" style="height:0px;width:60px;"></td>

Esa es la razón problema parece estar relacionado con un poco de cromo o el comportamiento dinámico de la tabla de WebKit.

FIX

Reemplazar infectados alcance más con la siguiente línea

$(this.firstChild).find('tr:not(:first)').remove(); 

No es difícil ver que en lugar de la eliminación de todas las líneas y luego añadiendo primera vuelta, sólo la selección y eliminando todos excepto la primera fila.

Resultado jsFiddle: http://jsfiddle.net/HJ3Q3/

Probado en Chrome, FF, IE 8 & 9.

Esperanza esta corrección pronto se convertirá en parte de fuentes jqGrid.

Answer 4

El comentario de PokatilovArt necesita más atención: jqGrid - Dragging a row to sort it screws up cell widths.

Resuelve el problema en Chrome.

Aquí es el parámetro a cambiar en jqGrid:

deepempty : true 

En jqGrid wiki, aquí es la definición de esta opción.

Esta opción debe establecerse en verdadero si un evento o un complemento está conectado a la celda de la tabla. La opción usa jQuery vacío para la fila y todos sus elementos secundarios. Esto, por supuesto, tiene una sobrecarga de velocidad, pero evita fugas de memoria. Esta opción debe establecerse en verdadero si se activan las filas y/o columnas ordenables.