jQuery tableDnD绑定拖放ajax返回的行

Question

我有一个表，我在新记录添加后替换所有行-所有发生使用ajax调用，所以没有重新加载。

一旦记录在容器内被替换，tableDnD似乎不再与新记录一起工作-我必须重新加载页面才能再次触发。

我已经尝试使用livequery()插件以以下方式，但它似乎没有解决问题(obj是tbody对象，其中包含所有行):

sortRows : function(obj) {
    "use strict";
    obj.livequery(function() {
        $.each($(this), function() {
            var thisTbody = $(this);
            var thisUrl = thisTbody.attr('data-url');
            thisTbody.tableDnD({
                onDragClass: "trActive",
                onDrop: function(thisTable, thisRow) {
                    var thisArray = [];
                    var thisRows = thisTbody.find('tr');
                    $(thisRows).each(function() {
                        thisArray.push($(this).attr('id').split('-')[1]);
                    });
                    $(thisRows).promise().done(function() {
                        $.post(thisUrl, { items : thisArray }, 'json');
                    });
                }
            });
        });
    });
}

Answer 1

Ok -找到问题了。我将livequery应用于'tbody'元素，这实际上并没有改变-它的内容发生了变化，所以一旦我将调用对象更改为'tbody'的'tr' -现在一切正常。下面是我的代码现在的样子:

sortRows : function(obj) {
    "use strict";
    obj.find('tr').livequery(function() {
        var thisObj = $(this).parent('tbody');
        $.each(thisObj, function() {
            var thisTbody = $(this);
            var thisUrl = thisTbody.attr('data-url');           
            thisTbody.tableDnD({
                onDragClass: "trActive",
                onDrop: function() {
                    var thisArray = [];
                    var thisRows = thisTbody.find('tr');
                    $(thisRows).each(function() {
                        thisArray.push($(this).attr('id').split('-')[1]);
                    });
                    $(thisRows).promise().done(function() {
                        $.post(thisUrl, { items : thisArray }, 'json');
                    });
                }
            });
        });
    });
}

Answer 2

每次在表上添加新寄存器时，都可以更新表，如下所示:

$("#your_table_id").tableDnDUpdate();