Question

单击复选框旁边的节点文本时，我希望选中复选框以切换其选中状态。通常这是用<label for="whatever"></label>完成的。但由于 jsTree 没有使用真正的复选框，这怎么可能呢？

使用$('#mytree').jstree({'plugins':['checkbox']})创建树时，如果我将.delegate("a", "click", function (event, data) { $(event.target).find('.jstree-checkbox').click() })放在最后，则可行。但是有明显的延迟。

因此，我提出了一个问题，点击相应文本时检查框的最佳方法是什么？

Answer 1

我同意您正在使用的点击处理程序技术。我没有看到提到的延迟，但那可能是因为我没有将任何内容发回服务器。

如果复选框纯粹是可视化的，那么也许可以直接修改类。这应该比抛出另一个点击事件更快。

$(event.target).parent("li:first").toggleClass("jstree-unchecked").toggleClass("jstree-checked");

Answer 2

jstree的复选框插件在检查/取消选中节点时似乎执行其他操作。我相信以下内容可以满足您的需求：

$(function(){
    // Initialize jstree
    var $tree = $('.tree-target').jstree({
        "plugins": ["checkbox"]
    });

    // Bind an event to the anchor tag within each tree entry
    // Note: '.on' is used here as this will ensure that any
    // dynamically-generated entries will also use this 'click'
    // event.
    $tree.on('click', 'li.tree > a', function (e) {
        e.stopPropagation();

        // Find the first parent 'tree' element
        var $node = $(this).parents('li.tree').eq(0);

        // Toggle the state of the current 'tree' element
        // Note: The third parameter (in this case 'toggle')
        // can be any value other than true or false
        $tree.jstree('change_state', $node, 'toggle');
        return false;
    });
});

另一方面，我认为您的方法导致重大延迟的原因可能与您将click事件绑定到页面上的每个<a/>标记有关。在尝试查找适当的事件目标时，这会导致巨大的开销。

在jsTree中，使节点文本可单击的最佳方法是什么（用于选中复选框）

2 个答案: