Question

我使用jquery-nestable构建了动态生成的层次结构列表。我无法弄清楚当直接访问包含节点ID的网址时如何将列表扩展到当前项目

我们说我有一个像domain.com?item = 123这样的网址，我有一个脚本可以生成json中当前id的父ID。像{345,234}其中345 =顶级父级，234 =孩子345但也是123的父级。（如果我需要一次打开一个）

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

每个列表项都有自己动态生成的id，如id =＆＃34; step-123＆＃34;应该有所帮助。非常感谢任何帮助。

这是树形结构

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>

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

1 个答案: