Question

我正在开发一个需要构建分层导航菜单的项目。 jstree看起来很不错。

树将保存到数据库中 - 我计划使用CakePHP的Tree Behaviour（由于现有的代码库，项目必须在Cake 2.x而不是3.x中工作）。

我需要做的一件事就是能够从外部数据源向我的树添加“标签”。

我配置的方式如下：

填充我的jstree的数据来自数据库表（由于Cake的命名约定，称为navigations）。它使用上面的Tree Behavior链接中给出的表结构。

我正在使用ajax方法将此数据加载到jstree中：

$.ajax({
    type : "GET",
    url : "/ajax_get_tree",
    dataType : "json",    

    success : function(json) {
        createJSTrees(json);
    },    

    error : function(xhr, ajaxOptions, thrownError) {
        alert(xhr.status);
        alert(thrownError);
    }
});


function createJSTrees(jsonData) {
    $("#tree").jstree({
        'core': {
            "check_callback" : true,
            'data' : jsonData
        },
        "plugins" : ["dnd"]
    }).on('loaded.jstree', function() {
        $("#tree").jstree('open_all');
    });
}

我想要做的是将“标签”（我的意思是列表项目）从一个单独的div #tagList拖放到树上的元素中。标签数据的格式如下：

<div id="tagList">
    <li data-tag="1">United Kingdom</li>
    <li data-tag="2">France</li>
    <li data-tag="3">Germany</li>
</div>

我知道可以使用jqueryui的draggable行为之类的内容将它们从一个div转移到另一个div（从#tagList转移到#tree）。

但是，我不知道如何“删除”标记，以便jstree在适当的节点下列出它。

例如我试过这个 - 这只是使用jqueryui并且与jstree无关，除了引用它正在运行的div：

$('#tagList li').draggable({
        cursor: 'move',
        helper: 'clone',
        connectToSortable: "#tree",
    });

我的问题是，我想要做的事情是否可能？我花了很长时间研究这个，觉得我无处可去。

还有其他可以执行此类任务的事情吗？我看了看但却找不到任何东西。基本上，要求是能够创建树（名称，编辑，删除，拖放），然后还将标记（<li>中的#tagList元素）带入其中，并保存它。 / p>

Answer 1

根据我在评论中发布的文章，你需要创建一个jsTree熟悉的对象。

参考：

工作示例：

https://jsfiddle.net/Twisty/dLv7xk3t/

<强> HTML

<div class="ui-widget">
  <div class="ui-widget-header">
    Tags
  </div>
  <div id="tagList">
    <ul>
      <li data-tag="1" id="uk-1">United Kingdom</li>
      <li data-tag="2" id="france-1">France</li>
      <li data-tag="3" id="germany-1">Germany</li>
    </ul>
  </div>
</div>
<div class="ui-widget">
  <div class="ui-widget-header">
    Tree
  </div>
  <div id="tree">
  </div>
</div>

<强>的JavaScript

var exData = [{
  id: "loc1",
  parent: "#",
  text: "Location 1"
}, {
  id: "loc2",
  parent: "#",
  text: "Location 2"
}, {
  id: "italy-1",
  parent: "loc2",
  text: "Italy",
  icon: "fa fa-flag"
}, {
  id: "poland-1",
  parent: "loc2",
  text: "Poland",
  icon: "fa fa-flag"
}];

function makeTreeItem(el) {
  return $("<a>", {
    id: $(el).attr("id") + "_anchor",
    class: "jstree-anchor",
    href: "#"
  });
}

$(function() {
  $('#tree').jstree({
    core: {
      check_callback: true,
      data: exData
    },
    types: {
      root: {
        icon: "fa fa-globe-o"
      }
    },
    plugins: ["dnd", "types"]
  });
  $('#tagList li').draggable({
    cursor: 'move',
    helper: 'clone',
    start: function(e, ui) {
      var item = $("<div>", {
        id: "jstree-dnd",
        class: "jstree-default"
      });
      $("<i>", {
        class: "jstree-icon jstree-er"
      }).appendTo(item);
      item.append($(this).text());
      var idRoot = $(this).attr("id").slice(0, -2);
      var newId = idRoot + "-" + ($("#tree [id|='" + idRoot + "'][class*='jstree-node']").length + 1);
      return $.vakata.dnd.start(e, {
        jstree: true,
        obj: makeTreeItem(this),
        nodes: [{
          id: newId,
          text: $(this).text(),
          icon: "fa fa-flag-o"
        }]
      }, item);
    }
  });
});

函数makeTreeItem()只是一个包装函数，可以拖动项目，就像jsTree已有的那样。

要做的第一件事是更新核心首选项以启用新节点的创建等：

check_callback: true

这里的下一个关键是可拖动的start回调。这是我们创建一个jsTree已经准备好处理的Drag n Drop元素的地方，利用jsTree的dnd插件。

  start: function(e, ui) {
      var item = $("<div>", {
        id: "jstree-dnd",
        class: "jstree-default"
      });
      $("<i>", {
        class: "jstree-icon jstree-er"
      }).appendTo(item);
      item.append($(this).text());
      var idRoot = $(this).attr("id").slice(0, -2);
      var newId = idRoot + "-" + ($("#tree [id|='" + idRoot + "'][class*='jstree-node']").length + 1);
      return $.vakata.dnd.start(e, {
        jstree: true,
        obj: makeTreeItem(this),
        nodes: [{
          id: newId,
          text: $(this).text(),
          icon: "fa fa-flag-o"
        }]
      }, item);
    }

基本上，我们有一个带有图标的div和正在拖动项目的文本。这将代表我们在拖动时看到的助手。然后，我们使用return一个具有jsTree将理解的特定属性的事件对象和我们的帮助项。

是否可以将外部数据拖放到jstree中？

1 个答案: