我试图建立一个使用嵌套的UL和jqueryUI可选的两级多选控件。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/
不错@rocketegg!但我不明白这种行为有什么不同。它是依赖于上下文/层次而不是类吗? – rolfsf