Я использую XML в качестве источника данных для своего дерева JSTree, но я не могу найти примеров, где вы можете установить узел в своем XML как гиперссылку или где-либо еще, чтобы установить свои собственные типы узлов со своим собственным значком и т. д. Кто-нибудь сделал это и есть примеры?
вопрос
Ответы (3)
Я думаю, вы ищете документацию по плагину jsTree Types.
В документации для jsTree указано:
Все атрибуты, установленные вами в узле элемента, будут перенесены в результирующий узел li. Все атрибуты, которые вы задали для узла name, будут перенесены в результирующий узел a.
По умолчанию jsTree добавляет адрес href текущей страницы к тегу привязки, сгенерированному из узла name в XML-разметке (плоской или вложенной). Вы можете переопределить href своим собственным адресом. Вот пример:
<item id="link__1" parent_id="0">
<content>
<name title="Click here to go to website" href="http://google.com">Google</name>
</content>
</item>
Другой вариант — использовать jQuery для захвата события щелчка по тегу a и перенаправления на основе текстового узла или чего-то еще. В этом случае используйте делегат в контейнере (diagMenu в следующем примере), чтобы jsTree отслеживал клики.
$("#diagMenu").delegate('a', 'click', function(e) {
//code to redirect based on event object
});
Немного поздний ответ, но, надеюсь, это поможет вам или другим, кто наткнется на этот ответ.
Узлы jstree отображаются как гиперссылки (теги «a» или «anchor»), если вы настроены правильно. Вы можете привязать некоторый javascript к событию выбора узла следующим образом:
jQuery(".foldertree").bind("select_node.jstree", function (e, data) {
// use this to debug: alert("data.rslt.name=" + data.rslt.name + " data.rslt.obj.attr('rel')=" + data.rslt.obj.attr("rel"));
// to get selected node Id and type
var nodeId = data.rslt.obj.attr("id");
var nodeType = data.rslt.obj.attr("rel");
// to get node's immediate parent node
parentId = data.rslt.obj[0].parentNode.parentNode.id;
// use this info to call a method or go to another page
window.location = "somepage.aspx?" + nodeId;
}
Вот как я устанавливаю разные типы узлов с разными значками. Мое дерево представляет документы в папках, поэтому у меня есть типы «по умолчанию» (папки) и «форма» (документы):
jQuery(".foldertree")
.jstree({
.
. (различные настройки)
.
"types": {
// -2 means don't check (faster)
"max_depth": -2,
"max_children": -2,
// This will prevent moving or creating any other type as a root node
"valid_children": ["default"],
"types": {
// Folders
"default": {
// can have files and other folders inside of it
"valid_children": ["default", "form"],
"icon": {
"image": "css/jstree/folder.png"
}
},
// Documents (saved forms).
"form": {
// No children (so only leaf nodes)
"valid_children": "none",
// override theme icon
"icon": {
"image": "css/jstree/file.png"
}
},
} // end types (within types)
}, // end types (outer)
"themes":
.
. (и т. д.)
.