我在 FancyTree 插件的帮助下做选择树，我正在尝试实现单击事件，当您单击选择框的标题、他的所有子项并在所有级别上展开时，该事件将起作用。
首先...让我向您展示脚本：
var treeData = [
{title: "item1 with key and tooltip", tooltip: "Look, a tool tip!",
children: [
{title: "Sub-item 3.1",
children: [
{title: "Sub-item 3.1.1", key: "id3.1.1" },
{title: "Sub-item 3.1.2", key: "id3.1.2" }
]
},
{title: "Sub-item 3.2",
children: [
{title: "Sub-item 3.2.1", key: "id3.2.1" },
{title: "Sub-item 3.2.2", key: "id3.2.2" }
]
}
]
},
{title: "item2: selected on init",
children: [
{title: "Sub-item 4.2",
children: [
{title: "Sub-item 4.2.1", key: "id3.1.1" },
{title: "Sub-item 3.2.2", key: "id3.1.2" }
]
},
{title: "Sub-item 3.2",
children: [
{title: "Sub-item 3.2.1", key: "id3.2.1" },
{title: "Sub-item 3.2.2", key: "id3.2.2" }
]
}
] },
];
$(function(){
$(".test").fancytree({
// extensions: ["select"],
checkbox: true,
selectMode: 3,
source: treeData,
select: function(e, data) {
// Get a list of all selected nodes, and convert to a key array:
var selKeys = $.map(data.tree.getSelectedNodes(), function(node){
return node.key;
});
$("#echoSelection3").text(selKeys.join(", "));
// Get a list of all selected TOP nodes
var selRootNodes = data.tree.getSelectedNodes(true);
// ... and convert to a key array:
var selRootKeys = $.map(selRootNodes, function(node){
return node.key;
});
$("#echoSelectionRootKeys3").text(selRootKeys.join(", "));
//$("#echoSelectionRoots3").text(selRootNodes.join(", "));
},
//this is problematic one
click: function(e, data) {
data.node.toggleExpanded();
},
keydown: function(e, data) {
if( e.which === 32 ) {
data.node.toggleSelected();
return false;
}
},
// The following options are only required, if we have more than one tree on one page:
// initId: "treeData",
cookieId: "fancytree-Cb3",
idPrefix: "fancytree-Cb3-"
});
$("#btnToggleExpand").click(function(){
$(".test").fancytree("getRootNode").visit(function(node){
node.toggleExpanded();
});
return false;
});
});
问题
我试图用这部分代码来做到这一点：
click: function(e, data) {
data.node.toggleExpanded();
},
但问题是它也会在 select 上扩展 selectbox 的子项，我不想那样做。如果您展开一个节点，并尝试在左侧箭头的帮助下打开另一个节点，则第二个节点会在单击箭头时展开并隐藏，这不是我想要的..
您可以在这里查看和编辑情况：http: //jsfiddle.net/9vAhZ/
所以你可能会说我遇到了某种“没有出路”的情况，我需要更聪明的人的帮助来告诉我如何解决这个问题，使用哪个事件，这样它就不会与花式树的默认行为发生冲突。
欢迎任何帮助或建议。