2016-01-27 3 views
12

Я пытаюсь выполнить итерацию по каждому узлу в дереве в jstree. Древовидное изображение имеет 4 уровня глубины, но я не могу пройти мимо 1-го уровня. Ниже приведен пример jQuery, используемый для итерации.jstree jquery как перебирать все узлы

$("#myTree").bind('ready.jstree', function (event, data) { 
    $('#myTree li').each(function() { 
     // Perform logic here 
     } 
    }); 
}); 

Here является jsfiddle, иллюстрирующий мою точку зрения. Пожалуйста, помогите, как я могу выполнять итерацию через каждый узел в jstree.

+1

При проверке кода возвращение одного 'li', по-видимому, вызвано абстракцией jsTree. Когда ваш слушатель срабатывает, '# myTree' фактически содержит только один' li'. –

+0

Как я могу разместить для нескольких li, когда древовидная структура является динамической? – Hshdj122

+1

У вас есть несколько ответов, которые предоставляют решение. Рассмотрите вопрос о признании ответа как принятого, если он кажется полным решением вашего вопроса. –

ответ

14

Это получает всех детей вашего дерева в плоском массиве для вашей петли .each.

$("#tree").bind('ready.jstree', function(event, data) { 
    var $tree = $(this); 
    $($tree.jstree().get_json($tree, { 
     flat: true 
    })) 
    .each(function(index, value) { 
     var node = $("#tree").jstree().get_node(this.id); 
     var lvl = node.parents.length; 
     var idx = index; 
     console.log('node index = ' + idx + ' level = ' + lvl); 
    }); 
}); 

JSFiddle - Docs for get_json

5

Другой способ, чтобы открыть их, прежде чем пытаться узлы доступа в РОМ, а затем закрыть их:

$("#tree").bind('ready.jstree', function (event, data) { 
    $(this).jstree().open_all(); // open all nodes so they are visible in dom 
    $('#tree li').each(function (index,value) { 
     var node = $("#tree").jstree().get_node(this.id); 
     var lvl = node.parents.length; 
     var idx = index; 
     console.log('node index = ' + idx + ' level = ' + lvl); 
    }); 
    $(this).jstree().close_all(); // close all again 
}); 
3

"Вершины" перегруженная термин. Вы имеете в виду узлы HTML или только данные JSON, используемые для определения каждого узла в jstree? Мне нужно было выполнить итерацию через jstree, чтобы извлечь значение для поля ID в каждом узле jstree. Если это все, что вам нужно, есть более простой подход:

var v =$("#tree").jstree(true).get_json('#', {'flat': true}); 
for (i = 0; i < v.length && i < 10; i++) { 
    var z = v[i]; 
    alert("z[id] = " + z["id"]); 
} 
+0

«Вы имеете в виду узлы HTML или только данные JSON, используемые для определения каждого узла в jstree?» Это важное различие, которое меня смутило, пока вы не изложили вопрос. Благодарю. –

1

Я хотел библиотеку-способ итерации по узлам jsTree, так что я написал это в jstree.js файл:

each_node: function(callback) { 
    if (callback) { 
     var id, nodes = this._model.data; 
     for (id in nodes) { 
      if (nodes.hasOwnProperty(id) /*&& id !== $.jstree.root*/) { 
       callback.call(this, nodes[id]); 
      } 
     } 
    } 
}, 

(Примечание: Я использую jsTree 3.3.4, и я вставил код выше на линии 3712 сразу после определения get_json функции)

В коде, я могу перебирать узлы дерева, как. это:

$("#myTree").jstree(true).each_node(function (node) { 
    // 'this' contains the jsTree reference 

    // example usage: hide leaf nodes having a certain data attribute = true 
    if (this.is_leaf(node) && node.data[attribute]) { 
     this.hide_node(node); 
    } 
}); 
Смежные вопросы