come spostare un primo td per durare in un tr

Question

Ho un jqgrid, sull'impostazione di multicheck sto ottenendo la casella di controllo sulla prima colonna, voglio che la colonna checkbox sia l'ultima colonna.

Non ho trovato alcuna opzione su di esso, quindi sto scrivendo un metodo jquery personalizzato per spostare il primo td del tr per durare.

Sono provare a utilizzare

loadcomplete:function{ 
    var row = $(".cbox"); 
    for (var i = 0; i < row.length; i++) { 
     var tr = $(row[i]).parent().parent().parent(); 
     var td = $(row[i]).parent().parent(); 
     var newtd = $(td).clone(true); 
     $(tr).append($(newtd)); 
     $(tr).remove($(td)); // i am getting exception here 
    } 
} 

prega di aiuto.

Answer 1

Qualsiasi motivo per cui è così complesso? Questo dovrebbe farlo:

$('tr').each(function(){ 
    $('td:first',this).remove().insertAfter($('td:last',this)); 
}); 

vivo esempio: http://jsfiddle.net/QEuxN/1/

Answer 2

ti trovo domanda interessante, ma la risposta non è così facile. Il problema è che jqGrid usa l'indice della colonna colModel in alcuni punti per trovare il valore della colonna. Quindi, se si spostano solo gli elementi all'interno di ogni riga della griglia, si avrà l'informazione corretta visualizzata nella griglia, ma la griglia sarà non modificabile. Nessuna modalità di modifica funzionerà con la griglia.

Problema successivo. Nel tuo esempio hai usato 'td:first' per ottenere la cella con la casella di controllo. Sarà sbagliato in caso di utilizzo dell'opzione rownumbers: true. Nel caso in cui la casella di controllo sia nella seconda e non nella prima colonna.

Il più buon modo per riordinare le colonne insieme colModel sarà l'utilizzo di remapColumns metodo come

$("#list").jqGrid('remapColumns', [0,2,3,4,...,1], true, false); 

E si guarda a the demo che utilizzano questo vedrete che tutto sia corretto alla prima volta, ma dopo aver cambiato pagina, ordinare una colonna o qualsiasi altro aggiornamento della griglia, la griglia sarà riempita in modo errato. Il motivo del problema è che il codice corrente di jqGrid funziona solo se la colonna con caselle di controllo a selezione multipla è una delle prime colonne della griglia. Guarda the code fragment ad esempio:

refreshIndex = function() { 
    ... 
    ni = ts.p.rownumbers===true ? 1 :0, 
    gi = ts.p.multiselect ===true ? 1 :0, 
    si = ts.p.subGrid===true ? 1 :0; 
    ... 
     idname = ts.p.colModel[ts.p.keyIndex+gi+si+ni].name; 
    ... 
} 

L'utilizzo gi+si+ni nell'indice di colModel array non funziona dopo riordino dei colModel. Ci sono altri posti di codice all'interno di addXmlData, addJSONData, addRowData di grid.base.js. Quindi, per avere il pieno supporto delle caselle di controllo multiselect, è necessario apportare modifiche a tutte le funzioni.

Se avete bisogno di visualizzare solo i dati nella griglia senza modificare ti posso suggerire una soluzione che sembra funzionare bene. Vedi the demo. Prima di pubblicare qualsiasi codice, ti spiego cosa dovrebbe essere fatto nel codice.

Il corpo della griglia ha sempre una riga nascosta (tr.jqgfirstrow) che verrà utilizzata per impostare la larghezza della colonna. Uno dovrebbe cambiare l'ordine nelle colonne nella riga una volta volta. Inoltre, è necessario modificare l'ordine delle colonne nelle intestazioni delle colonne (incluso the searching toolbar se esiste) e la riga del piè di pagina (di riepilogo) se esiste.

Tutte le altre righe del corpo della griglia devono essere registrate su ogni griglia che si aggiorna. Quindi si dovrebbe fare questo all'interno del gestore di eventi loadComplete o gridComplete. La funzione getColumnIndexByName

var getColumnIndexByName = function ($grid, columnName) { 
     var colModel = $grid.jqGrid('getGridParam', 'colModel'), i = 0, 
      cmLength = colModel.length; 
     for (; i < cmLength; i += 1) { 
      if (colModel[i].name === columnName) { 
       return i; 
      } 
     } 
     return -1; 
    }; 

può essere utilizzato per ottenere l'indice della colonna 'cb' con le caselle di controllo.

Per spostare colonna all'interno della tabella ho utilizzato la seguente funzione

var moveTableColumn = function (rows, iCol, className) { 
     var rowsCount = rows.length, iRow, row, $row; 
     for (iRow = 0; iRow < rowsCount; iRow += 1) { 
      row = rows[iRow]; 
      $row = $(row); 
      if (!className || $row.hasClass(className)) { 
       $row.append(row.cells[iCol]); 
      } 
     } 
    }; 

che può muoversi sia tutte le colonne di tutte le righe della tabella o solo le righe aventi classe specifica. La riga con la classe "jqgfirstrow" deve essere spostata una volta e le altre righe con classe "jqgrow" devono essere spostate su ogni griglia che aggiorna. Quindi il codice completo da the demo sarà

var $htable, $ftable, iCheckbox, $myGrid = $("#list"); 

$myGrid.jqGrid({ 
    ... // jqGrid definition 
    loadComplete: function() { 
     if (typeof(iCheckbox) === "undefined") { 
      iCheckbox = getColumnIndexByName($(this), 'cb'); 
     } 
     if (iCheckbox >= 0) { 
      // first we need to place checkboxes from the table body on the last place 
      moveTableColumn(this.rows, iCheckbox, "jqgrow"); 
     } 
    } 
}); 

// if we has not local grid the iCheckbox variable can still uninitialized 
if (typeof(iCheckbox) === "undefined") { 
    iCheckbox = getColumnIndexByName($myGrid, 'cb'); 
} 

// move column with chechboxes in all rows of the header tables 
$htable = $($myGrid[0].grid.hDiv).find("table.ui-jqgrid-htable"); 
if ($htable.length > 0) { 
    moveTableColumn($htable[0].rows, iCheckbox); 
} 

// move column with chechboxes in footer (summary) 
$ftable = $($myGrid[0].grid.sDiv).find("table.ui-jqgrid-ftable"); 
if ($ftable.length > 0) { 
    moveTableColumn($ftable[0].rows, iCheckbox); 
} 

// move column with chechboxes in footer in the first hidden column of grid 
moveTableColumn($myGrid[0].rows, iCheckbox, "jqgfirstrow"); 

Nel codice faccio uso di altre classi e strutture di griglia interne spiegate per esempio here. Another answer può dare ulteriori informazioni.