0

我已经使用 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

4

1 回答 1

2

我看了一下 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-01T19:08:54.827 回答