Пользовательская иерархия jQuery - PullRequest
Новая
       33

Пользовательская иерархия jQuery

0 голосов
/ 14 января 2012

Я сейчас использую jQuery для динамического создания DIV на основе пользовательского ввода.С учетом того, как они генерируются и форматируются, между DIV нет прямых отношений родитель / потомок.На самом деле, я полагаю, что самый простой способ объяснить это - генерация дерева.Я хочу иметь возможность создать собственную иерархию, такую, что если удаляется элемент в верхней части дерева, то же самое происходит со всеми его псевдодетями.

Ниже приведен несколько наглядный пример.Диаграмма следует горизонтальной иерархии. 

Level 1   Level 2    Level 3
-----------------------------

   X        X          X  \
                       X   | >> These 3 elements are pseudo-children of 
                       X  /     the first elements in level 1 and level 2

            X   <<<<<< X  << The element in level 2 is pseudo-child of  
                       X     the first element in level 1

   X        X          X

            X          X
                       X

ОБНОВЛЕНИЕ:

Пример кода: 

<tr>
  <td>Level1</td>
  <td>Level2</td>
  <td>Level3</td>
</tr>
<tr>
  <td />
  <td />
  <td>Level3</td>
</tr>
<tr>
  <td />
  <td />
  <td>Level3</td>
</tr>
<tr>
  <td />
  <td>Level2</td>
  <td>Level3</td>
</tr>
<tr>
  <td />
  <td />
  <td>Level3</td>
</tr>

и т. Д. (Соответствует схеме)

1 Ответ

1 голос
/ 14 января 2012

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

И игровую площадку http://flexiejs.com/playground/ (вместе с библиотекой JavaScript для X-браузера)

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

Может быть, я что-то упустилно что не так с этим: 

<div id="a">
   <div id="b">
      <div id="c" />
      <div id="d" />
      <div id="e" />
   </div>
   <div id="f">
      <div id="g" />
      <div id="h" />
   </div>
</div>
<div id="i">
   <div id="j">
      <div id="k" />
   </div>
   <div id="l>
      <div id="m" />
   </div>
</div>



Level 1   Level 2    Level 3
-----------------------------

   a        b          c  \
                       d   | >> These 3 elements are pseudo-children of 
                       e  /     the first elements in level 1 and level 2

            f   <<<<<< g  << The element in level 2 is pseudo-child of  
                       h     the first element in level 1

   i        j          k

            l          m
                       n
...