是否可以将外部数据拖放到jstree中？ [英] Is it possible to drag and drop external data into a jstree?
问题描述
我正在研究一个需要建立分级导航菜单的项目。 jstree 看起来不错。
树会保存到数据库 - 我打算使用CakePHP的树行为（由于现有的代码库，该项目必须在Cake 2.x中运行，而不是在3.x中运行）。
我需要做的一件事是有能力从我的外部数据源添加标签到我的树。
我配置的方式如下：
填充我的jstree的数据来自数据库表（由于Cake的命名约定，称为 navigations ）。它使用上面树行为链接中给出的表结构。
我使用ajax方法将这些数据加载到jstree中：
$。ajax（{
类型：GET，
url：/ ajax_get_tree，
dataType：json ，
成功：函数（json）{
createJSTrees（json）;
}，
错误：函数（xhr，ajaxOptions，thrownError） {
alert（xhr.status）;
alert（thrownError）;
}
}）;
函数createJSTrees（jsonData）{
$（＃tree）。jstree（{$ b $'core'：{
check_callback： true，
'data'：jsonData
}，
plugins：[dnd]
}）。on（'loaded.jstree'，function（）{
$（＃tree）。jstree（'open_all'）;
}）;
}
我想要做的是拖放Tags（通过它平均列表项）从单独的div #tagList 转换为树上的元素。标签数据的格式如下：
< div id =tagList>
< li data-tag =1>英国< / li>
< li data-tag =2>法国< / li>
< li data-tag =3>德国< / li>
< / div>
我知道可以使用jqueryui的 draggable 行为将它们从一个div移动到另一个div（从 #tagList 到＃但是，我不知道如何放下标签，使jstree将它列在适当的节点下。
例如我试过了 - 这只是使用jqueryui，除了引用它运行的div之外，与jstree无关。
$（'＃tagList li'）。draggable（{
cursor：'move'，
helper：'clone'，
connectToSortable：#tree，
}）;
我的问题确实是我想要做甚么可能？我花了很长时间来研究这个问题，并且觉得我没有得到它。
有没有其他的东西可以完成这种类型的任务？我曾看过，但无法找到任何东西。本质上，需求是能够创建一个树（名称，编辑，删除，拖放），然后从<$ $
基于文章我发布了评论，你需要创建一个jsTree会熟悉的对象。
参考：
工作示例：
https://jsfiddle.net/Twisty/dLv7xk3t/ p>
HTML
< div class = UI窗口小部件 >
< div class =ui-widget-header>
标签
< / div>
< div id =tagList>
< ul>
< li data-tag =1id =uk-1>英国< / li>
< li data-tag =2id =france-1>法国< / li>
< li data-tag =3id =germany-1>德国< / 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 ，
父：loc2，
文本：意大利，
图标：fa fa-flag
}，{
id：poland- 1，
父母：loc2，
文本：波兰，
图标：fa fa-flag
}];
函数makeTreeItem（el）{
return $（< a>，{
id：$（el）.attr（id）+_anchor ，
class：jstree-anchor，
href：＃
}）;
$（function（）{
$（'＃tree'）。jstree（{
core：{
check_callback：true，
data：exData
}，
类型：{
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）;
返回$ .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）;
返回$ .vakata.dnd.start（e，{
jstree：true，
obj：makeTreeItem（this），
nodes：[{
id：newId ，
text：$（this）.text（），
icon：fa fa-flag-o
}]
}，item）;
基本上，我们有一个 div 带有图标和正在拖动的项目文本。这将代表我们的助手，将在拖拽时看到。然后，我们使&返回具有jsTree将理解的特定属性和我们的帮助器项目的Event Object。
I'm working on a project which requires a hierarchical navigation menu to be built. jstree looks good for this.
The tree will be saved to a database - I am planning on using CakePHP's Tree Behaviour (the project has to work in Cake 2.x rather than 3.x due to the existing codebase).
One of the things I need to do is have the ability to add "Tags" to my tree from an external data source.
The way I have things configured is as follows:
The data to populate my jstree is coming from a database table (called navigations due to Cake's naming conventions). It uses the table structure given on the Tree Behaviour link above.
I'm loading this data into a jstree with the ajax method:
$.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');
});
}
What I want to do is drag and drop "Tags" (by which I mean list items) from a separate div, #tagList into elements on the tree. The tag data is formatted as follows:
<div id="tagList">
<li data-tag="1">United Kingdom</li>
<li data-tag="2">France</li>
<li data-tag="3">Germany</li>
</div>
I know it's possible to use things like jqueryui's draggable behaviour to move them from one div to another (from #tagList into #tree).
However, I don't know how I can "drop" the tag such that jstree lists it under the appropriate node.
For example I've tried this - which is just using jqueryui and has nothing to do with jstree other than referencing the div it's running on:
$('#tagList li').draggable({
cursor: 'move',
helper: 'clone',
connectToSortable: "#tree",
});
My question really is whether what I'm trying to do is even possible? I've spent a long time looking into this and feel I'm getting nowhere with it.
Are there any other things out there that can do this type of task? I've had a look but was unable to find anything. Essentially the requirements are the ability to create a tree (name, edit, delete, drag/drop) but then to also bring Tags (<li> elements from the #tagList) into it, and save it.
Based on the articles I posted in the comments, you need to create an object that jsTree will be familiar with.
Reference:
- How to drag a node from a div and drop it on to a JStree? (jstree version: 3.0.4)
- Dragging a foreign object into JSTree problem
Working Example:
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);
}
});
});
The function makeTreeItem() is simply a wrapping function to make the item dragged in more like what jsTree already has.
The first thing to do is update the core preference to enable the creation of new nodes etc:
check_callback: true
The next key here is in the draggable start callback. This is where we create a Drag n Drop element that jsTree is already ready to handle, making use of the dnd plugin for jsTree.
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);
}
Basically, we have a div with an icon and the text of the item being dragged. This will represent our helper that will be seen while dragging. We then make and return an Event Object with specific attributes that jsTree will understand and our helper item.
这篇关于是否可以将外部数据拖放到jstree中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
