2013-08-22 39 views
5

Tôi đang sử dụng jstree và tôi muốn xóa một nút cụ thể theo ID của nó sau khi nhấp vào nút.Xóa nút theo ID trong jstree khi nhấn nút

Đây là cây của tôi trong danh sách định dạng html:

<div id="testtree"> 
    <ul> 
     <li id="1" title="ID:1"><a>Fruits and Vegetables</a> 
      <ul> 
     <li id="11" title="ID:11"><a>Fruit</a> 
       <ul> 
       <li id="111" title="ID:111"><a>Apple</a></li> 
       <li id="112" title="ID:112"><a>Banana</a></li> 
       </ul> 
      </li> 
      </ul> 
     </li> 
    </ul> 
</div> 

và đây là sự kiện nút của tôi (Tôi đã có một vài nút, vì thế mà mảng):

buttons[0].addEventListener("click", function(ev) { 
     $("#testtree").jstree("remove", $("111")); 
    }); 

Bất kỳ ý tưởng những gì tôi 'M mất tích?

Cập nhật:

tôi đã sửa lỗi đánh máy nhưng nó vẫn không hoạt động. Đây là mã hoàn chỉnh, có thể sai lầm ở đâu đó khác?

<html> 
<head> 
    <title>jstree test</title> 
</head> 
<body> 
    <div id="testtree"> 
     <ul> 
      <li id="1" title="ID:1"><a>Fruits and Vegetables</a> 
       <ul> 
        <li id="11" title="ID:11"><a>Fruit</a> 
         <ul> 
          <li id="111" title="ID:111"><a>Apple</a></li> 
          <li id="112" title="ID:112"><a>Banana</a></li> 
          </ul> 
        </li> 
       </ul> 
      </li> 
     </ul> 
    </div> 

    <button>Remove Apple</button> 
    <script type="text/javascript" src="_lib/jquery.js"></script> 
    <script type="text/javascript" src="jquery.jstree.js"></script> 
    <script> 

     $(document).ready(function() { 

      $("#testtree").jstree({ 
       "plugins" : [ "themes", "html_data", "checkbox", "ui" ], 
       "core": { "initially_open": ["1"]} 
      }); 
     }); 

     var buttons = document.querySelectorAll("button"); 

     buttons[0].addEventListener("click", function(ev) { 
      $("#testtree").jstree("remove","#111"); 
     }); 

    </script> 
</body> 
</html> 
+0

Trong jQuery bạn có thể viết:. '$ ("# Testtree # 111") remove();' –

+0

đó làm việc, nhưng tôi cần để có thể tải lại cây sau này không có nút bị thiếu. – atreju

Trả lời

5

Theo jsTree documentation bạn loại bỏ như thế này

$("#testtree").jstree("remove","#111"); 

Without $()

$("#testtree").jstree({ 
     "plugins": ["themes", "html_data", "checkbox", "ui", "crrm"], 
     "core": { 
      "initially_open": ["1"] 
     } 
    }); 

Bạn cần thêm "crrm" vào các plugin

+0

Tôi đã thử điều này, nhưng nó vẫn không hoạt động. Tôi đã cập nhật mã hoàn chỉnh của mình trong bài đăng đầu tiên, có thể là lỗi ở một nơi khác? – atreju

+0

Ok, hãy thử nó trên máy tính của tôi – Anton

+1

@ user2241303 Tìm thấy nó !! :) Tôi sẽ cập nhật câu trả lời của tôi – Anton

-1

Tôi nghĩ rằng có một typo: thử:

$("#testtree").jstree("remove", $("#111")); 
4

Bất kỳ câu trả lời nào phù hợp với tôi. Thay vào đó, tôi thích sử dụng thay thế đó:

$.jstree._reference("#tree-container or node or jquery selector").delete_node(node); 

Hy vọng nó sẽ giúp ai đó.

+1

cộng với một trong số này là một trong đó đã làm nó cho tôi cảm ơn. không cần thêm plugin. – Gurnard

4

jsTree của manual (ver 3.0.0) nói:

Hãy ghi nhớ rằng theo mặc định tất cả các sửa đổi đối với cây là ngăn chặn (tạo, đổi tên, di chuyển, xóa). Để bật chúng, hãy đặt core.check_callback thành true

Bạn cũng có thể sử dụng chức năng để chỉ định loại sửa đổi cho phép. Ví dụ: để chỉ cho phép xóa nút:

$('#tree').jstree({ 
    'core' : { 
     'check_callback' : function (operation, node, node_parent, node_position, more) { 
      // operation can be 'create_node', 'rename_node', 'delete_node', 'move_node' or 'copy_node' 
      // in case of 'rename_node' node_position is filled with the new node name 
      return operation === 'delete_node'; 
     } 
    } 
}); 
0

Điều này phù hợp với tôi rất tốt.

Tôi có hơn 70.000 nút lá & việc này sẽ xóa ngay lập tức.

this.getFilterTree().jstree("destroy"); 
this.getFilterTree().html(""); 


//return tree holder div 
getFilterTree: function() { 
return $('#jstreeHolder'); 
} 

Sau khi xóa, bạn có thể khởi tạo lại cây một lần nữa!

0

Điều này làm việc cho tôi mà không cần sử dụng bất kỳ plugin bên ngoài nào.

$('#treeid').jstree().delete_node([node.id]); 
 
$('#treeid').jstree("refresh");

Các vấn đề liên quan