4

ネストされた UL と jqueryUI 選択可能を使用して、2 レベルの複数選択コントロールを構築しようとしています。

現在、選択を子レベルに制限していますが、私が本当に望んでいるのは、親 LI を選択し、そのすべての子 LI も選択できるようにすることです。さらに、すべての子 LI を選択し、その親を選択できるようにしたいと考えています。すべての子 LI が選択されていない場合、親は選択されません。

基本的なマークアップ:

<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'});

最初の部分をどのように達成しますか: 親を選択すると、そのすべての子が選択されますか?

ありがとう！

更新:
この概念のほとんどが機能するようになりまし
た。親を選択すると、そのすべての子が選択されます。
子の選択を解除すると、その親の選択が解除されます

まだ機能していないこと: 親の子をすべて選択すると、親を選択する必要があります

この時点で私が持っているものは次のとおりです。

マークアップ:

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

4

2 に答える 2

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');
            }
        }
    });
于 2013-01-31T18:57:44.500 に答える
0

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/

于 2013-10-29T18:20:16.513 に答える