jQuery 1.7 Verschieben von Zeilen zwischen Tabellen

Question

Ich habe zwei Tabellen, die ich versuche, Zeilen zwischen verschieben - searchResultsTable und selectedCustomersTable. Es ist eine ziemlich einfache Aufgabe - einfach in der Lage sein, die Zeilen kontinuierlich zwischen den beiden Tabellen hin und her zu bewegen.

Ich verschiebe mehrere Zeilen von searchResultsTable in die selectedCustomersTable und umgekehrt. So kann der Benutzer mit den Schaltflächen Hinzufügen und Entfernen fortlaufend Zeilen zwischen den beiden Tabellen hin- und herschieben.

Die Schaltfläche Hinzufügen ist, wenn die searchResultsTable Zeilen ausgewählt hat und Sie diese in die selectedCustomersTable verschieben möchten. Das funktioniert.

Die Schaltfläche "Entfernen" dient zum Auswählen von Zeilen in selectedCustomersTable und zum Entfernen/Zurücksetzen der Zeilen in die searchResultsTable. Das scheint nicht zu funktionieren. Nachdem Sie die Zeilen einige Male hin- und herbewegt haben, scheint es so, als seien die Ereignisse verloren gegangen und es hört einfach auf zu arbeiten. Ich versuche, die .on Ereignissache in jquery 1.7 zu verwenden, aber habe kein Glück. Die Funktion "Zeilen zwischen zwei Tabellen verschieben" wird nicht immer wieder funktionieren. Es ist wie es einmal funktioniert, dann wird es nicht immer wieder funktionieren.

Hier ist mein jQuery-Code - kann jemand sehen, was die Sache ist und bieten einen Weg, um dies wieder und wieder zu arbeiten? Immer und immer wieder - das heißt - die Zeilen zwischen zwei Tabellen für immer vor und zurück bewegen, wenn der Benutzer dies wünscht.

<script type="text/javascript"> 
    $(function() { 
     $('#searchResultsTable').on('click', function (e) { 
      bindTableEvents(); 
     }); 
     $('#selectedCustomersTable').on('click', function (e) { 
      bindTableEvents(); 
     }); 

     bindTableEvents(); 


     function bindTableEvents() { 
      var $t1 = $('#searchResultsTable'); 
      var $t2 = $('#selectedCustomersTable'); 
      alert('in'); 
      setupTable($t2); 
      setupTable($t1); 
     } 

     function setupTable($table) { 
      $table.initializeTable({ 
       navigate: { 
        control: { keyboard: true, mouse: true }, 
        select: { multiple: true } 
       } 
      }); 

      $table.on('mouse', function (e, event) { 
       if (event.which == 1 && !event.ctrlKey && !event.shiftKey) { 
        var $selected = $table.selected(); 
        if ($selected.length == 1) { 
         !$selected.hasClass('active'); 
        } 
       } 
      }); 

      $table.on('keyboard', function (e, event) { 
       var $selected = $table.selected(); 
       switch (event.which) { 
        case 13: 
         //ENTER 
         if ($selected.length == 1) { 
          !$selected.hasClass('active'); 
         } 
         if ($selected.length > 0) { 

         } 
         break; 
        case 46: 
         //DELETE 
         if ($selected.length > 0) { 

         } 
         break; 
       } 
      }); 
     } 

     $('#addButton').click(function() { 
      var selectedRows = $('#searchResultsTable').selected(); 
      $('#selectedCustomersTable').append(selectedRows.removeClass('focus').remove()); 
     }); 

$('#removeButton').click(function() { 
      var selectedRows = $('#selectedCustomersTable').selected(); 
      $('#searchResultsTable').append(selectedRows.removeClass('focus').remove()); 
      }); 

    }); 
</script> 

Answer 1

Ich hatte auch mit diesem Problem zu kämpfen. Aber ich wollte diese Zeilen direkt verschieben. Hier ist meine Lösung:

$(document).ready(function() { 
    $("#searchResultsTable tbody").on("click","tr", function() { 
     var tr = $(this).closest("tr").remove().clone(); 
    $("#selectedCustomersTable tbody").append(tr); 
    }); 
    $('#selectedCustomersTable table tbody').on("click","tr", function() { 
      var tr = $(this).closest("tr").remove().clone(); 
      $("#searchResultsTable tbody").append(tr); 
    }); 
}); 

Der Punkt hier ist, um das Ereignis zu binden, auf dem tbody Handhabung, die die Klicks auf die Tabellenzeile behandelt. Die neuen HTML-Elemente, die in die zweite Tabelle eingefügt werden, behalten also die Funktion, sich zurück zu bewegen, da der tbody das Ereignis annimmt.