Select/deselect all node with same ID on fancytree plugin

Question

I am trying to create company structure. One employee can been employeed in two sector, but this is same employee with same ID id = employee1.

Checking if is item selected or deselected and this is working.

I having problem with nodes with same id.

When selected node with id employee1, I want select/deselect all node where is id employee1.

Thank you in advance.

<div id="companyEmplyee">
    <ul>
        <li class="folder" id="company1">Company
            <ul>
                <li class="folder" id="sector1">Sector 1
                    <ul>
                        <li class="emplyee1">Emplyee 1</li>  
                        <li id="emplyee2">Emplyee 2</li>        
                    </ul>
                </li>
                <li class="folder" id="sector2">Sector 2
                    <ul>
                        <li class="emplyee1">Emplyee 1</li>  
                        <li id="emplyee35">Emplyee 35</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>                                                   
</div>

<script type="text/javascript">
    $(function () {
        var tree = $("#companyEmplyee").fancytree({
            checkbox: true,
            selectMode: 2,
            keyPathSeparator: "/",

            clones: {
                highlightClones: true
            },
            select: function (event, data) {
                var s = data.tree.getNodeByKey(data.node.key);
                var s3 = s.key;
                var s2 = $.map(data.tree.getSelectedNodes(), function (node) {//                                                                        
                    return node.key;
                });

                if ($.inArray(s3, s2) == -1) {//                                                                      
                    $("tr#" + s3).addClass("deleted");
                    //DESELECTED
                    $('table#tblID tr#' + s.key).remove();
                    alert(s.key + ' DESELECT');

                }

                else {
                    //SELECTED
                    alert(s.key + ' SELECT');
                }
            }
        });
    });
</script>

Don't repeat ids. They must be unique. https://www.w3.org/TR/2011/WD-html5-20110525/elements.html#the-id-attribute — Tobías, Jan 22 '16 at 11:25

Zakaria Acharki · Accepted Answer · 2016-01-22T12:24:36.173

id should be unique in same document, use general class emplyee1 instead :

<div id="companyEmplyee">
    <ul>
        <li class="folder" id="company1">Company
            <ul>
                <li class="folder" id="sector1">Sector 1
                    <ul>
                        <li class="emplyee1">Emplyee 1</li>  
                        <li id="emplyee2">Emplyee 2</li>        
                    </ul>
                </li>
                <li class="folder" id="sector2">Sector 2
                    <ul>
                        <li class="emplyee1">Emplyee 1</li>  
                        <li id="emplyee35">Emplyee 35</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>                                                   
</div>

Or use unique ids, like you see in fancytree documentation the key (Node id) should be unique :

Node id (must be unique inside the tree)

Update :

Try to use the following hack :

select: function (event, data) {
    if(data.node.extraClasses!=''){
      if( $(data.node.li).find('.fancytree-node').hasClass('fancytree-selected') )
            $('.'+data.node.extraClasses).addClass('fancytree-selected');
      else
            $('.'+data.node.extraClasses).removeClass('fancytree-selected');
  }
}

Working example.

hope this helps.

This is OK and I change it. I still have a problem how select/deselect all node with same class (value). — BCM, Jan 22 '16 at 11:38

score 1 · Answer 2 · answered Jan 22 '16 at 11:34

1

Duplicated Id are invalid in HTML, violates the spec and cause problems.

https://www.w3.org/TR/2011/WD-html5-20110525/elements.html#the-id-attribute

Assign classes instead of ids.

answered Jan 22 '16 at 11:34

Tobías

6,142
4
36
62

This is OK and I change it. I still have a problem how select/deselect all node with same class (value). – BCM Jan 22 '16 at 11:41

mar10 · Answer 3 · 2016-01-24T10:09:20.900

As noted in the previous answers, duplicate node keys are not allowed in Fancytree (and duplicate IDs are not allowed in HTML as well).

Since it is a common scenario to have multiple object instances inside one tree, there is a concept of 'clones'.

Basically you include the clones extension and pass the employee ID as refKey instead of key, e.g.

<li data-refKey="emplyee1">Emplyee 1</li>

You also need to enable the extension:

$("#tree").fancytree({
    extensions: ["clones"],
    checkbox: true,
    selectMode: 2,
    ...

After that, you can access related instances like so:

select: function(event, data) {
    var nodes = data.node.getCloneList();
    ...
},

See here for details: https://github.com/mar10/fancytree/wiki/ExtClones and example http://wwwendt.de/tech/fancytree/demo/sample-ext-clones.html

Select/deselect all node with same ID on fancytree plugin

3 Answers3