Hola tengo este codigo funcionando pero me gustaria saber como hacerlo con una tabla ya que necesito mostrar mas que solo el nombre
Código PHP:
<ul id="lista">
<?php
while ($datos = mysqli_fetch_assoc($resultado)){
$elementos[$datos['IDProducto_Catalogo']] = $datos['Nombre'];
echo '<li id="elemento-'.$datos['IDProducto_Catalogo'].'" contenteditable="true">'.$datos['Nombre'].'</li>';
}
?>
</ul>
Código HTML:
<script>
$(function(){
var formulario = $('#formulario'), ordenando = false, lista = $('#lista'),
elementos = lista.find('li');
lista.sortable({
update: function(event,ui){
var ordenPuntos = $(this).sortable('toArray').toString();
$.ajax({
type: 'POST',
url: 'ordenar/controlador.php',
dataType: 'json',
data: {
accion: 'ordenar',
puntos: ordenPuntos
}
});
}
});
lista.sortable('disable');
$('input[name="editar-ordenar"]').on('change', function(){
if ($(this).val() == 'ordenar'){
lista.sortable('enable');
elementos.attr('contenteditable',false);
ordenando = true;
}
else{
lista.sortable('disable');
elementos.attr('contenteditable',true);
ordenando = false;
}
});
formulario.on('submit',function(evento){ //Cuando el formulario se envía, vamos a insertar
evento.preventDefault();
var nombre = $('#campo-nombre').val();
$('#campo-nombre').val('');
$.ajax({
type: 'POST',
url: 'ordenar/controlador.php',
dataType: 'json',
data: {
accion: 'insertar',
nombre: nombre,
orden: elementos.length + 1 // El orden es el número de elementos + 1
},
success: function (devolver){
if (devolver.valor){
$('<li>',{
id : 'elemento-' + devolver.valor,
'class': ordenando ? 'ordenable' : '',
text: nombre,
'contenteditable' : !ordenando
}).hide().appendTo($('#lista')).fadeIn('slow');
}
}
});
});
lista.on('keydown', 'li', function(evento){
var punto = $(this);
var idPunto = punto.attr('id').split('-');
idPunto = idPunto[1];
switch(evento.keyCode){
case 27:{ //Escape
document.execCommand('undo');
punto.blur();
break;
}
case 46:{ //Suprimir
if (confirm('¿Seguro que quiere eliminar este elemento?')){
$.ajax({
type: 'POST',
data: {
accion: 'eliminar',
orden: punto.index(),
id: idPunto
},
url: 'ordenar/controlador.php',
success: function(e){
punto.fadeOut('slow').remove();
}
});
}
break;
}
case 13:{ //Enter
evento.preventDefault();
var texto = punto.text();
punto.blur();
$.ajax({
type: 'POST',
data: {
accion: 'editar',
id: idPunto,
nombre: texto
},
url: 'ordenar/controlador.php'
});
break;
}
}
});
});
</script>