Question

我有2个jstree：第一个用于添加内容（在我的情况下为地区），另一个用于排除这些区域。

问题是我的两个jstree显示了相同的东西：一组这样的领域：my jstrees

但我想要的是，当我选择第一个jstree（用于添加territoires）时，例如monde - ＆gt;欧洲 - ＆gt; france和espagne，第二个jstree（用于排除地区）只显示与我在第一个jstree中检查的相同的复选框（所以在示例中：monde - ＆gt; europe - ＆gt; france和espagne，没有别的）

我不会在我的代码中执行此操作，这是我的代码

<script>

    var to = null;
    $("#search-input-exclureTerr").keyup(function() {

        if(to) { clearTimeout(to); }
            to = setTimeout(function() {
              $('#exclureT').jstree(true).search($('#search-input-exclureTerr').val());
            }, 250) ;
    });

    $('#exclureT').jstree({
        'core' : {
            'data' : {
                "url" : "/apex/TerritoiresExclusJSON?droitId={!droitId}&type={!type}",
                "dataType" : "json" // needed only if you do not supply JSON headers
            }
        },
        "search": {
            "case_insensitive": true,
            "show_only_matches" : true
        },
        "plugins" : [ "wholerow", "checkbox", "unique", "search" ]
    });


    function addTerritoires(){

        var territoires = [];

        var instance = $('#exclureT').jstree(true);
        var tableau = instance.get_selected('full');

        for (i = 0; i < tableau.length; i++) {

                territoires.push(tableau[i].id);
        }

        Visualforce.remoting.Manager.invokeAction(
            '{!$RemoteAction.RegroupementController.addTerritoires}',
            '{!droitId}',
            '{!type}',
            territoires,
            function(result, event) {
                if (event.type === 'exception')
                    console.log(event.message);
        });

    };
</script>

（这在salesforce页面中使用）

Answer 1

是的，这是可能的。您需要将事件处理程序添加到select和deselect事件的第一个树。

检查演示 - Fiddle。

配置可能如下所示：

$("#tree1")
    .on("select_node.jstree", function(e, data) {
        var selectedNodeText = data.node.text;
        $('#exclureT li').each(function() {
            if ($(this).find('a:first').text() === selectedNodeText) {
                // select node in second tree
                $("#exclureT").jstree().select_node(this.id);
                // show node and all parents and children                  
                $(this).parents('li').each(function() {
                    $("#exclureT").jstree().show_node(this.id);
                })

                $(this).find('li').each(function() {
                    $("#exclureT").jstree().show_node(this.id);
                })
                $("#exclureT").jstree().show_node(this.id);
            }
        })
    })
    .on("deselect_node.jstree", function(e, data) {
        var selectedNodeText = data.node.text;
        $('#exclureT li').each(function() {
            if ($(this).find('a:first').text() === selectedNodeText) {
                // deselect node in second tree
                $("#exclureT").jstree().deselect_node(this.id);
                $("#exclureT").jstree().hide_node(this.id);

                // hide parents only if have no visible children
                var hasVisibleNodes = false;
                $("#exclureT").jstree().get_node(this.id).parents.forEach(function(nodeId) {
                    var parentNode = $("#exclureT").jstree().get_node(nodeId);
                    parentNode.children.forEach(function(nodeId) {
                        var childNode = $("#exclureT").jstree().get_node(nodeId);
                        if (!childNode.state.hidden) {
                            hasVisibleNodes = true;
                        }
                    })
                    if (!hasVisibleNodes) {
                        $("#exclureT").jstree().hide_node(nodeId);
                    }
                })

                // hide children
                $(this).find('li').each(function() {
                    $("#exclureT").jstree().hide_node(this.id);
                })
            }
        })

    })
    .jstree({
        "core": {
            "data": data1
        },
        plugins: ['checkbox']
    });

$("#exclureT")
    .on('loaded.jstree', function() {
        // hide all nodes by default
        $("#exclureT").jstree().hide_all();
    })
    .jstree({
        "core": {
            "data": data2
        },
        plugins: ['checkbox']
    });

绑定两个jstree的chexboxes

1 个答案: