2016-01-25 32 views
2

。我想將子節點移動到根節點和viseversa。我也可以從第一棵樹子移動到第二棵樹的根。請幫幫我 。jsTree招子根從一棵樹到我在jsTree面臨的問題等

請找我下面的jsfiddle鏈接。 http://jsfiddle.net/ermakovnikolay/ubo3tjzk/

First tree 
<div id="tree"></div> 

Second tree 
<div id="tree2"></div> 

var data = [ 
    { "id" : "root", "parent" : "#", "text" : "Root", "state":{"opened":true} }, 
    { "id" : "cat1", "parent" : "root", "text" : "First Branch", "state":{"opened":true} }, 
    { "id" : "cat01", "parent" : "cat1", "text" : "Cat 0.1.0" }, 
    { "id" : "cat02", "parent" : "cat1", "text" : "Cat 0.1.1" }, 
    { "id" : "cat03", "parent" : "cat1", "text" : "Cat 0.1.2" } 
] 

var data2 = [ 
    { "id" : "cat2", "parent" : "#", "text" : "Second Branch", "state": {"opened":true}}, 
    { "id" : "cat11", "parent" : "cat2", "text" : "Cat 1.1.0" }, 
    { "id" : "cat12", "parent" : "cat2", "text" : "Cat 1.1.1" }, 
    { "id" : "cat13", "parent" : "cat2", "text" : "Cat 1.1.2" } 
] 

$.jstree.defaults.core = {}; 

$('#tree') 
    .on('changed.jstree', function (event, data) { 
      if(data.action == 'select_node'){ 
       $('#tree').find('li').removeClass('disabled_node'); 
       currentlevel = parseInt($('#'+data.node.id).attr('aria-level')); 
       $('#tree').find('li').each(function() { 
        if($(this).attr('aria-level') > currentlevel) { 
        $(this).addClass('disabled_node'); 
        } 
       }); 

      } 
      if(data.action == 'deselect_node'){ 
       $('#tree').find('li').each(function() { 
        if($(this).attr('aria-level') > currentlevel) { 
        $(this).removeClass('disabled_node'); 
        } 
       }); 
      } 
    }) 
    .jstree({ 
    "core" : { 
     "data" : data, 
     "themes": { 
      "url": true, 
      "icons": true 
     } 
    } 
}); 


$('#tree2') 
    .on('changed.jstree', function (event, data) { 
      if(data.action == 'select_node'){ 
       $('#tree').find('li').removeClass('disabled_node'); 
       currentlevel = parseInt($('#'+data.node.id).attr('aria-level')); 
       $('#tree').find('li').each(function() { 
        if($(this).attr('aria-level') > currentlevel) { 
        $(this).addClass('disabled_node'); 
        } 
       }); 

      } 
      if(data.action == 'deselect_node'){ 
       $('#tree').find('li').each(function() { 
        if($(this).attr('aria-level') > currentlevel) { 
        $(this).removeClass('disabled_node'); 
        } 
       }); 
      } 
    }) 
    .jstree({ 
    "core" : { 
     "data" : data2, 
     "themes": { 
      "url": true, 
      "icons": true 
     } 
    } 
}); 
+1

檢查http://jsfiddle.net/ubo3tjzk/1/。這是你想要的嗎? –

+0

@AmitKumarGhosh - 感謝兄弟。但我不想在第一棵樹上拖放位置。只有第二棵樹我可以推動。我也可以通過刪除圖像實現刪除節點選項 –

+0

可以請您詳細說明一下嗎? –

回答

3

檢查演示 - Fiddle

可以限制下降到第一樹:

'check_callback': function(operation, node, node_parent, node_position, more) { 
    if (operation === "move_node") { 
     return false; 
    } 
} 

從第一棵樹使用刪除選定的節點:

var node = $("#tree").jstree('get_selected'); 
$("#tree").jstree('delete_node', node); 

要刪除點擊放置一個節點上面的代碼爲select_node.jstree事件。

檢查第二個演示 - Fiddle

+0

的最新版本,非常感謝你:) –

+0

@NikolaErmakov - 我們能夠實現與刪除圖標的每個節點。請幫助我在第一棵樹中添加了刪除選項http://jsfiddle.net/xuap2uh1/2/ –

+0

請你解釋一下它是什麼 - 「用delete icon實現每個節點」。 –

0

這是我取得了迄今爲止 -

jsfiddle.net/ubo3tjzk/1