0

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

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 的经验。现在我要做的就是设置拖放，以便只能移动示例节点，并且只能将它们设置为位置节点的子节点。我似乎遇到的主要绊脚石是我无法弄清楚如何检查节点是否有父节点。

4

1 回答 1

4

今天重新尝试后，我想通了：

<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>
于 2013-04-03T22:35:30.237 回答