Wie kann ich die Reihenfolge der Zeilen einer Tabelle mit jQuery sortierbar ohne Verwendung von ".toArray()" oder ".serialize()" speichern?

Question

Nehmen wir an, ich habe eine Tabelle, die jQuery sortierbar verwendet. Wie kann ich den innerHTML einer Zeile beim Ziehen mit der innerHTML einer anderen Zeile austauschen und dann die Reihenfolge beim Senden speichern, ohne ".toArray()" oder ".serialize()" zu verwenden. Ich habe es zum Beispiel geschafft, die Reihenfolge zu speichern, ohne ".toArray()" oder ".serialize()" zu verwenden, indem ich innerHTML mit den Nach-oben- und Nach-unten-Tasten auswertete.

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

Dies ist die Fiddle

Answer 1

Ihr Beispiel wird, weil nicht funktionieren werden Sie den HTML-Inhalt der Elemente Variablen zuweisen und Sie nicht die DOM-Elemente in irgendeiner Weise zu manipulieren.

Um die innere html zu aktualisieren, dann würden Sie .html() auf jedes Element anrufen und die HTML als Argument übergeben:

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

Es könnte eine bessere Möglichkeit, die IDs zu halten, aber die oben ist ein grobes Beispiel dafür, wie Ihre Anforderungen erreicht werden können.

Klicken Sie auf here für eine Live-Demo.