Как я могу выбрать детский узел программно, в Dynatree?
-
26-09-2019 - |
Вопрос
Я использую Dynatriee jQuery в моем приложении, и я хочу выбрать все детские узлы программно, когда выбран родительский узел. Структура моего дерева выглядит следующим образом
<div id = "tree">
<ul>
<li>package 1
<ul>
<li>module 1.1
<ul>
<li> document 1.1.1</li>
<li> document 1.1.2</li>
</ul>
</li>
<li>module 1.2
<ul>
<li>document 1.2.1</li>
<li>document 1.2.2</li>
</ul>
</li>
</ul>
</li>
<li> package 2
<ul>
<li> module 2.1
<ul>
<li>document 2.1.1</li>
<li>document 2.1.1</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Теперь, что я хочу, это то, что когда я нажимаю на узел дерева с заголовком «Пакет 1» все его дочерние узлы IE (модуль 1.1, документ 1.1.1, документ 1.1.2, модуль 1.2, документ 1.2.1, документ 1.2.2) также следует выбрать.
Ниже приведен этот подход, который я пытался использовать:
$("#tree").dynatree({
onSelect: function(flag, dtnode) {
// This will happen each time a check box is selected/deselected
var selectedNodes = dtnode.tree.getSelectedNodes();
var selectedKeys = $.map(selectedNodes, function(node) {
//alert(node.data.key);
return node.data.key;
});
// Set the hidden input field's value to the selected items
$('#SelectedItems').val(selectedKeys.join(","));
if (flag) {
child = dtnode.childList;
alert(child.length);
for (i = 0; i < child.length; i++) {
var x = child[i].select(true);
alert(i);
}
}
},
checkbox: true,
onActivate: function(dtnode) {
//alert("You activated " + dtnode.data.key);
}
});
в if(flag)
Условие, которое я получаю все дочерние узлы элемента, выбранного пользователем, и он дает мне правильное значение, которое я могу видеть из оператора Alert (Child.Lenge). Затем я запускаю цикл, чтобы выбрать всех детей, но петля никогда не выходит за пределы заявления var x = child[i].select(true);
И я никогда не смогу увидеть заявление alert(i)
быть выполненным. Результатом вышеуказанного утверждения заключается в том, что если я выберет пакет 1, модуль 1.1 и документ 1.1.1 также выбран, но он никогда не выполняет alert(i)
Заявление - нет других детей пакета 1. На мой взгляд, когда первый раз child[i].select(true)
заявление выполняется, он также вызывает событие выбора его детей, что делает рекурсию
Я думаю, что мое мышление? Независимо от того, какая рекурсия или что на Земле это делает, он не завершает цикл и выполняет самую следующую инструкцию alert(i)
.
Пожалуйста, помогите мне в решении этой проблемы. Я умираю, чтобы увидеть, что оповещение, любое предложение и помощь высоко ценится.
Решение
Едва проверено, но вы можете попробовать что-то вроде этого:
$(function(){
var inEventHandler = false;
$("#tree").dynatree({
checkbox: true,
selectMode: 2,
[...]
onSelect: function(select, dtnode) {
// Ignore, if this is a recursive call
if(inEventHandler)
return;
// Select all children of currently selected node
try {
inEventHandler = true;
dtnode.visit(function(childNode){
childNode.select(true);
});
} finally {
inEventHandler = false;
}
}
Другие советы
Несмотря на то, что не являемся экспертом внутренних мощностей Динатриера, я написал какой-то код, который генерирует панорумы для узла щелчков и всех его потомков.
В приведенном ниже примере, нажав на «Edibles» вывод:
edibles
edibles > fruits
edibles > fruits > apples
edibles > fruits > apples > green apples
edibles > fruits > apples > green apples > granny smith
edible > vegetables
edible > vegetables > potatoes
Нажав на «зеленые яблоки», вывод:
edibles > fruits > apples > green apples
edibles > fruits > apples > green apples > granny smith
Вы можете нарисовать вдохновение из этого примера и получить необходимые поля от всех детей-документов и генерируйте свой HTML-вывод.
Код в этой теме:Лучший способ генерировать текстовые панирумы из массива PHP, имеющих 3 столбца (ID, путь, имя)?
Сам скрипт PHP называется обработчиком событий Dynatreee Onactivate через jQuery.ajax({...});
запрос.
Используйте следующую функцию вместо одного из Mar10's отвечать.
Все детские узлы выбираются / невыбранные на родительском узле выбора / невыразитесь.
onSelect: function (isSelected, node) {
node.visit(function (childNode) {
childNode.select(isSelected);
});
},