用于数据选择的多个树视图

Question

我有一项作业需要以非常具体的方式完成。我已经完成了所有后端代码，但似乎无法弄清楚这部分，这让我发疯。本质上 UI 需要有 2 个树视图，一个在右边，一个在左边。左侧树视图将填充状态，每个状态将有多个 children。右边将是空的开始。会有两个按钮。包括，排除。当从左视图中选择 children，然后单击 include 时，它们将移动到右树。如果用户决定将它们移回原处，则他们需要移至相同位置 parent。最后但同样重要的是，每个 child 只能有一个，因此在将 children 移动到新的 parents 时我们不能有重复项。

我可以使用 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

没有考虑 children 排序的愚蠢示例，但应保留您提供的逻辑

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

用于数据选择的多个树视图

multiple treeviews for data selection

javascript

html

css

treeview

html-lists