Question

我有一个源自http://gridster.net/的网格。

网格的列被视为实体的不同类型[s]。
行被视为优先级。

Grid example

每个单元格都是这样的对象

实体

编号
名称
优先级
TYPEID

注意：优先级和TypeId都是在生成此网格时实际上与网格/列位置相关。

我的问题： 每次移动单元格时，我都需要更新该单元格的TypeId和Priority，以及检测可能已移动的任何其他单元格。

通常，这意味着下面所有单元格的质量更新优先级为+ 1（因为它已向下移动）。

这个解决方案显然有效，但我想解耦这个设计，实际上可能是数据库中另一个负责跟踪优先级的表。（它不需要与网格ID强烈相关，但它应该能够执行类似于按优先级排序的事情）与某种其他负责订单/优先级的表。特别是如果我有另一个网格，只显示实体一些实体。

我认为链接列表的方法可能很好。我跟踪上面的内容和下面的内容，（上一页和下一页）然而，这将很难运行查询。

有什么想法吗？

Answer 1

我最近几乎有同样的问题。

对我来说，最大的不同之处不在于如何存储数据，而是发送修改数据的最佳方式。

实例化gridster并添加放置事件

$(".gridster ul").gridster({
        draggable: {
            stop: function(event, ui) {
                window.setTimeout(SavePositions, 200); //short timeout to allow DOM to update
            }
        }
    });

所以你的默认gridster看起来大致如下：

<div class="gridster ready">
      <ul style="height: 480px; position: relative;">
        <li data-row="1" data-col="1" data-sizex="2" data-sizey="1" class="gs_w"></li>
        <li data-row="3" data-col="1" data-sizex="1" data-sizey="1" class="gs_w"></li>

        <li data-row="3" data-col="2" data-sizex="2" data-sizey="1" class="gs_w"></li>
        <li data-row="1" data-col="3" data-sizex="2" data-sizey="2" class="gs_w"></li>
      </ul>
    </div>

检测更改可能会有问题，因此我会发送所有网格元素的所有数据，以防无意中移动。

function SavePositions() {
    var gridElements = [];
    $(".gridster > ul > .gs_w").each(function() {
        gridElements.push({ 
            Id: $(this).data("id"), 
            Priority: $(this).data("row"), 
            TypeId: $(this).data("col") 
        });
    });

    var data = { Gadgets: gridElements };
    $.ajax({
        type: 'POST',
        url: "<whatever>",
        data: data,
        contentType: "application/json; charset=utf-8",
        dataType: "json"
    });
}

进入您的应用程序后，您可以随意操作和存储这些内容。我个人使用MongoDB，正如你所说，它允许我对数据执行过滤和排序。虽然这并没有解除设计，但它是一个干净而动态的解决方案。使用MongoDB存储时，它看起来像这样：

{
    Id: "83cd82f7-d024-4994-9f8d-0595472398e6",
    Gadgets: [
        {
            Id: "8592c6b7-2b39-4b5c-ac08-0666b9fd6152",
            Priority: 1, 
            TypeId: 1
        },
        {
            Id: "8592c6b7-2b39-4b5c-ac08-0666b9fd6152",
            Priority: 1, 
            TypeId: 2
        },
        {
            Id: "8592c6b7-2b39-4b5c-ac08-0666b9fd6152",
            Priority: 1, 
            TypeId: 3
        }
    ]
}

如果要应用过滤器或订单，则需要一种重新排列项目行和列的方法。我遇到的最大问题是添加，订购或从网格中删除，并让其他项目改变其位置。我也会避免在你的情况下使用链表，而你可以将列可视化为链表，网格元素可以与其他列交互，这对于能够表示/捕获很重要。

例如：在您的图片中，如果您筛选出优先级为“1”的所有项目，则会在第一个元素之前在页面顶部留下较大的间隙，因为您的行和列会保存到数据库中。

我对这个问题的处理方法是将二维数组作为位置和大小的表示。

我希望我有点帮助吗？

在数据库中存储网格位置的最佳方法是什么？

1 个答案: