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

Question

我使用 jquery-nestable 构建了一个动态生成的层次列表。我想不通的是，当直接访问包含节点 ID 的 url

时，如何将列表扩展到当前项目

假设我有一个像 domain.com?item=123 这样的 url，并且我有一个脚本可以生成 json 中当前 ID 的父 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>

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

programmatically expand nodes to current item in nestable

javascript

jquery

jquery-nestable