как открывать/закрывать узлы двойным/одиночным кликом в jsTree

как я могу открывать/закрывать узлы двойным или одиночным нажатием на имя узла? Как это работает здесь пример первого дерева - но там используется jsTree 0.9.8

-

<html>
<head>
<title> dashboard</title>

<script type="text/javascript" src="_lib/jquery.js"></script>
<script type="text/javascript" src="jquery.jstree.js"></script>
<script type="text/javascript" src="_lib/jstreegrid.js"></script>
<script type="text/javascript">
//<![CDATA[

$(document).ready(function(){

var data = [{
       data: "basics",
       attr: {SOF: "<a href=\"http://www.w3schools.com\">Visit W3Schools.com!</a>"},  
        children: [
         {data: "login", attr: {run: "run"},
           children: [                   
           {data: "login", attr: {}}
          ]
         } ,
         {data: "Academic Year", attr: {run: "run"},
          children: [                   
           {data: "login", attr: {}},
           {data: "Academic Year",  attr: {filter: "mini", SOF: "<a href=\"http://www.w3schools.com\">Visit W3Schools.com!</a>"}}
          ]

         }
        ]
      }];
$("div#jstree").jstree({
plugins: ["themes","json_data","grid","dnd"],
json_data: {data: data},
grid: {
        columns: [
          {width: 220, header: "Group"},
                        {cellClass: "col2", value: "run", width: 40, header: "run"},
                        {cellClass: "col3", value: "filter", width: 40, header: "filter"},
                        {cellClass: "col4", value: "SOF", width: 450, header: "SOF"}
                ]
            },
dnd: {
drop_finish : function () {
},
drag_finish : function () {
},
drag_check : function (data) {
return {
after : true,
before : true,
inside : true
};
}
}
});
});
//]]>
</script>
</head>
<body>
<div id="jstree"></div>

</body>
</html>

jquery jstree
person Radek    schedule 05.05.2011    source источник
comment
что вы хотите переключить? видимость? какой-то другой стиль?   -  person Thomas Shields    schedule 05.05.2011

Ответы (4)


arrow_upward
11
arrow_downward

Один из способов — включить типы и плагины пользовательского интерфейса и определить обработчик событий select_node для типа по умолчанию, например так:

   $(element)
        .jstree({ 
            "types" : { 
                "types" : { 
                    "default" : { 
                        "select_node" : function(e) {
                                            this.toggle_node(e);
                                            return false;
                                        } 

                    }
                } 
             },
             "plugins" : [ "themes", "html_data","types", "ui" ] });
person TK Gospodinov    schedule 05.05.2011
comment
не могли бы вы сказать мне, где именно в моем коде мне нужно вставить ваш код? - person Radek; 05.05.2011
comment
Поместите блок типов прямо перед плагинами. Не забудьте запятую! Не забудьте добавить пользовательский интерфейс и типы в список плагинов. - person TK Gospodinov; 05.05.2011
comment
Если вы новичок в jsTree и ищете основные примеры, ознакомьтесь с моим сообщением в блоге tkgospodinov.com/ jstree-part-1-introduction. Надеюсь, это поможет. - person TK Gospodinov; 05.05.2011
comment
работает хорошо.... но высота выбранной/выбранной строки увеличивается, поэтому все дерево похоже на перемещение. Любая идея, как предотвратить это? Или мне создать новый вопрос? - person Radek; 05.05.2011
comment
@TG: да, я очень новичок :-). Вы знаете, как это исправить? stackoverflow.com/questions/5891255/a-href-in-jstreegrid PS спасибо за связь - person Radek; 05.05.2011
comment
это решение устарело? кажется, не работает с jstree 3.1.1 - person Below the Radar; 08.05.2015

arrow_upward
2
arrow_downward

В дополнение к правильному ответу от ТК...

Это решение нарушит навигацию, когда вы нажмете на элементы дерева с атрибутом href (заданным данными JSON, XML или непосредственно в HTML).

Чтобы решить эту проблему, в настроенных «типах» листа (где якоря должны запускать навигацию) установите этот обработчик:

"select_node": function (e) {
   document.location = e.children("a").attr("href");
   return false;
}
person Alex Pollan    schedule 25.07.2012

arrow_upward
1
arrow_downward

Разве вам не нужно добавлять опцию clickable: [...] при создании дерева?

person Edgar Villegas Alvarado    schedule 05.05.2011

arrow_upward

arrow_downward

person    schedule
comment
Этот код дает мне следующую ошибку при нажатии на элемент: Uncaught TypeError: Cannot call method 'toggle_node' of undefined - person Jules; 20.11.2013
comment
У меня версия jsTree 2.0.0-альфа - person Dima G.; 09.12.2013