我正在尝试使用jsTree创建两个基于父子关系的树。为此,我使用以下脚本:
$(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');
}
});
检查小提琴:JS fiddle