Question

我正在使用 jstree ，我希望在点击按钮后按ID删除特定节点。

这是我的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>

这是我的按钮事件（我有几个按钮，因此是数组）：

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

我缺少什么想法？

更新

我已经纠正了错字但它仍然不起作用。这是完整的代码，可能是其他地方的错误？

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

Answer 1

根据jsTree documentation，您可以像这样删除

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

没有$()

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

您需要将“crrm”添加到插件

Answer 2

任何答案都适合我。我更喜欢使用它：

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

希望它有所帮助。

Answer 3

jsTree的manual（版本3.0.0）说：

请记住，默认情况下，对树的所有修改都是阻止（创建，重命名，移动，删除）。要启用它们设置 core.check_callback为true

您还可以使用函数指定允许的修改类型。例如，仅允许删除节点：

$('#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';
        }
    }
});

Answer 4

这对我很有用。

我有超过70,000个叶子节点＆amp;这瞬间就消失了。

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


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

删除后，您可以再次实例化树！

Answer 5

这对我有用，不使用任何外部插件。

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

Answer 6

在jsTree配置的核心内添加check_callback = true;（例如core.check_callback = true;），然后$('#tree').jstree(true).delete_node(*yourNodeId*);

小提琴：https://fiddle.jshell.net/sqiudward/kf2eym0k/

Answer 7

当前“ crrm”插件无效。

根据jsTree documentation，您可以删除节点。

例如；

var node = $("#tree").jstree(true).get_node("111");//111 is node id
$("#tree").jstree("delete_node", node);

Answer 8

我认为有一个错字：尝试：

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

单击按钮时，在jstree中按ID删除节点

8 个答案: