選擇/取消選擇fancytree插件上具有相同ID的所有節點

Question

我正在嘗試創建公司結構。 一個雇員可以在兩個部門中工作，但這是具有相同ID id = employee1同一id = employee1 。

檢查是否已選擇或取消選擇項目，並且該項目正在運行。

我對具有相同ID的節點有疑問。

當選擇ID為employee1的節點時，我要選擇/取消選擇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>

Answer 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文檔中所見 ，密鑰（節點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');
  }
}

工作示例 。

希望這可以幫助。

Answer 2

重復的ID在HTML中無效，違反規范並導致問題。

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

分配類而不是ID。

Answer 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