以编程方式将节点扩展到可嵌套项中的当前项

Question

我使用jquery-nestable构建了一个动态生成的层次列表。我不能弄清楚的是如何将列表扩展到当前项目，当包含节点id的url被直接访问

假设我有一个url，如domain.com?item=123，我有一个脚本，生成当前id在json中的父id。例如{345,234}，其中345 =顶层父级，234 = 345的子级，但也是123的父级。(以防我需要一次打开一个)

但是我似乎无法扩展这些项目，我读到它不能用jquery完成，并发现这个:https://github.com/dbushell/Nestable/issues/99但不确定如何实现。

每个列表项都有自己的动态生成id，如id="step-123"，这应该会有所帮助。如有任何帮助，不胜感激。

这是树形结构

http://pastebin.com/UnNEDbkt

Answer 1

我看了看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>