在 fancytree 插件上选择/取消选择具有相同 ID 的所有节点答案

【问题标题】：Select/deselect all node with same ID on fancytree plugin在 fancytree 插件上选择/取消选择具有相同 ID 的所有节点
【发布时间】：2016-01-24 18:09:20
【问题描述】：

我正在尝试创建公司结构。一名员工可以在两个部门工作，但这是同一员工，ID 相同id = employee1。

检查是否选择或取消选择项目，这是有效的。

我对具有相同 ID 的节点有问题。

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

提前谢谢你。

<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>

【问题讨论】：

不要重复 ID。它们必须是唯一的。 w3.org/TR/2011/WD-html5-20110525/elements.html#the-id-attribute

标签： javascript jquery fancytree

【解决方案1】：

id 在同一个文档中应该是唯一的，使用通用类emplyee1 代替：

<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>

或者使用唯一的 ID，就像您在 fancytree documentation 中看到的那样，键（节点 ID）应该是唯一的：

节点 id（在树中必须是唯一的）

更新：

尝试使用以下技巧：

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.

希望这会有所帮助。

【讨论】：

这没关系，我改了。我仍然有一个问题如何选择/取消选择具有相同类（值）的所有节点。
就是这样。非常感谢！

【解决方案2】：

重复的 ID 在 HTML 中无效，违反规范并导致问题。

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

分配类而不是 id。

【讨论】：

这没关系，我改了。我仍然有一个问题如何选择/取消选择具有相同类（值）的所有节点。

【解决方案3】：

如前面的答案所述，Fancytree 中不允许重复的节点键（HTML 中也不允许重复的 ID）。

由于一棵树中有多个对象实例是一种常见的场景，因此存在“克隆”的概念。

基本上，您包括clones 扩展并将员工ID 传递为refKey 而不是key，例如

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

您还需要启用扩展：

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

之后，您可以像这样访问相关实例：

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

详情请看这里：https://github.com/mar10/fancytree/wiki/ExtClones 和例子http://wwwendt.de/tech/fancytree/demo/sample-ext-clones.html

【讨论】：