Персистский вложенный jquery сортируемый список в html?

Question

Проблема:

У меня есть вложенный список на моей странице конфигурации, выглядит следующим образом:

<a id='Save'>Save<a> 
<ul id='configuration-list'> 
    <li id='e1'>Elem A 
     <ul> 
      <li id='ey'>Elem Y </li> 
      <li id='ex'>Elem X 
      <ul><!-- and so on until 5 levels of nesting --></ul> 
      </li> 
      <li id='ez'>Elem Z </li> 
     </ul> 
    </li> 
    <li id='e45'> 
     <ul> 
     <!-- more li's and ul's nesting here --> 
     </ul> 
    </li> 
<!-- even more li's and ul's nesting here --> 
    <li id='eN'> 
    </li> 

</ul> 

Каждый литий в списке может иметь другой неупорядоченный список внутри, который содержит литий, который может содержат другой неупорядоченный список внутри.

Весь список сортируется, используя jquery ui.sortable plugin. Элементы не могут переключаться по списку.

Общее количество узлов в списке более 1k.

Когда конфигурация сохранена (ссылка «Сохранить»), я должен отправить конфигурацию заказа списка (сформировать первый в самый глубокий узел) сервер, который проанализирует его и сохранит все порядки элементов в базе данных. Для этого используется php.

Вопросы:

Что «лучший» или менее неправильный путь для анализа конфигурации, и как я должен передать его на мой PHP парсер?

Есть ли способ, аналогичный $('#configuration-list').sortable('serialize') или $('#configuration-list').sortable('toArray'), который генерирует мне xml, JSON или аналогичный со всей структурой? Расширение ui.sortable или другого плагина с этой функциональностью?

Заранее благодарен.

Answer 1

Непонятно, содержит ли <li> радио/чеки/текстовые поля, поэтому предложение может отличаться. Много лет назад (5-6 лет, я думаю) я столкнулся с подобной ситуацией, и в то время я использовал имена, ссылающиеся на структуры массивов (если я правильно помню, слишком старые воспоминания: /)

I.e.

<input type="text" name="nodes[node1][item1]" /> 
<input type="text" name="nodes[node1][item2]" /> 

Возможно, это может вам помочь.

Answer 2

.sortable('serialize') takes an optional second parameter (или, serialize() принимает один параметр Бог Ненавидит плагин APIs.):

убедитесь, что атрибуты включают в себя идентификаторы подчеркивания. Они должны быть в форме: "set_number" Например, 3 элемента список с идентификатором атрибутов foo_1, foo_5, foo_2 будет сериализовать в foo[]=1&foo[]=5&foo[]=2. Вы можете использовать символ подчеркивания, знак равенства или дефис до отдельно от набора и номера. Для пример foo=1 или foo-1 или foo_1 все сериализовать до foo[]=1.

Answer 3

Когда вы сохраняете большие вложенные наборы, вы должны рассмотреть модель вложенного набора, это другой подход для хранения иерархических данных в плоской таблице, в которой находится MySQL или любая другая не-XML-база данных. NSM работает с двумя числами слева и справа для определения диапазона набора и всех дочерних элементов в нем.

Ссылка, который был очень полезным для меня: http://mikehillyer.com/articles/managing-hierarchical-data-in-mysql/

В контроллере PHP (или везде, где вы справляетесь/контролировать свои данные перед сохранением), вы можете просто перебрать ваши конфигурации. Я предпочитаю использовать значения массива для forminputs в этом случае, как и другие плакаты.

Для этого вам следует использовать элемент формы, я предпочитаю скрытые поля, укажу имя поля как node_ #, где # представляет родительский идентификатор для дочернего элемента. И тогда значение должно быть идентификатором текущего ребенка.

Используйте простой для цикла цикл «node_ #» и получите значения массива от значения элемента 1 на 1. Увеличение порядка сортировки для каждого узла с одним и тем же родителем на 1 при прохождении узла.

Пример:

<input type="hidden" name="node_1[]" value="4"/> 
<input type="hidden" name="node_1[]" value="5"/> 
<input type="hidden" name="node_1[]" value="6"/> 
<input type="hidden" name="node_1[]" value="7"/> 

Затем узлы 4 т/м 7 будет храниться в виде массива в $ _POST [ "node_1"].