jQuery FancyTree,在点击展开问题
jQuery FancyTree, on click expand issue
我正在 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();
},
但问题是它也在选择上扩展了选择框的子项,我不想那样做。如果你展开一个节点,然后你尝试在左边箭头的帮助下打开另一个节点,第二个节点在单击箭头时会展开并隐藏,这不是我想要的。
您可以在此处查看和编辑情况:http://jsfiddle.net/9vAhZ/
所以你可能会说我陷入了某种"无路可走"的困境,我需要更聪明的人的帮助来告诉我如何解决这个问题,使用哪个事件,这样它就不会与花哨的默认行为发生冲突。
欢迎任何帮助或建议。
检查单击是否在选择按钮上
click: function(event, data) {
var node = data.node,
tt = $.ui.fancytree.getEventTargetType(event.originalEvent);
if( tt === "checbox" ) {
...
}
},
或者在 select
事件中实现这一点,而不是click
.
拼写
if(tt = "checkbox"){
...
}
相关文章:
- 在指令控制器中使用$attrs时出现问题
- 将PHP变量传递给jQuery时遇到问题
- Canvas Html5绘图应用程序,移动画布会导致重大问题
- 参数变量出现ngTable指令问题
- 剑道网格jQuery动画()问题
- 我的jQuery插件参数没有正确启动,遇到了问题
- Phonegap-(安卓/iphone)多个图像的图像库出现问题
- TableExport jquery插件:文件名和扩展名问题
- JavaScript Pub/Sub属性访问问题
- JavaScript异步问题
- 如何解决Yii中的页面刷新问题
- Safari(Mac OS)上的jQuery平滑滚动问题
- jqGrid树网格问题
- 使用正则表达式评估电子邮件地址时出现性能问题
- 如何消除代码中的未定义和其他问题
- JavaScript代码问题:我正在将对象转换为数组
- 三星智能电视应用程序;Brightcove示例应用程序远程控制问题
- 由于iframe导致的问题
- FancyTree JS+Backbone.JS-将数据加载到FancyTree时出现问题
- jQuery FancyTree,在点击展开问题