совет по структуре данных для страницы ajax / javascript / jquery - PullRequest
Новая
       1

совет по структуре данных для страницы ajax / javascript / jquery

1 голос
/ 22 марта 2011

Это веб-страница JavaScript / Ajax (также использующая jQuery).

У меня есть вложенная структура, которую нужно отобразить. После отображения элемента верхнего уровня пользователи могут щелкнуть по нему и увидеть уровни под ним (динамически генерируемые).

Я не хочу предварительно генерировать все и скрывать это с помощью display: none (страница сложная, я упрощаю этот вопрос) - я хочу построить отображение из массива javascript, который был извлечен с помощью ajax .

Мой вопрос:

У меня есть два варианта:

1: создать плоский массив: 

[ {id: xx, children: [ xx, xx, .. ] }, ....]

Затем для щелчка элемента я получаю идентификатор из массива, нахожу детей, вытаскиваю их из массива и отображаю их. (Думаю, мне придется искать в массиве, поскольку в javascript нет ассоциативных массивов - или составить индекс.)

2: создать вложенный массив: 

{ id: xx, children [ { id: xx, children : [....] }, {....} ] }

Затем каким-то образом привязать дочерние элементы в массиве к элементу, когда я его отображу

У меня есть две проблемы с этим вторым подходом:

A: Я постоянно копирую большие куски массива для каждого дочернего элемента при его создании. (По крайней мере, я так думаю. Нужно ли использовать глубокое копирование? Могу ли я сделать ссылку?)

B: Я не уверен, как связать данные с дочерним элементом. Обычно я строю отображение, используя строки html с помощью onClicks, а затем добавляю все это. Но onClicks может принимать только идентификатор, а не копию массива.

Ответы [ 2 ]

0 голосов
/ 28 марта 2011

Недавно я сделал нечто подобное, когда у меня была очень большая вложенная структура (более 2000 узлов), которую я не хотел массово добавлять в DOM.

В итоге я взял данные, загруженные ajax, и преобразовал их во вложенную структуру ... 

<node id="1" title="a">
  <node id="2" title="b />
  <node id="3" title="b">
      <node id="4" title="d" />
  </node>
</node> etc...

... и сохраняя его как объект jQuery (узлы), но никогда не добавляя его в DOM.

Затем я мог бы выбрать непосредственных потомков узла, так как они мне были нужны относительно легко, для преобразования в html-элементы и добавления в DOM, добавления данных и т. Д. * 

$("#"+ID+">node", nodes).each(function() { 
    var node = $(this);
    //do whatever... 
});

Я не знаю, является ли это наиболее эффективным с точки зрения памяти подходом, но он, безусловно, позволяет очень легко выбирать и добавлять непосредственных потомков узла в DOM по мере необходимости.

0 голосов
/ 22 марта 2011

Я бы предпочел использовать второй подход, потому что он имеет лучшую структуру, а также вы можете писать меньше кода, когда в игру вступает рекурсив.

Вы говорите, что не знаете, как связатьдочерние элементы массива без фактического создания элементов dom, хорошо, если вы используете <!DOCTYPE html> для html, ваши элементы могут иметь атрибуты html-*, позволяющие хранить данные в элементе, например: 

<ul id="lists">
    <li class="parent" id="root_22" data-children="{some object}">A Root Elelment</li>
</ul>

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

Другой способ - связать данные с помощью метода jQuery.data.DOM очищает, но привязывает данные к элементу.

Сохраняет произвольные данные, связанные с указанным элементом.

@ см .: http://api.jquery.com/jQuery.data/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...