jsTree在多棵树上拖放

Question

我需要有n个jsTress，用户可以在其中从一棵普通树中删除项目。 最初，这些树可以为空，因此，当用户在其中一棵树上放置项目时，我需要向服务器发送AJAX请求，以将其保存在数据库中。

为了实现n棵树，我有一个循环来创建<div>来容纳它们，如下所示：

var DayToday = moment();
for (i = 0; i < 5; i++) {
  dayHTML += '<div class="col-md-2 column sortable"> \
                <div class="portlet portlet-sortable green-turquoise box" id="day_' + i + '_portlet"> \
                  <div class="portlet-title"> \
                    <div class="caption">' + DayToday.format('MMMM Do YYYY') + '</div> \
                    <div class="tools"> \
                      <a href="javascript:;" class="collapse"> </a> \
                      <a href="javascript:;" class="reload"> </a> \
                      <a href="javascript:;" class="remove"> </a> \
                    </div> \
                    </div> \
                    <div class="portlet-body"> \
                      <div id="day_' + i + '_tree" class="tree-demo" style="min-height:50px;"> \
                      <li></li> \
                    </div> \
                  </div> \
                </div> \
                <div class="portlet portlet-sortable-empty"> </div> \
            </div>';
  DayToday = DayToday.add(1, 'days');
}

$("#sortable_portlets").append(dayHTML);

然后循环添加一个JS树：

DayToday = moment();
var currTree = [];
for (i = 0; i < 5; i++) {
  currTree[i] = $(dayTrees[i]).jstree({
      "core": {
        "id": DayToday.format('YYYY-MM-DD'),
        "animation": 150,
        'check_callback': function(operation, node, node_parent, node_position, more) {
          console.log(node_parent);
          return true; //allow all other operations
        },
        "themes": {
          "stripes": false
        },
        "data": {
          "url": "http://localhost:8888/bizsked/public/taskassignment/json?asg_date=" + DayToday.format('YYYY-MM-DD'),
          "dataType": "json"
        }
      },
      "rules": {
        droppable: ["tree-drop"],
        multiple: true,
        deletable: "all",
        draggable: "all"
      },
      "dnd": {
        open_timeout: 100
      },
      "plugins": ["dnd"]

    })
    .on("move_node.jstree", function(e, data) {
      console.log(data);
    })
    .on("copy_node.jstree", function(e, data) {
      console.log(data);
    });
  DayToday = DayToday.add(1, 'days');
}

因此，实际上，您可以从每棵树拖放到另一棵树。 但是，我似乎无法理解的是，我如何获取已掉落的树的ID或某些ID。 好的，因此我可以轻松地找到要拖动的项目，如果将其拖放到子节点（不是主节点）上，那么我可以找到该ID，但是如果将其拖放到空树或主节点上（ ＃），我找不到ID，只能找到“＃”。 也许我缺少一些基本的东西，但是我所需要知道的是（a）被丢弃的项目的ID（容易）和（b）被丢弃的树的ID ..（不是那么容易）。

关于我如何做到这一点的任何建议将不胜感激，因为我已经尝试了两天了！

Answer 1

尝试在move_node事件中浏览data对象。 您应该在那里有一个instance属性。 那是树。