jqGrid - Trascinando una riga per ordinarlo cancella le larghezze cella

Question

Il mio problema: Quando trascino una riga in jqGrid e completa una funzione di ricarica personalizzata, le celle della griglia, in precedenza tutte di larghezza variabile impostate quando la griglia è definita, sono ridimensionate per essere tutte della stessa larghezza. Questo succede nei browser Webkit ma non in Firefox.

Codice: ho trascinando per ordinare abilitato su una griglia:

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

Come potete vedere ho una funzione di ordinamento invitato trascinamento completo, sort_grid. Qui è:

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 

      } 
     }) 
    } 
} 

volta mi ha colpito che ricarica grilletto $('#' + current_grid).trigger("reloadGrid"); e ricalibratura finisce la griglia ha ora larghezze non corrette le celle della griglia (vanno dall'essere varie larghezze a tutto essendo la stessa larghezza).

Quando la griglia si creava era larghezze definito nel normale modo jqGrid:

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

ma dopo la griglia ricaricare le larghezze vengono resettati tutti la stessa larghezza (suppongo questo è la larghezza totale di la griglia viene divisa equamente sul numero totale di celle nella riga). Quindi, devo impostare di nuovo queste larghezze in modo esplicito, magari con qualcosa di simile al seguente, dopo il ricaricamento della griglia?

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

---

ho provato la correzione di cui sopra, ridefinendo i colModels dopo ricarica e l'impostazione in modo esplicito la larghezza, ma non ha avuto alcun effetto. Weirder, se vado nella console del browser e impostare le larghezze con javascript, non ha alcun effetto. Questo mi ha perplesso.

---

Purtroppo per me Sembra che il jqGrid "Answer Man" (Oleg) non è in giro ... lol.

Answer 1

Hai cercato di messa a punto questa proprietà nelle opzioni jqGrid

width: 'auto', 

Se questo non funziona provare a ricaricare la griglia dopo l'aggiornamento della riga

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

Answer 2

.trigger('reloadGrid'); 

sta causando problemi con sortablerows.

Sotto lavoro intorno potrebbe aiutare (Scarico & griglia reload)

creare una funzione per configurare griglia, come di seguito

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() } }); 
} 

Creare la funzione di ricaricare griglia

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

uso loadGrid() funzione nella chiamata ajax o per aggiornare la griglia

Answer 3

Ho affrontato lo stesso problema per Chrome. L'ho ricreato qui http://jsfiddle.net/gZSra/. Basta trascinare la riga e quindi ordinare qualsiasi colonna.

Ma dopo poche ore di debug di sorgenti jqGrid ho finalmente risolto questo errore. Il problema viene visualizzato nel metodo emptyRows di 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 = {}; 
    } 
}, 

* Nel recente jqGrid-4.4.4 questo codice inizia da 1070 linea di jqGrid.src.js

Il problema connesso rimozione e poi aggiungendo FirstRow. Questa riga definisce la larghezza delle colonne - una delle sue cellule nell'esempio jsFiddle è

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

Ecco perché problema sembra essere collegato con alcune Chrome o il comportamento dinamico del tavolo Webkit.

FIX

Sostituire infettati altro ambito con la riga successiva

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

Non è difficile vedere che invece di rimuovere tutte le linee e poi aggiungendo prima di nuovo, ho solo la selezione e rimuovendo tutto tranne la prima riga.

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

testato in Chrome, FF, IE 8 & 9.

Speranza questa correzione diventerà presto parte di fonti jqGrid.

Answer 4

Il commento di PokatilovArt richiede più attenzione: jqGrid - Dragging a row to sort it screws up cell widths.

risolve il problema in Chrome.

Ecco il parametro da modificare in jqGrid:

deepempty : true 

In jqGrid wiki, qui è la definizione di questa opzione.

Questa opzione deve essere impostata su true se un evento o un plug-in è collegato alla cella della tabella. L'opzione utilizza jQuery vuota per la riga e tutti i relativi elementi figli. Questo naturalmente ha un sovraccarico di velocità, ma impedisce perdite di memoria. Questa opzione deve essere impostata su true se vengono attivate una riga e/o una colonna ordinabili.