В jstree, как сфокусировать указанный узел на большом дереве?

У меня есть большая структура jstree для реализации менеджера таксономии. У меня нет проблем с открытием определенного узла по идентификатору: treeElement.jstree('open_node', nodeId);

Я написал окно поиска, и когда я выбираю элемент из раскрывающегося списка поиска, он открывает окно редактирования для этого элемента. Однако дерево, которое остается в поле зрения внизу левой панели, не фокусируется на этом элементе. Я могу открыть выбранный узел, но он может быть за пределами экрана, поскольку он может находиться в другой части дерева, отличной от видимого в данный момент выбора (все это находится в большой области прокрутки).

Мой вопрос: Как мне сделать так, чтобы дерево фокусировалось на нужном узле? Пользователь должен фактически видеть, где в дереве находится выбранный им узел. Я не хочу прокручивать вверх или вниз, чтобы найти его. Это кажется довольно стандартным, но я нигде не могу найти ответ. Спасибо!


focus tree visible jstree
person riketscience    schedule 10.04.2015    source источник

Ответы (3)


arrow_upward
10
arrow_downward

Используйте функцию get_node с параметром asDom, установленным в true, а затем сфокусируйтесь, например:

treeElement.jstree(true).get_node(nodeId, true).children('.jstree-anchor').focus();

Имейте в виду, что узел должен быть виден (в DOM), чтобы это работало.

Если узел не виден (один из его родителей закрыт), вы можете использовать внутреннюю функцию _open_to, чтобы показать его (и вы также можете сфокусировать его здесь, чтобы упростить):

treeElement.jstree(true)._open_to(nodeId).focus();

С уважением, Иван

person vakata    schedule 17.04.2015

arrow_upward
2
arrow_downward

Я понимаю, что когда вы выбираете узел из раскрывающегося списка, вы также хотите его увидеть. Вы пробовали использовать jQuery .focus()?

$( "#dropdown-item" ).click(function() {
  $( "#nodeId" ).focus();
});
person Harry    schedule 13.04.2015

arrow_upward
0
arrow_downward

1- в ядре jstree необходимо добавить («анимация»: 0)

"core": {
    "initially_open": ["phtml_1"],
    "rtl": true,
    "animation": 0
},

2- Выберите узел:

var str1 ='mynodeid';
$("#demo1").jstree('select_node', "#" + str1 );

3- в привязке Функция Select_node:

.bind("select_node.jstree", function (event, data) {
    data.inst._fix_scroll(data.rslt.obj);
}
person H.P    schedule 17.07.2015