2

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

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

因此，我提出一个问题，单击相应文本时选中该框的最佳方法是什么？

4

2 回答 2

0

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

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

$(event.target).parent("li:first").toggleClass("jstree-unchecked").toggleClass("jstree-checked");
于 2012-04-21T02:14:14.423 回答
0

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/>标签有关。当试图找到适当的事件目标时，这将导致大量开销。

于 2012-04-22T18:57:29.660 回答