Jstree вопрос - PullRequest
Новая
       12

Jstree вопрос

2 голосов
/ 28 февраля 2011

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

Ответы [ 3 ]

2 голосов
/ 28 февраля 2011

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

1 голос
/ 03 октября 2012

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;
}

Вот как я устанавливаю разные типы узлов с разными значками. Мое дерево представляет документы в папках, поэтому у меня есть типы "default" (Папки) и "form" (Документы): 

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":

.
, (и т.д.)
,

1 голос
/ 07 сентября 2011

Документация для jsTree гласит:

Все атрибуты, которые вы установили на узле элемента, будут переданы результирующему узлу li .Все атрибуты, заданные вами в узле имени, будут переданы результирующему узлу a .

По умолчанию jsTree добавляет адрес href текущей страницы в тег привязки, сгенерированный из имя узла в разметке 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
                       });

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

...