jquery - 如何通过ajax更新同位素2项目，同时保持当前的排序和过滤？

Question

我正在使用同位素构建卡片仪表板。卡的数据是通过 Controller 操作动态生成的(MVC 5 部分 View ):

<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

我的另一个问题没有得到答案，所以我必须继续尝试和搜索，直到找到解决方案。这个非常具体，我会给你的。

无论如何，同位素的方法附加和前置在插入项目后很难正确设置布局。另外，通过 $isogrid.append/prepend 添加项目现在似乎有点破坏，所以我通过 jquery 将项目添加到 DOM，然后将它们插入 Isotope 中，一切再次正常工作:

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

我仍然找不到更新现有卡而不是替换所有内容的简单方法，所以我会再等几天再接受这个答案。