программно расширять узлы до текущего элемента в nestable

101
8

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

Скажем, у меня есть url, например domain.com?item=123, и у меня есть скрипт, который генерирует родительский идентификатор текущего id в json. например, {345,234}, где 345 = родитель верхнего уровня и 234 = ребенок 345, а также родительский элемент 123. (Если мне нужно открыть их по одному за раз)

но я не могу расширить эти элементы, я читал, что это невозможно с помощью jquery, и нашел это: https://github.com/dbushell/Nestable/issues/99, но не уверен, как реализовать,

каждый элемент списка имеет собственный динамически сгенерированный идентификатор, такой как id = "step-123", который должен помочь. Любая помощь очень ценится.

Здесь древовидная структура

http://pastebin.com/UnNEDbkt

спросил(а) 2016-11-01T17:11:00+03:00 3 года, 8 месяцев назад
1
Решение
53

Я смотрю на jQuery Nestable и пришел к этому решению:

$.fn.nestableShow = function() {
return this.each(function () {
var $parents = $(this).parents();
$parents.each(function (i) {
var list = $(this).data("nestable");
if (list) {
$parents.slice(0, i).filter(list.options.itemNodeName).each(function(){
list.expandItem($(this));
});
return false;
}
});
});
};

После того, как вы выполнили вышеуказанное, вы можете написать следующее:

$('#step-123').nestableShow();

... и он расширит родителей этого элемента, чтобы он стал видимым в дереве.

Демо-версия:

// decorate as collapsable tree, and collapse it.
$('.dd').nestable({}).data("nestable").collapseAll();

// Plug-in for exanding the tree to make a given element visible.
$.fn.nestableShow = function() {
return this.each(function () {
var $parents = $(this).parents();
$parents.each(function (i) {
var list = $(this).data("nestable");
if (list) {
$parents.slice(0, i).filter(list.options.itemNodeName).each(function(){
list.expandItem($(this));
});
return false;
}
});
});
};

$('#find').click(function() {
$('#step-123').nestableShow();
});
$('#find2').click(function() {
$('#step-124').nestableShow();
});

.special { color: red }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Nestable/2012-10-15/jquery.nestable.min.js"></script>
<button id="find">find element 123</button>
<button id="find2">find element 124</button>
<br>

<div class="dd" id="nestable">
<ol class="dd-list">
<li class="dd-item"><span>Item 1</span></li>
<li>
<span>Item 2</span>
<ol class="dd-list">
<li class="dd-item"><span>Item 3</span></li>
<li class="dd-item"><span>Item 4</span></li>
<li class="dd-item">
<span>Item 5</span>
<ol class="dd-list">
<li class="dd-item"><span>Item 6</span></li>
<li class="dd-item special" id="step-123"><span>Here is step-123!</span></li>
<li class="dd-item"><span>Item 8</span></li>
</ol>
</li>
<li class="dd-item"><span>Item 9</span></li>
<li class="dd-item"><span>Item 10</span></li>
</ol>
</li>
<li>
<span>Item 11</span>
<ol class="dd-list">
<li class="dd-item"><span>Item 12</span></li>
<li class="dd-item"><span>Item 13</span></li>
<li class="dd-item">
<span>Item 14</span>
<ol class="dd-list">
<li class="dd-item"><span>Item 15</span></li>
<li class="dd-item special" id="step-124"><span>Here is step-124!</span></li>
<li class="dd-item"><span>Item 17</span></li>
</ol>
</li>
<li class="dd-item"><span>Item 18</span></li>
<li class="dd-item"><span>Item 19</span></li>
</ol>
</li>
<li class="dd-item">
<span>Item 20</span>
</li>
<li class="dd-item">
<span>Item 21</span>
</li>
</ol>
</div>

ответил(а) 2016-11-01T22:08:00+03:00 3 года, 8 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема