TableDnD onDrop event not firing

问题

I'm sure this is something very simple, it usually is.

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

I have the above code in action for tableDnD, the jQuery table sorting plugin. This is the exact code from the samples they provide, but it doesn't fire the onDrop event correctly when I drop an item in the table. I get no response in the console. The table does initialize, and the drag handle works properly, so I at least know that portion of the code is correct. The only thing I can't get to work is the onDrop command.

Update:
I updated the code above to add an onDragStart and onDragClass, both of which work perfect, it is only the onDrop function failing.

This is my general table layout:

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

回答1:

You must define tr[id] attribute to make onDrop work. This is because onDrop only fire when row order changed. However, without specifying tr[id] attribute, tableDnD.serialize() will think there was not any re-order. (Bug for sure)

回答2:

Well my first question and I got the answer to it. Hope this helps someone in the future.

The issue was with the actual ID's of my table rows. I actually had use of uuid which meant that my rows actually had an ID similar to "26b5122e-bbb8-11e1-9c53-d4856404b576". Apparently TableDnD does some sort of serializing of the data that broke my ID's apart and only grabbed the last group of numbers, which for most items were the same.

The line from the jquery.tablednd.js file that was causing the issue was this (around line 380):

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

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

I simply removed the serializer since I knew I wouldn't need it for my row IDs. Then I passed the row ID along myself. This was the result.

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

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

So if you use dashes in your row IDs, make sure to change this to make the onDrop fire correctly.

回答3:

Quick fix.

If you want onDrop to work without having row.id, you can edit plugin.

Replace this (line 255 is where function starts - currentOrder)

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

With this

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

来源：https://stackoverflow.com/questions/11765366/tablednd-ondrop-event-not-firing

标签

javascript

jquery

tablednd