вопрос

Я использую XML в качестве источника данных для своего дерева JSTree, но я не могу найти примеров, где вы можете установить узел в своем XML как гиперссылку или где-либо еще, чтобы установить свои собственные типы узлов со своим собственным значком и т. д. Кто-нибудь сделал это и есть примеры?


person user517406    schedule 28.02.2011    source источник


Ответы (3)


Я думаю, вы ищете документацию по плагину jsTree Types.

person Matt Ball    schedule 28.02.2011
comment
У него нет того типа примера, который я ищу. Я хочу знать, как сделать один из моих xml-узлов гиперссылкой. - person user517406; 01.03.2011
comment
@user: что ты имеешь в виду? Ссылка в самом браузере? - person Matt Ball; 01.03.2011
comment
Да, узел, который при нажатии будет перенаправлять на другую страницу. - person user517406; 01.03.2011
comment
@user: я не думаю, что это стандартный вариант использования jsTree. Вероятно, вам придется взломать эту функцию в себе. - person Matt Ball; 01.03.2011
comment
Странно... Я бы подумал, что использование такого дерева для перехода, например, к различным документам или веб-страницам, будет одним из его основных применений. - person user517406; 01.03.2011
comment
@user: я не нахожу это странным. Если вы уйдете со страницы, содержащей дерево, вы потеряете как минимум состояние дерева (например, что развернуто). Я не думаю, что jsTree является подходящим компонентом навигационного меню. В любом случае, если вы хотите реализовать это самостоятельно, в этой теме может оказаться полезным. - person Matt Ball; 01.03.2011

В документации для 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
                       });

Немного поздний ответ, но, надеюсь, это поможет вам или другим, кто наткнется на этот ответ.

person Toadmyster    schedule 06.09.2011

Узлы 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": 

.
. (и т. д.)
.

person MGOwen    schedule 03.10.2012