JsTree 删除不起作用

Question

我只是想从我的 jstree 中删除一个节点，但到目前为止还没有成功。 HTML:

<!doctype html>
<html>
    <head>
        <title> </title>

         <!-- scripts -->
        <script src="../js/jquery-2.1.4.js"></script>
        <script src="../js_tree/dist/jstree.js"></script>
        <script src="../js/tree.js"></script>

        <!-- Styles -->
        <link rel='stylesheet' href="../css/main.css">
        <link rel="stylesheet" href="../css/bootstrap.min.css">
        <link rel="stylesheet" href="../css/font-awesome.min.css">
        <link rel="stylesheet" href="../js_tree/dist/themes/default/style.min.css">
        <!-- <link rel="icon" href="images/favicon.ico"> -->

        <!-- Metadata -->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="author" content="">
    </head>

    <body>
            <button onclick="deletor();">delete</button>
            <div id="tree">

            <!--  LOADS JSON DATA-->

            </div>
    </body>

</html>

javascript：（我尝试了两种方法：在上下文菜单中和通过功能删除器）。我没有收到任何错误，它只是什么也没做。 $(文档).ready(函数(){ adjustModal();

  $('#tree').jstree({
    'core' : {
      'data' : [
        { "text" : "Root node", "children" : [
            { "text" : "Child node 1" },
            { "text" : "Child node 2" }
        ]}
      ]
    },
    "search" : {
      "case_insensitive" : true
    },
    "plugins": ["contextmenu", "dnd", "search", "wholerow"],
    "contextmenu" : {
      "items": customMenu
    }
  });

  $('#tree').on("changed.jstree", function (e, data) {
    console.log(data.node)
    console.log(data.node.text);
  });

});

function deletor(){
  // alert("hey");
  var ref = $('#tree').jstree(true),
    sel = ref.get_selected();
  if(!sel.length) { return false; }
  ref.delete_node(sel);
}

function customMenu(node) {
    // The default set of all items
    var tree = $('#tree');
    var items = {
        addItem: {
          label: "Add Item",
          action: function () {
            console.log("rename");
          }
        },
        renameItem: { // The "rename" menu item
            label: "Rename",
            action: function () {
              console.log("Rename");
            }
        },
        deleteItem: { // The "delete" menu item
            label: "Delete",
            action: function () {
              var ref = $('#tree').jstree(true),
                                sel = ref.get_selected();
                            if(!sel.length) { return false; }
                            ref.delete_node(sel);
            }
        }
    };

    if ($(node).hasClass("folder")) {
        // Delete the "delete" menu item
        delete items.deleteItem;
    }

    return items;
}

你们能告诉我我做错了什么吗？

Answer 1

好的，我明白了。在您的树核心部分中，您必须允许用户修改树。将 js 更改为：check_callback 部分

$('#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' ? true : false;
      },
      'data' : [
        { "text" : "Root node", "children" : [
            { "text" : "Child node 1" },
            { "text" : "Child node 2" }
        ]}
      ]
    },
    "search" : {
      "case_insensitive" : true
    },
    "plugins": ["contextmenu", "dnd", "search", "wholerow"],
    "contextmenu" : {
      "items": customMenu
    }
  });

或者如果您想允许对树执行所有操作：

'check_callback': true,

JsTree 删除不起作用

JsTree delete won't work

jstree