0

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

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

网格示例

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

实体

  • ID
  • 姓名
  • 优先
  • 类型 ID

注意：Priority 和 TypeId 都是 Ints，在生成此网格时实际上与 Grid/Column 位置有关。

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

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

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

我认为链接列表的方法可能很好。我在哪里跟踪上面和下面的内容，（上一个和下一个）但是这将很难运行查询。

有任何想法吗？

4

1 回答 1

1

我最近有几乎完全相同的问题。

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

实例化gridster并添加一个drop事件

$(".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”的项目，您将在您的第一个元素之前在页面顶部留下很大的空白，因为您的行和列已保存到数据库中。

我解决这个问题的方法涉及一个二维数组作为位置和大小的表示。

我希望我有点帮助？

于 2013-08-14T05:42:48.067 回答