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

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

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

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

Мой простой вопрос: как я добавляю новый узел к jsTree с "идентификационным" атрибутом для элемента списка ("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 _" + идентификатор}"), который определяет 'attr' данные в объектной форме.

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

Для ссылки вот HTML, который jsTree вставляет с моим "создавать" строку выше:

<li class="jstree-leaf"><ins class="jstree-icon">&nbsp;</ins><a href="#"><ins class="jstree-icon">&nbsp;</ins>New Node!</a></li>
5
задан Mattygabe 2 July 2010 в 15:32
поделиться

1 ответ

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

$("#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>
8
ответ дан 14 December 2019 в 04:29
поделиться
Другие вопросы по тегам:

Похожие вопросы: