cómo mover una primera td a la última en un tr

Question

Tengo una jqgrid, al establecer multicheck recibo la casilla de verificación en la primera columna, quiero que la columna de casilla de verificación sea la última columna.

No encontré ninguna opción en él, así que estoy escribiendo un método jquery personalizado para mover el primer td del tr al último.

Soy trate de usar

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 
    } 
} 

por favor ayuda.

Answer 1

¿Por qué es tan complejo? Esto debe hacerlo:

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

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

Answer 2

te encuentro interesante pregunta, pero la respuesta no es tan fácil. El problema es que jqGrid usa el índice de la columna colModel en algunos lugares para encontrar el valor de la columna. Entonces, si uno solo mueve los elementos <td> dentro de cada fila de la grilla, tendrá la información correcta mostrada en en la grilla, pero la cuadrícula será no editable. Ningún modo de edición funcionará con la grilla.

Siguiente problema. En el ejemplo, usaste 'td:first' para obtener la celda con la casilla de verificación. Estará mal en caso de uso de la opción rownumbers: true. En el caso, la casilla de verificación estará en la segunda columna y no en la primera.

La más buena manera de cambiar el orden de las columnas junto con colModel será el uso de remapColumns método como

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

Se nos fijamos en the demo que utilizan este se verá que todo está correcto en la primera vez, pero después de cambiar la página, ordenar una columna o cualquier otra actualización de la cuadrícula, la cuadrícula se rellenará incorrectamente. La razón del problema es que el código actual de jqGrid funciona solo si la columna con casillas de verificación de selección múltiple es una de las primeras columnas de la grilla. Mira the code fragment por ejemplo:

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; 
    ... 
} 

El uso gi+si+ni en el índice de colModel matriz no va a funcionar después de reordenamiento de colModel. Hay otros lugares de código dentro de addXmlData, addJSONData, addRowData de grid.base.js. Por lo tanto, para tener soporte completo de las casillas de verificación multiselect hay que hacer cambios en todas las funciones.

Si necesita mostrar sólo los datos en la red sin necesidad de editar puedo sugerir que la solución que parece trabajar bien. Ver the demo. Antes de publicar cualquier código, te explico qué se debe hacer en el código.

El cuerpo de la cuadrícula tiene siempre una fila oculta (tr.jqgfirstrow) que se usará para establecer el ancho de la columna. Uno debe cambiar el orden en las columnas en la fila una vez el tiempo. Además, hay que cambiar el orden de las columnas en los encabezados de las columnas (incluido el the searching toolbar, si existe) y la fila del pie de página (resumen) si existe.

Todas las demás filas del cuerpo de la grilla deben registrarse en cada cuadrícula refrescante. Entonces, uno debe hacer esto dentro del controlador de eventos loadComplete o gridComplete. La función 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; 
    }; 

se puede utilizar para obtener el índice de la columna 'CB' con las casillas de verificación.

Para mover la columna dentro de la tabla I utiliza la siguiente función

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

que se puede mover o bien todas las columnas de todas las filas de la tabla o sólo las filas que tienen clase específica. La fila que tiene la clase "jqgfirstrow" se debe mover una vez y las otras filas que tienen la clase "jqgrow" se deben mover a en cada actualización de la cuadrícula. Por lo que el código completo de the demo será

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"); 

En el código que utilizo algunas otras clases y estructuras de rejilla internos explican, por ejemplo, here. Another answer puede da información adicional.