2012-08-01 18 views
9

Jestem pewien, że jest to coś bardzo prostego, zwykle tak jest.Zdarzenie onDrop TableDnD nie wypalanie

$('#sort-table').tableDnD({ 
    onDragClass: "dnd_drag", 
    onDragStart: function(table, row) { 
     console.log("start drag"); 
    }, 
    onDrop: function(table, row) { 
     console.log($.tableDnD.serialize()); 
    }, 
    dragHandle: ".dragHandle" 
}); 

Mam powyższy kod w akcji dla tableDnD, wtyczki do sortowania tabel jQuery. Jest to dokładny kod z dostarczonych przez nie próbek, ale nie powoduje on poprawnie zdarzenia onDrop po upuszczeniu elementu w tabeli. Nie otrzymuję odpowiedzi w konsoli. Tabela się inicjalizuje, a uchwyt przeciągania działa poprawnie, więc przynajmniej wiem, że część kodu jest poprawna. Jedyne, czego nie mogę uzyskać, to polecenie onDrop.

Aktualizacja:
I uaktualniony kod powyżej, aby dodać onDragStart i onDragClass, z których oba pracują idealnie, to tylko funkcja wadą onDrop.

To mój ogólny układ tabeli:

<table id="sort-table"> 
    <tbody class="sort-items"> 
     <tr class="1"> 
      <td class="dragHandle"></td> 
      ... 
     </tr> 
     ... 
    </tbody> 
</table> 

Odpowiedz

6

Dobrze moje pierwsze pytanie i mam odpowiedź na niego. Mam nadzieję, że to pomoże komuś w przyszłości.

Problem dotyczy rzeczywistych identyfikatorów moich wierszy tabeli. Właściwie użyłem uuid, co oznaczało, że moje wiersze miały identyfikator podobny do "26b5122e-bbb8-11e1-9c53-d4856404b576". Wygląda na to, że TableDnD dokonuje jakiegoś serializowania danych, które rozbijały moje ID i tylko chwytały ostatnią grupę liczb, które dla większości przedmiotów były takie same.

Linia z pliku jquery.tablednd.js który był przyczyną problemu było to (około 380 linii):

... 
var rowId = rows[i].id; 
if (rowId && table.tableDnDConfig && table.tableDnDConfig.serializeRegexp) { 
    rowId = rowId.match(table.tableDnDConfig.serializeRegexp)[0]; 
} 

result += tableId + '[]=' + rowId; 
... 

po prostu usunął serializatora ponieważ wiedziałem, że nie będzie musiał go dla mojego identyfikatory wierszy. Następnie przekazałem identyfikator rzędu wzdłuż siebie. To był wynik.

... 
var rowId = rows[i].id; 

result += tableId + '[]=' + rows[i].id; 
... 

Więc jeśli używasz kreski w swoich identyfikatorów wierszy, upewnij się, aby to zmienić, aby ogień onDrop poprawnie.

18

Musisz zdefiniować atrybut tr [id], aby praca onDrop działała. Jest tak, ponieważ onDrop uruchamia się tylko po zmianie kolejności wierszy. Jednak bez określenia atrybutu tr [id], tableDnD.serialize() pomyśli, że nie było żadnego ponownego zamówienia. (Błąd na pewno)

+0

Kiedy dodałem do tr id, wydarzenie onDrop rozpoczął pracę – Memonic

1

Szybka naprawa.

Jeśli chcesz, aby onDrop działał bez pliku row.id, możesz edytować wtyczkę.

zastąpić ten (linia 255 jest gdzie zaczyna funkcja - currentOrder)

 var rows = this.currentTable.rows; 
     return $.map(rows, function (val) { 
      return ($(val).data('level') + val.id).replace(/\s/g, ''); 
     }).join(''); 

Dzięki tej

return $(this.dragObject).index(); 
+0

Generalnie nie jest świetny pomysł, aby zmodyfikować wtyczkę innej firmy w ten sposób w przypadku przyszłych aktualizacji. Gdybym to zmienił, tak jak sugerujesz, muszę albo stworzyć i utrzymać własny rozwidlenie wtyczki tableDnD, albo muszę zaktualizować wtyczkę ponownie za każdym razem, gdy zostanie zastosowana aktualizacja wtyczki. To komplikuje proces wprowadzania kolejnych ulepszeń. – Beau

+0

To prawda, co mówisz, dlatego zwróćcie uwagę na "Quick fix", musicie się zatroszczyć. Mam plan zrobić PR na githubie, ale potrzebuję trochę czasu, aby stworzyć normalne rozwiązanie, a nie tylko "hack". –

+0

Lepszym rozwiązaniem jest nadanie każdemu wierszowi id. Nic w tym złego. – Vincent

Powiązane problemy