javascript - jsTree 在多棵树上拖放

Question

我需要有 n 个 jsTress，用户可以在其上从一棵公共(public)树中删除项目。最初这些树可以是空的，因此当用户将项目放到其中一棵树上时，我需要向服务器发送 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 属性。这就是那棵树。