jqueryui可選嵌套列表 - 選擇/取消選擇父母應選擇/取消選擇所有它的孩子

Question

我試圖建立一個使用嵌套的UL和jqueryUI可選的兩級多選控件。

目前，我將選擇限制在兒童級別，但我真正想要的是能夠選擇父母LI並將其全部選中爲兒童LI。更進一步，我希望能夠選擇所有Child LI，並選擇其Parent。任何小於選擇的所有Child LI都會導致Parent未被選中。

基本標記：

<ul id="theParentList"> 
    <li>Parent 1 
     <ul> 
      <li>Child 1.1</li> 
      <li>Child 1.2</li> 
     </ul> 
    </li> 
    <li>Parent 2 
     <ul> 
      <li>Child 2.1</li> 
      <li>Child 2.2</li> 
     </ul> 
    </li> 
</ul> 

和當前的javascript：

$('#theParentList').selectable({filter: 'li li'}); 

我將如何完成第一部分：選擇一個家長選擇它的所有的孩子？

謝謝！

UPDATE：
我知道了大多數這個概念現在的工作：
選擇家長選擇它的所有兒童;
取消選擇一個孩子會取消它的父

還有什麼不工作：選擇所有父母的兒童應選擇父

這裏就是我有，在這一點上：

標記：

<ul id="theParentList"> 
    <li class="level-1"> 
     <div>Parent 1</div> 
     <ul class="level-2"> 
      <li><div>Child 1.1</div></li> 
      <li><div>Child 1.2</div></li> 
     </ul> 
    </li> 
    <li class="level-1"><div>Parent 2</div> 
     <ul class="level-2"> 
      <li><div>Child 2.1</div></li> 
      <li><div>Child 2.2</div></li> 
     </ul> 
    </li> 
</ul> 

和JS：

function SelectSelectableElement (selectableContainer, elementsToSelect){ 
     $(elementsToSelect).not(".ui-selected").addClass("ui-selecting"); 
    } 

    function handleSelected(){}; 

    function handleSelection (El){ 
     if($(El).parent().hasClass('level-1')){ 
      var ch = $(El).parent().find('.level-2 .ui-selectee'); 
      SelectSelectableElement('#theParentList', ch); 
     }else{ 
      //this is a level-2 item 
      //if El and all of it's level-2 siblings are selected, then also select their level-1 parent 
     } 
    }; 

    function handleUnselected (El){ 
     if($(El).parent().hasClass('level-1')){ 
      //unselect all of it's children 
      $(El).parent().children().each(function(){ 
       $(this).find('.ui-selectee').removeClass('ui-selected').addClass('ui-unselected'); 
      }); 
     }else{ 
      //this is a level-2 item, so we need to deselect its level-1 parent 
      $(El).parents('li.level-1').find(">:first-child").removeClass('ui-selected'); 
     } 
    }; 

    $('#theParentList').selectable({ 
     filter: 'li div', 
     selecting: function(event, ui){ 
      handleSelection(ui.selecting); 
     }, 
     selected: function(event, ui) { 
      handleSelected(ui.selected); 
     }, 
     unselected: function(event, ui) { 
      handleUnselected(ui.unselected); 
     }   
    }); 

這裏有一個小提琴：http://jsfiddle.net/JUvTD/

Answer 1

發佈的答案我自己的問題，如果任何人需要具有相同

選擇父將選擇所有它的孩子 選擇所有的孩子的幫助會選擇他們的父母 取消選擇父將取消選擇它的所有孩子 取消選擇一個孩子也將取消選擇它的父

這裏的工作小提琴： http://jsfiddle.net/QvqCE/1/

和JavaScript

$('#theParentList').selectable({ 
     filter: 'li div', 
     selecting: function (event, ui) { 
      if ($(ui.selecting).parent().hasClass('level-1')) { 
       //this is a level-1 item, so select all of it's children 
       var ch = $(ui.selecting).parent().find('.level-2 .ui-selectee'); 
       $(ch).not(".ui-selected").addClass("ui-selecting"); 
      } else { 
       //this is a level-2 item, so check to see if all of it's siblings are also selected 
       var sibs = $(ui.selecting).parent().siblings().find('.ui-selectee'); 
       var notSelected = 0; 
       for (var i = 0; i < sibs.length; i++) { 
        if ($(sibs[i]).hasClass('ui-selected') || $(sibs[i]).hasClass('ui-selecting')) { 
         notSelected = notSelected 
        } else { 
         notSelected = notSelected + 1; 
        } 
       } 
       if (notSelected === 0) { //all siblings are selected, so select their level-1 parent as well 
        $(ui.selecting).parent().parent().parent().find('>:first-child').not(".ui-selected").addClass("ui-selecting"); 
       } 
       //otherwise, just select as usual 
      } 
     }, 
     unselected: function (event, ui) { 
      if ($(ui.unselected).parent().hasClass('level-1')) { 
       //unselect all of it's children 
       $(ui.unselected).parent().children().each(function() { 
        $(this).find('.ui-selectee').removeClass('ui-selected').addClass('ui-unselected'); 
       }); 
      } else { 
       //this is a level-2 item, so we need to deselect its level-1 parent 
       $(ui.unselected).parents('li.level-1').find(">:first-child").removeClass('ui-selected'); 
      } 
     } 
    }); 

Answer 2

除了rolfsf的回答，如果你想結合的家長和孩子一起稍有不同的行爲：

1. 如果所有的孩子都還在選擇中，父母仍然被選中。和

2. 如果一個孩子被選中，取消父爲好，

你可以添加這個回調函數到可選部件的初始化：

unselecting: function (event, ui) { 
      if ($(ui.unselecting).parent().hasClass('level-1')) { 
       //if all children still selected, don't deselect this 
       var sibs = $(ui.unselecting).next().find('.ui-selectee'); 
       if (sibs.length > 0) { 
        var notSelected = 0; 
        for (var i = 0; i < sibs.length; i++) { 
         if ($(sibs[i]).hasClass('ui-selected') || $(sibs[i]).hasClass('ui-selecting')) { 
          notSelected = notSelected; 
         } else { 
          notSelected = notSelected + 1; 
         } 
        } 
        if (notSelected === 0) { //all children still selected, so keep their level-1 parent selected as well 
         $(ui.unselecting).addClass("ui-selecting"); 
        } 
       } 

      } else { 
       //if unselecting a child, unselect parent as well 
       $(ui.unselecting).parent().parent().prev().removeClass('ui-selected').removeClass("ui-selecting"); 
      } 

     } 

見的jsfiddle這裏：http://jsfiddle.net/gav9q/