2013-04-02 95 views
0

我正在使用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的經驗。現在我所要做的就是設置拖放操作,以便只能移動示例節點,並且只能將它們設置爲位置節點的子節點。我似乎遇到的主要絆腳石是我無法弄清楚如何檢查一個節點是否有父節點。

回答

2

今天再次用新鮮的心態嘗試之後,我想通了:

<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> 
-1

CRRM插件不適用於jstree V3.0 +。

那麼jstree V3.0 +的解決方案是什麼?

+1

在[this](http://www.jstree.com/plugins/)和[this](http://www.jstree.com/api/#/?f=)上查找「types」插件$ .jstree.defaults.types)頁面。你可以給你的節點一個類型,然後給這個類型一個最大深度。使用類型插件,還可以將其設置爲使x類型只是y類型的有效子元素。 – NinjaMeTimbers