Каков наилучший способ хранения местоположений сетки в базе данных?

Question

У меня есть сетка, полученная от http://gridster.net/.

• Столбцы сетки видны как разные Тип [сущ.].
• Строки рассматриваются как приоритет.

Каждая ячейка представляет собой объект, как этот

Entity

• Id
• Имя
• Приоритет
• Тип Id

Примечание: Приоритет и TypeId являются как Ints, фактически связаны с расположением сетки/столбца при создании этой сетки.

Моя проблема: Каждый раз, когда клетка перемещается вокруг мне нужно обновить TypeId и приоритета этой ячейки, а также обнаружить любые другие клетки, которые могли бы переместились вокруг.

Обычно это означает массовое обновление для всех ячеек ниже приоритета + 1 (так как оно перемещено вниз).

Это решение, очевидно, работает, но я хотел бы отделить этот дизайн и, возможно, другую таблицу в базе данных, которая будет отвечать за отслеживание приоритета. (он не должен быть сильно связан с идентификатором сетки, но он должен иметь возможность делать что-то вроде Order By Priority) с какой-то другой таблицей, которая будет отвечать за порядок/приоритет. Особенно, если бы у меня была другая сетка и только показать сущность некоторых объектов.

Я думал, что подход Связанного списка может быть хорошим. Где я отслеживаю, что выше и что ниже, (предыдущий & Далее), однако это будет очень сложно для запуска запросов.

Любые идеи?

Answer 1

У меня недавно был почти такой же вопрос.

Большая разница для меня заключалась не в том, как хранить данные, а в лучшем способе отправки измененных данных.

Instantiate 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», вы оставите большие пробелы в верхней части страницы перед своими первыми элементами, поскольку ваши строки и столбцы будут сохранены в базе данных ,

Мой подход к этой проблеме включал двумерный массив как представление местоположений и размеров.

Надеюсь, я немного помог?