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 属性。那就是树。

jsTree拖放多棵树

jsTree drag and drop on multiple trees

javascript

jquery

jstree

twitter-bootstrap