我正在使用Django構建的網頁。我正在嘗試使用jsTree來允許用戶將樣本分配到不同的位置。根節點是位置,葉節點是樣本。樣本從標有「UNKNOWN」的位置開始,我希望用戶能夠添加新位置,然後將樣本拖放到正確的位置。JSTree限制拖放深度
UNKNOWN
Sample 1
Sample 2
Sample 3
Location 1
Location 2
到目前爲止,我還沒有加入到樹中的任何位置,所以只有UNKNOWN
這是我通過HTML在Django模板創建樹:
<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(取自螢火蟲):
<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的經驗。現在我所要做的就是設置拖放操作,以便只能移動示例節點,並且只能將它們設置爲位置節點的子節點。我似乎遇到的主要絆腳石是我無法弄清楚如何檢查一個節點是否有父節點。
在[this](http://www.jstree.com/plugins/)和[this](http://www.jstree.com/api/#/?f=)上查找「types」插件$ .jstree.defaults.types)頁面。你可以給你的節點一個類型,然後給這個類型一個最大深度。使用類型插件,還可以將其設置爲使x類型只是y類型的有效子元素。 – NinjaMeTimbers