如何在维护当前排序和筛选的同时通过ajax更新同位素2项？

Question

我在用同位素做卡片仪表板。卡的数据是通过控制器操作(MVC 5部分视图)动态生成的：

<div id="cards">
    @Html.Action("GetCards")
</div>

变成：

<div id="cards">
    <div id="rn" class="card w2" data-errors="1" data-warnings="2">
         ...
    </div>
    <div id="ba" class="card" data-errors="0" data-warnings="1">
         ...
    </div>
</div>

这个代码用于初始化同位素2：

var $isogrid = $('#cards').isotope({
    itemSelector: '.card',
    masonry: {
        columnWidth: 7 // does anyone knows how this works, I can't understand it. :P
    },
    getSortData: {
        region: '.title',
        errors: '[data-errors]',
        warnings: '[data-warnings]'
    },
    sortBy: ['errors', 'warnings', 'region'],
    sortAscending: { errors: false, warnings: false, region: true }
});

卡片和砖石的布局是正确的显示和一切工作的预期。当我通过ajax更新卡片时，问题就会发生：

setInterval(function () {
    $.get('@Url.Action("GetCards")', function (data) {
        var $item = $('.card');
        $isogrid.isotope('remove', $item);

        $isogrid.append(data)
            .isotope('appended', data)
            .isotope('reloadItems').isotope('layout');
    });
}, 5000);

但是这样做，网格就失去了布局:所有的卡片都堆放在左上角，过滤和排序设置也会丢失。

理想情况下，我应该只是更新修改后的卡片，而不是删除和重新插入它们。大多数情况下，会收到相同的卡片(包含更新的信息)，但有时(很少)会从列表中删除一些卡，或者插入新的卡。有人知道实现这一目标的方法吗？

Answer 1

我的另一个问题没有得到答案，所以我必须不断地尝试和寻找，直到我找到解决办法。这个很具体，我会告诉你的。

无论如何，同位素的方法appended和prepended在插入项目后很难设置布局。此外，通过$isogrid.append/preppend添加这些项现在似乎有点不完善，所以我通过jquery将这些项添加到DOM中，然后将它们插入到同位素中，一切都进行得很好：

setInterval(function () {
    $.get('@Url.Action("GetCards")', function (data) {
        var $item = $('.card');
        $isogrid.isotope('remove', $item);
        $('#cards').html('').append(data);
        $isogrid.isotope('insert', $('.card'));
    });
}, 5000);

我仍然找不到一种简单的方法来更新现有的卡片，而不是替换所有的东西，所以我会再等几天才能接受这个答案。