14

我确信这是非常简单的事情，通常是这样。

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

我为 jQuery 表格排序插件 tableDnD 提供了上述代码。这是他们提供的示例中的确切代码，但是当我将项目放入表中时，它不会正确触发 onDrop 事件。我在控制台中没有得到任何响应。表格确实初始化了，并且拖动手柄正常工作，所以我至少知道那部分代码是正确的。我唯一不能工作的是 onDrop 命令。

更新：
我更新了上面的代码，添加了一个 onDragStart 和 onDragClass，它们都可以正常工作，只是 onDrop 函数失败了。

这是我的一般表格布局：

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

3 回答 3

28

您必须定义 tr[id] 属性才能使 onDrop 工作。这是因为 onDrop 仅在行顺序更改时触发。但是，如果不指定 tr[id] 属性，tableDnD.serialize() 会认为没有任何重新排序。（肯定有漏洞）

于 2013-01-08T06:04:23.913 回答
6

好吧，我的第一个问题，我得到了答案。希望这对将来的某人有所帮助。

问题在于我的表格行的实际 ID。我实际上使用了 uuid，这意味着我的行实际上有一个类似于“26b5122e-bbb8-11e1-9c53-d4856404b576”的 ID。显然，TableDnD 对破坏我的 ID 的数据进行了某种序列化，并且只抓取了最后一组数字，这对于大多数项目来说都是相同的。

导致问题的 jquery.tablednd.js 文件中的行是这样的（大约第 380 行）：

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

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

我只是删除了序列化程序，因为我知道我的行 ID 不需要它。然后我自己传递了行 ID。这就是结果。

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

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

因此，如果您在行 ID 中使用破折号，请确保更改它以使 onDrop 正确触发。

于 2012-08-02T14:31:44.993 回答
1

快速解决。

如果您希望 onDrop 在没有 row.id 的情况下工作，您可以编辑插件。

替换这个（第 255 行是函数开始的地方 - currentOrder）

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

有了这个

    return $(this.dragObject).index();
于 2015-03-03T09:18:18.170 回答