Question

我的作业需要以非常具体的方式完成。我已经完成了所有的后端代码，但似乎无法弄清楚这一部分，它让我发疯了。基本上，UI需要在右侧有一个树视图，在左侧有一个树视图。左侧树视图将填充状态，每个州将有多个子级。右边开始是空的。将有两个按钮。包含和排除。当选择左视图中的子项，然后单击包含它们将移动到右侧树。如果用户决定将其移回，则需要移动到他们在同一父母下面的相同位置。最后但并非最不重要的是，每个孩子只能有一个，所以在将孩子搬到新父母身边时，我们不能有重复。

我可以使用html，css，javascript和jquery的任意组合。

这是我到目前为止所拥有的。我尝试了很多其他的东西，但这只是最新的。

CSS

#menutree li {
       list-style: none;          /* all list item li dots invisible */
         }

       li .menu_label + input[type=checkbox] {
          opacity: 0;             /* checkboxes invisible and use no space */
         }                        /* display: none; is better but fails in ie8 */

        li .menu_label {
          cursor: pointer;        /* cursor changes when you mouse over this class */
     }                         /* could add the many user-select: none; commands here */

      li .menu_label + input[type=checkbox] + ol > li
         {
            display: none;         /* prevents sublists below unchecked labels from displaying */
         }

  li .menu_label + input[type=checkbox]:checked + ol > li
     {
       display: block;         /* display submenu on click */
     }



.selected {
     background-color:#efefef;
}

jquery的

$('#move_left').click(function() {
$('.list1').append($('.list2 .selected').removeClass('selected'));
});

$('#move_right').click(function() {
$('.list2').append($('.list1 .selected').removeClass('selected'));
});

$('body').on('click', 'li', function() {
$(this).toggleClass('selected');
});

HTML

    <body>
    <ol id="menutree">
<li>

    <label class="menu_label" for="c1">Menu Gen14 Am0a1</label>
    <input type="checkbox" id="c1" />                             <!-- input must follow label for safari -->
<ol>
    <li>
    <ul class="list1">
        <li class="page">Page Ap1a1</li>
        <li> Page Ap1a2</li>
    </ul>


</ol>
</ol>
</body>
 <input type='button' value='<<' id='move_left'/>
    <input type='button' value='>>' id='move_right'/>

Answer 1

不考虑儿童排序的愚蠢示例，但应保留您提供的逻辑

Demo

<div class="half">
    <ol id="one">
        <li id="alaska">
            Alaska
            <ul>
                <li data-id="alaska"><input type="checkbox"> Children 1</li>
                <li data-id="alaska"><input type="checkbox"> Children 2</li>
                <li data-id="alaska"><input type="checkbox"> Children 3</li>
            </ul>
        </li>
        <li id="washington">
            Washington
            <ul>
                <li data-id="washington"><input type="checkbox"> Children 1</li>
                <li data-id="washington"><input type="checkbox"> Children 2</li>
                <li data-id="washington"><input type="checkbox"> Children 3</li>
            </ul>
        </li>
        <li id="texas">
            Texas
            <ul>
                <li data-id="texas"><input type="checkbox"> Children 1</li>
                <li data-id="texas"><input type="checkbox"> Children 2</li>
                <li data-id="texas"><input type="checkbox"> Children 3</li>
            </ul>
        </li>
    </ol>
    <button type="button" class="include">Include</button>
</div>
<div class="half">
    <ol id="two"></ol>
    <button type="button" class="exclude">Exclude</button>
</div>

$(function(){
    $('.include').click(function(e){
        var $checks = $("input:checked");
        $.each($checks, function(k,v){
            var tempid = $(this).parent().data('id');
            if( !$('#two').find('[data-id="'+tempid+'"]').length ){
                var element = $(this).parent().detach();
                $('#two').append(element);
            }
        });
    });

    $('.exclude').click(function(e){
        var $checks = $("input:checked");
        $.each($checks, function(k,v){
            var tempid = $(this).parent().data('id');
            var element = $(this).parent().detach();
            $('#one').find('#'+tempid+' ul').append(element);
        });        
    });
});

多个树视图用于数据选择

1 个答案: