2011-01-05 75 views
1

我有我使用的select_node事件切换节点(扩大)一jstree,因此已删除在树中切换箭头,因为他们长得难看,我已经不再需要他们。JSTree select_node事件和复选框

现在我已经添加的复选框插件树中使用,但发现时,该插件是活动的select_node事件被禁用。

如何在不重新添加难看的切换箭头的情况下使用复选框插件切换节点?我可以在check/uncheck事件中做到这一点,但我不想每次展开节点时都选中/取消选中。

回答

2

最新版本的jstree现在允许通过单击复选框或节点标题来单独检查和选择节点。

+0

这很有趣,你可以点一些裁判的节点问题? – 2011-01-17 19:34:46

+0

http://code.google.com/p/jstree/source/browse/#svn%2Ftrunk - 从那里获取最新版本。 http://code.google.com/p/jstree/issues/detail?id=770&can=1&q=checkbox&colspec=ID%20Type%20Status%20Priority%20Owner%20Summary – Bob 2011-01-18 12:35:57

2

JsTree提供了themes的样式,因此您可以自定义并加载它。 你只需要替换精灵图像,这就是那么多。

+1

那并没有回答我如何切换时复选框处于活动状态,而无需使用箭头(或我可能会替换箭头任何图像) – Bob 2011-01-05 10:31:11

2

假设你有一个例子树为http://www.jstree.com/documentation/checkbox,与 箭头取出。您无法执行复选框选择和分支切换,而无需中断用户界面交互。但是,由于非叶节点不包含模型数据 (它们的复选框仅用作全选/全选功能),因此您可以从中删除 复选框,将其上的点击事件重新定义为“toggle_node”,而 留下其余unthouched。

您可以删除在非叶丽节点的复选框,并让他们点击事件 切换叶子。这将完成您想要的行为,但会删除 非叶节点复选框的“全选/全部取消选择”功能。

只需在示例页面中添加标有“+”的行。

 
    $("#demo1").jstree({ 
     "plugins" : [ "themes", "html_data", "checkbox" ] 
    }); 

+ $("#demo1 li").not(".jstree-leaf").each(function() { 
+  $("a ins.jstree-checkbox", this).first().hide(); 
+  $("a", this).first().click(function(event) { 
+   $("#demo1").jstree("toggle_node", "#"+$(this).parent().attr('id')); 
+   event.stopPropagation(); 
+   event.preventDefault(); 
+  }); 
+ });