jsTree 确定树之间的移动并更改复制的节点 ID
jsTree determine move between trees and change copied node ID
我正在尝试使用 jsTree 根据父子关系创建 2 棵树。为此,我使用以下脚本:
$(function () {
loadTree($('#jstree_indexed_container'), document.getElementById('hiddenFieldIndexedData').value);
loadTree($('#jstree_nonindexed_container'), document.getElementById('hiddenFieldNonIndexedData').value);
});
function loadTree(jsTreeContainer, stringData) {
jsTreeContainer.jstree({
"core": {
"animation": 0,
"check_callback": true,
"themes": { "stripes": true },
'data': JSON.parse(stringData)
},
"plugins": ["contextmenu", "dnd", "search", "wholerow", "unique"]
});
jsTreeContainer.on("move_node.jstree", function (e, data) {
notifyServerOfChange(data, false);
});
jsTreeContainer.on("copy_node.jstree", function (e, data) {
notifyServerOfChange(data, true);
});
}
function notifyServerOfChange(data, isCopy) {
var oldParent = getNodeById(data.old_instance, data.old_parent);
var newParent = getNodeById(data.new_instance, data.parent);
alert(sprintf("%s node %s from %s to %s. It now has ID: %s", (isCopy ? "Copied" : "Moved"), (data.original != null ? data.original.id : data.node.id), getNodeTitle(oldParent), getNodeTitle(newParent), data.node.id));
}
function getNodeById(jsTreeContainer, id) {
return jsTreeContainer.element.find("[id='" + id + "']");
}
function getNodeTitle(node) {
return node.find('a').first().text();
}
但是,在两棵树之间移动节点时,总是会调用 "copy_node.jstree" 事件,即使我正在移动节点。如果我在同一棵树中移动节点,我会得到正确的 "move_node.jstree" 事件。
问题 1:有没有办法正确确定节点是否在两棵树之间移动,而不是复制?
问题2:我的节点ID是根据父子关系计算的,所以在复制/移动节点后,我重新计算这个关系,我想用它来替换节点的先前ID。如果我尝试修改notifyServerOfChange方法中的data.node.id,之后就不能再选择节点了
谢谢
如果您通过拖放在树之间移动节点(因为它来自您使用的插件),您可以收听 dnd_stop.vakata
事件并检查 ctrl
键是否按下,如下所示:
$(document).on('dnd_stop.vakata', function (e, data) {
if (data.event.ctrlKey) {
console.log('copy');
} else {
console.log('move');
}
});
检查fiddle:JS Fiddle
我正在尝试使用 jsTree 根据父子关系创建 2 棵树。为此,我使用以下脚本:
$(function () {
loadTree($('#jstree_indexed_container'), document.getElementById('hiddenFieldIndexedData').value);
loadTree($('#jstree_nonindexed_container'), document.getElementById('hiddenFieldNonIndexedData').value);
});
function loadTree(jsTreeContainer, stringData) {
jsTreeContainer.jstree({
"core": {
"animation": 0,
"check_callback": true,
"themes": { "stripes": true },
'data': JSON.parse(stringData)
},
"plugins": ["contextmenu", "dnd", "search", "wholerow", "unique"]
});
jsTreeContainer.on("move_node.jstree", function (e, data) {
notifyServerOfChange(data, false);
});
jsTreeContainer.on("copy_node.jstree", function (e, data) {
notifyServerOfChange(data, true);
});
}
function notifyServerOfChange(data, isCopy) {
var oldParent = getNodeById(data.old_instance, data.old_parent);
var newParent = getNodeById(data.new_instance, data.parent);
alert(sprintf("%s node %s from %s to %s. It now has ID: %s", (isCopy ? "Copied" : "Moved"), (data.original != null ? data.original.id : data.node.id), getNodeTitle(oldParent), getNodeTitle(newParent), data.node.id));
}
function getNodeById(jsTreeContainer, id) {
return jsTreeContainer.element.find("[id='" + id + "']");
}
function getNodeTitle(node) {
return node.find('a').first().text();
}
但是,在两棵树之间移动节点时,总是会调用 "copy_node.jstree" 事件,即使我正在移动节点。如果我在同一棵树中移动节点,我会得到正确的 "move_node.jstree" 事件。
问题 1:有没有办法正确确定节点是否在两棵树之间移动,而不是复制?
问题2:我的节点ID是根据父子关系计算的,所以在复制/移动节点后,我重新计算这个关系,我想用它来替换节点的先前ID。如果我尝试修改notifyServerOfChange方法中的data.node.id,之后就不能再选择节点了
谢谢
如果您通过拖放在树之间移动节点(因为它来自您使用的插件),您可以收听 dnd_stop.vakata
事件并检查 ctrl
键是否按下,如下所示:
$(document).on('dnd_stop.vakata', function (e, data) {
if (data.event.ctrlKey) {
console.log('copy');
} else {
console.log('move');
}
});
检查fiddle:JS Fiddle