TableDnD onDrop event not firing

拜拜、爱过 提交于 2019-12-05 00:33:18

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)

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.

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();
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!