jstree阻止将节点移动到子节点 [英] jstree prevent moving node into child nodes

问题描述

所以我一直在使用jstree一段时间，但仍然无法处理它，这几乎是一个令人头疼但很好，我们决定使用它。我使用的数据来自HTML（不涉及JSON）。我遇到的问题是，我不确定如何设置某些节点不是文件夹。每个节点都有一个类，并且基于该类我可以更改它的图标但是如果用户试图在这些节点内发送任何不应该是文件夹的节点，他们就可以。我需要以某种方式阻止这种情况，但到目前为止我测试的每件事都没有用。

So I've been using jstree for a while now, but still can't get a handle on it, it's pretty much a headache but well, it was decided we were gonna work with it. The data I'm using comes from HTML (no JSON involved). The issue I'm having is that I'm not sure how to set that some nodes are not folders. Every node has a class and based on that class I'm able to change it's icon but if the user tries to send any node inside these nodes that are not supposed to be folders they will be able. I need to prevent this, one way or the other but every thing I've test so far has not work at all.

$("jstree").jstree({
            "core": {
                "animation": 0,
                "check_callback": true
            },
            rules: { draggable: "all" },
            "dnd": {
                "drop_finish": function (data) {
                    if (data.o.attr("rel") === "ds") {
                        //update chart with new data here?
                        //using data.o.attr("id")
                    }
                },
                "drag_check": function (data) {
                    if (data.r.attr("rel") != "ds") {
                        return false;
                    }
                    return {
                        after: false,
                        before: false,
                        inside: true
                    };
                }
            },
            "crrm": {
                "move": {
                    "check_move": function (data) {
                        // alert(data.r.attr("id"));
                        if (data.r.attr("id") == "999") {
                            return false;
                        }
                        else {
                            return true;
                        }
                    }
                }
            },

            "plugins": ["dnd", "crrm"]
        });

这就是我用来创建树的方法。此外，我无法禁用拖放功能，因为如果用户需要移动某些项目，但很明显用户不应该将某些内容拖入任何非文件夹的内容。

That's what I'm using to create my tree. Also, I cannot disable drag and drop since some items should be moved if the user wants but obviously the user shouldn't be able to drag something into anything that is not a folder.

预先感谢您的帮助，

问候，

Adrian。

推荐答案

我使用 Types 插件完成了这个 jstree插件。在那里，您可以定义节点类型并设置 valid_children 变量，允许哪些类型为子节点。这意味着用户也不能将限制类型的DnD节点放入节点。

I accomplished this by using the Types plugin jstree plugins. There you can define types of nodes and set the valid_children variable which types are allowed to be children. That means that users also cannot DnD nodes of the restricted type into the node.

在下面的示例中，我有一个类型book，可以有folder和将节点作为子节点。 文件类型根本不能包含任何子项，因为 valid_children 被定义为空。

In my example below I have a type "book" that could have "folder" and "file" nodes as children. The "file" type cannot have any children at all, because valid_childrenis defined empty.

    $('#' + tree_id)
  .jstree({
    'core' : {
      'check_callback' : true, //needed to enable create, remove, rename...  events
      "themes" : {
        "stripes" : true
      }
    },
    "types" : {
      "book" : {
        "valid_children" : ["folder", "file"],
        "icon" : "img/1397762742_book.png"

      },
      "folder" : {
        "valid_children" : ["folder", "file"],
        "icon" : "img/1397751666_folder.png"

      },
      "file" : {
        "valid_children" : [],
        "icon" : "img/1397752227_page.png"
      }
    },
    "contextmenu" : {
      "items" : customMenu
    },
    "plugins" : ["sort", "dnd", "contextmenu", "types"]

  });

添加新节点时可以设置type属性

The type attribute can be set when adding a new node

tree.create_node("#", {
        "text" : "sample node",
        "type" : "file"
      });

或使用set_type函数。 API

or by using the set_type function. API

这篇关于jstree阻止将节点移动到子节点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！