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>

此代码用于初始化Isotope 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中，然后将它们插入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);

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

如何在保持当前排序和过滤的同时通过ajax更新Isotope 2项目？

1 个答案: