我想在jstree中为节点实现移动功能。这是需要实施的举措还是拖放? Alos,有一个工作代码将容器绑定到事件和事件代码将是很好的。
答案 0 :(得分:18)
如果您不需要强制执行任何移动规则(不允许将某些节点移动到其他节点等),您只需要使用dnd插件 如果需要强制执行移动规则,可以添加crrm插件。
有关此示例,请参阅dnd pluign文档的Reorder only demo。文档很差,因此您必须使用浏览器上的开发人员工具来查看check_move
回调参数的属性。对于文档中的示例,m.o
表示拖动的节点,m.r
表示目标节点。
您可能还需要在移动节点时收到通知,因此在初始化树时绑定到move_node.jstree
事件:
$("#treeHost").jstree({
...
}).bind("move_node.jstree", function (e, data) {
// data.rslt.o is a list of objects that were moved
// Inspect data using your fav dev tools to see what the properties are
});
})
答案 1 :(得分:11)
$("#demo1").jstree({
....
.bind("move_node.jstree", function (e, data) {
/*
requires crrm plugin
.o - the node being moved
.r - the reference node in the move
.ot - the origin tree instance
.rt - the reference tree instance
.p - the position to move to (may be a string - "last", "first", etc)
.cp - the calculated position to move to (always a number)
.np - the new parent
.oc - the original node (if there was a copy)
.cy - boolen indicating if the move was a copy
.cr - same as np, but if a root node is created this is -1
.op - the former parent
.or - the node that was previously in the position of the moved node */
var nodeType = $(data.rslt.o).attr("rel");
var parentType = $(data.rslt.np).attr("rel");
if (nodeType && parentType) {
// TODO!
}
})
});
答案 2 :(得分:1)
以上方法不适用于最新版本的jstree(截至今天为3.3.7)。
Bojin's answer的第一行仍然成立。要实施规则,可以使用core.check_callback
或可能使用types
插件; crrm
插件已不存在。绑定到move_node.jstree
,以在完成移动(放下)时执行一些操作。默认情况下,dnd插件除了移动节点外,还允许重新排序(在两个节点之间拖放)和复制(Ctrl +拖动)。下面的代码段显示了如何禁用这些其他行为。
$('#treeElement').jstree({
'core': {
'check_callback': CheckOperation,
...
},
'plugins': ['dnd']
})
.bind("move_node.jstree", function(e, data) {
//data.node was dragged and dropped on data.parent
});
function CheckOperation(operation, node, parent, position, more) {
if (operation == "move_node") {
if (more && more.dnd && more.pos !== "i") { // disallow re-ordering
return false;
}
... more rules if needed ...
else {
return true;
}
}
else if (operation == "copy_node") {
return false;
}
return true;
}