Question

我正在开发一个我正在使用Django构建的网页。我正在尝试使用jsTree来允许用户将样本分配到不同的位置。根节点是位置，叶节点是样本。样本从标记为“UNKNOWN”的位置开始，我希望用户能够添加新位置，然后将样本拖到正确的位置。

UNKNOWN
    Sample 1
    Sample 2
    Sample 3
Location 1
Location 2

到目前为止，我还没有向树中添加任何位置，因此只有UNKNOWN

这是我在Django模板中通过html创建树的地方：

<div id="demo1" class="demo" style="height:500px;width:500px">
<ul>
    {% for key, value in samples.items %}
    <li id="{{key}}">
        <a href="#">{{key}}</a>
        <ul>
            {% for key2, value2 in value.items %}
            <li id="{{key2}}">
                <a href="#">{{key2}}: {{value2}}</a>
            </li>
            {% endfor %}
        </ul>
    </li>
    {% endfor %}
</ul>
</div>

这变成了以下的html（取自firebug）：

<div id="demo1" class="demo" style="height:500px;width:500px">
    <ul>
        <li id="UNKNOWN">
            <a href="#">UNKNOWN</a>
            <ul>
                <li id="3511904">
                    <a href="#">3511904: ECKD 06-10-061-22W5M</a>
                </li>

                <li id="3511905">
                    <a href="#">3511905: WCKD 06-10-061-22W5M</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

到目前为止我在Javascript中的所有内容都是：

<script type="text/javascript">
$(function () {
    $("#demo1").jstree({
        "plugins" : ["themes","html_data","ui","crrm","hotkeys","dnd"],
        "core" : { "initially_open" : [ {% for key, value in samples.items %}"{{key}}", {% endfor %} ] },
    })
});
</script>

我对整个Web开发工作都很陌生，并且没有使用Javascript的经验。现在我要做的就是设置拖放，这样只能移动样本节点，并且只能将它们设置为位置节点的子节点。我似乎遇到的主要绊脚石是我无法弄清楚如何检查节点是否有父节点。

Answer 1

今天以新鲜的心态再次尝试之后，我明白了：

<script type="text/javascript">
$(function () {
    $("#demo1").jstree({
        "plugins" : ["themes","html_data","ui","crrm","hotkeys","dnd"],
        "core" : { "initially_open" : [ {% for key, value in samples.items %}"{{key}}", {% endfor %} ] },
        "crrm" : {
            "move" : {
                "check_move" : function(data) {
                    var p = this._get_parent(data.o);
                    //You cannot move a node with no parents
                    if(p == -1) {
                        return false;
                    }
                    //You cannot move a child to the root
                    else if(!this.get_path(data.np[0])) {
                        return false;
                    }
                    //You cannot move a node deeper than 1 level into the tree
                    else if(this.get_path(data.np[0]).length > 1) {
                        return false;
                    }

                    return true;
                }
            }
        },
        "dnd" : {
            //I don't know what this does... I was more or less just copying code
            "drop_target" : false,
            "drag_target" : false
        },
    })
});
</script>

Answer 2

crrm插件不适用于jstree v3.0 +。

那么jstree V3.0的解决方案是什么？??

JSTree限制拖放深度

2 个答案: