Как правильно создать новый HTML-узел jsTree с плагином CRRM? - PullRequest
Новая
       7

Как правильно создать новый HTML-узел jsTree с плагином CRRM?

5 голосов
/ 02 июля 2010

Вот моя ситуация: использование PHP и MySQL в качестве моего бэкэнда, jQuery и jsTree для моего интерфейса.

Мое дерево находится слева, а нажатие на узел приведет к загрузке определенной информации вкоробка всплыла справа от дерева.Они могут добавлять / редактировать / удалять узлы в этом дереве с таким поведением (без перезагрузки страницы, все Ajax).

В настоящее время я могу успешно добавить узел в дерево.Я принимаю пользовательский ввод для нового узла, и если все проходит проверку (сначала на стороне клиента, затем на стороне сервера), новый «узел» добавляется в мою базу данных MySQL, а затем я обновляю jsTree на лету с помощью некоторого Javascriptдобавив новый узел к его родителю (при начальной загрузке страницы PHP правильно создает дерево HTML с неупорядоченными списками и элементами списков).

Мой простой вопрос: как добавить новый узел в jsTree с помощьюАтрибут «ID» для элемента списка («LI»)?

Для справки, вот как выглядит мое дерево HTML.Это передается jsTree, и это плагин HTML_DATA: 

<ul>
    <li class="plant" id="plant_3"><a href="javascript:void();">Plant Three</a>
     </li>
    <li class="plant" id="plant_1"><a href="javascript:void();">Plant One</a>
  <ul>
          <li class="area" id="area_2"><a href="javascript:void();">Area Two</a>
       </li>
          <li class="area" id="area_1"><a href="javascript:void();">Area One</a>
    <ul>
            <li class="building" id="building_1"><a href="javascript:void();">Building One</a>
      <ul>
              <li class="floor" id="floor_2"><a href="javascript:void();">1st Floor</a>
           </li>
              <li class="floor" id="floor_3"><a href="javascript:void();">2nd Floor</a>
           </li>
              <li class="floor" id="floor_1"><a href="javascript:void();">Ground Floor</a>
           </li>
          </ul>
         </li>
        </ul>
       </li>
      </ul>
     </li>
</ul>

Мои действия по клику основаны на уникальных идентификаторах, которые есть у каждого узла ("plant_1", "area_3" и т. Д.) В настоящее время, когда я добавляюУзел jsTree, я делаю это следующим образом (через плагин CRRM): 

$("#my_tree").jstree("create", null, false, name, {attr : "id=plant_"+id}, true);

# my_tree инициализируется следующим образом: 

$("#my_tree").jstree({
 "ui" : {
     "select_limit" : 1,
     "selected_parent_close" : "select_parent"
 },
 "html_data" : {
     "ajax" : {
  "url" : "file.php?action=get_my_tree",
  "data" : function (n) {
      return {
   id : n.attr ? n.attr("id"): 0
   };
  }
     }
 },
 "core" : {
     "animation" : 0
 },
 "plugins": [ "ui", "themes", "html_data", "hotkeys", "crrm"]
    });

Есть идеи?В документации плагина CRRM упоминается третий параметр (в моем коде выше это "{attr:" id = plant _ "+ id}"), который определяет данные 'attr' в форме объекта.

Идеальным решением было быбыть подходящим объектом для передачи в jsTree + CRRM, но я бы искал даже взломанное решение, где дополнительная строка Javascript после моей строки «создать», где я «вручную» добавляю идентификатор для недавно вставленного элемента LI.

Для справки, вот HTML, который jsTree вставляет с моей строкой "create" выше: 

<li class="jstree-leaf"><ins class="jstree-icon">&nbsp;</ins><a href="#"><ins class="jstree-icon">&nbsp;</ins>New Node!</a></li>

1 Ответ

8 голосов
/ 06 июля 2010

Итак, проблема с этой строкой: 

$("#my_tree").jstree("create", null, false, name, {
    attr : "id=plant_" + id
}, true);

Это то, что attr объекта Javascript также является объектом. Правильная строка выглядит следующим образом: 

$("#my_tree").jstree("create", null, false, name, {
    attr : {
        id: 'plant_' + id
    },
    data: name
}, true);

Таким образом, вы можете определить несколько атрибутов для вашего нового листа. Атрибут "id" фактически передается в LI (элемент списка), и это именно то, что мне нужно.

В документации jsTree упоминается, что атрибуты должны быть самими объектами JS, но я не слишком знаком со многими синтаксисами Javascript, включая объекты.

Только для потомков вот что добавлено в HTML-код jsTree: 

<li id="plant_x" class="jstree-leaf">
    <ins class="jstree-icon">&nbsp;</ins>
    <a href="#">
        <ins class="jstree-icon">&nbsp;</ins>
        New Node!
    </a>
</li>
...