Вот моя ситуация: с помощью 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"> </ins><a href="#"><ins class="jstree-icon"> </ins>New Node!</a></li>
Итак, проблема с этой строкой:
$("#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"> </ins>
<a href="#">
<ins class="jstree-icon"> </ins>
New Node!
</a>
</li>