Comment puis-je sauvegarder l'ordre des lignes d'une table en utilisant jquery sortable sans utiliser ".toArray()" ou ".serialize()"?

Question

Disons que j'ai une table qui utilise jquery triable. Comment puis-je obtenir innerHTML d'une ligne à échanger avec innerHTML d'une autre ligne quand il est déplacé, puis enregistrez l'ordre sur submit sans utiliser ".toArray()" ou ".serialize()". Par exemple, j'ai réussi à enregistrer la commande sans utiliser ".toArray()" ou ".serialize()" en utilisant les boutons haut et bas pour échanger innerHTML.

jQuery(function() { 
    var ids = []; 
    $("tbody#sortable").sortable({ 
     axis: "y", 
     items: ".row_order", 
     forcePlaceholderSize: true, 
     placeholder: "must-have-class", 
    start: function(event, ui) { 
     //Empty the array to avoid duplication. 
     ids = []; 
     //Store the ids in the array. 
     $.each(event.target.children, function() { 
      ids.push($(this).attr('id')); 
     }); 
    }, 
    update: function(event, ui) { 
     //Store the html in local variables 
     var prevHtml = ui.item.prev().html(); 
     var nextHtml = ui.item.next().html(); 

     //Call .html and pass the html content as an argument 
     ui.item.prev().html(nextHtml); 
     ui.item.next().html(prevHtml); 

     //On an update, loop through the sortable items and reset their items. 
     for (var i = 0; i < event.target.children.length; i++) { 
     $(event.target.children[i]).attr('id', ids[i]); 
     } 
    }   
    }); 
}); 

C'est le Fiddle

Answer 1

Votre exemple ne fonctionnera pas parce que vous affectez le contenu HTML des éléments à des variables et vous n'êtes pas manipuler les éléments DOM en aucune façon.

Afin de mettre à jour le code HTML interne, vous auriez à appeler .html() sur chaque élément et de transmettre le code html comme argument:

jQuery(function() { 
    var ids = []; 
    jQuery("#sortable_available").sortable({ 
    items: "li", 
    start: function(event, ui) { 
     //Empty the array to avoid duplication. 
     ids = []; 
     //Store the ids in the array. 
     $.each(event.target.children, function() { 
     ids.push($(this).attr('id')); 
     }) 
    }, 
    update: function(event, ui) { 
     //Store the html in local variables 
     var prevHtml = ui.item.prev().html(); 
     var nextHtml = ui.item.next().html(); 

     //Call .html and pass the html content as an argument 
     ui.item.prev().html(nextHtml); 
     ui.item.next().html(prevHtml); 

     //On an update, loop through the sortable items and reset their items. 
     for (var i = 0; i < event.target.children.length; i++) { 
     $(event.target.children[i]).attr('id', ids[i]); 
     } 
    } 
    }); 
}); 

Il pourrait y avoir une meilleure façon de maintenir les ids, mais le ci-dessus est un exemple approximatif de la façon dont vos besoins peuvent être atteints.

Cliquez sur here pour une démonstration en direct.