JSTree select_node 事件和复选框

发布于 2024-10-10 18:13:06 字数 230 浏览 7 评论 0原文

我有一个 jstree,其中我使用 select_node 事件来切换节点(展开),因此删除了树中的切换箭头,因为它们看起来很难看,而且我不需要它们。

现在我已经添加了要在树中使用的复选框插件,但发现当插件处于活动状态时 select_node 事件被禁用。

如何在复选框插件处于活动状态的情况下切换节点,而不重新添加丑陋的切换箭头?我可以在检查/取消选中事件中执行此操作,但我不想每次展开节点时都检查/取消选中。

I have a jstree in which I used the select_node event to toggle nodes(expand), and have therefore removed the toggle arrows in the tree since they look ugly and I've no need for them.

Now I've added the checkbox plugin to use within the tree, but have found the select_node event is disabled when the plugin is active.

How would I toggle my nodes with the checkbox plugin active, without re-adding the ugly toggle arrows? I could do it in the check/uncheck event, but I don't want to check/uncheck everytime I expand a node.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

望喜 2024-10-17 18:13:06

JsTree 提供样式主题,以便您可以定义自己的主题并加载它。
您只需要替换精灵图像即可。

JsTree offers style themes so you can define your own and load it.
You simply need to replace the sprite image and that's pretty much that.

谁的新欢旧爱 2024-10-17 18:13:06

假设您有 http://www.jstree.com/documentation/checkbox 中的示例树, 和
箭头已移除。您无法在不中断 ui 交互的情况下在单击事件上执行复选框选择和分支切换。但是,由于非叶节点不携带模型数据
(它们的复选框仅用作全选/取消全选功能),您可以删除
复选框,将其上的点击事件重新定义为“toggle_node”,而
其余部分保持不变。

您可以删除非叶 li 节点上的复选框并对其进行单击事件
切换叶子。这将实现您想要的行为,但会删除
非叶节点复选框的“全选/取消全选”功能。

只需在示例页面上添加下面标有“+”的行即可。

    $("#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();
+       });
+    });

Say you have the example tree as in http://www.jstree.com/documentation/checkbox, with
arrows removed. You cant execute both a checkbox selection and branch toggling, on a click event, without disrupting ui interaction. But, as non-leaf nodes don't carry model data
(their checkboxes only serve as select-all/deselect-all function), you could remove the
checkboxes from them, redefining the click events over them as "toggle_node", while
leaving the rest unthouched.

You can remove the checkboxes on non-leaf li nodes and make a click event on them
toggle the leaves. That would accomplish your desired behaviour, but will remove
the "select all/deselect all" functionality of non-leaf nodes checkboxes.

Just add the lines below marked with "+", on the sample page.

    $("#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();
+       });
+    });
水染的天色ゝ 2024-10-17 18:13:06

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

The latest version of jstree now allows for both checking and selecting node separately by either clicking on the check box or the node title.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文