Question

我有一个左侧（lhs）列表框和右侧（rhs）列表框我希望能够在lhs列表框中选择项目并将其中一个或全部添加到rhs列表框中。然后我也想从rhs中删除一个或全部将它们返回到lhs。我怎么做到这一点？到目前为止，我只能管理lhs框的索引值到右边，但由于某种原因它不会采用实际的项目名称。这是执行此操作的代码：

    private void SelectOne_Click(object sender, RoutedEventArgs e)
    {
        listBoxFin.ItemsSource = listBoxStart.SelectedIndex.ToString();          
    }

Answer 1

嗨，这不是最终的解决方案，但这对你有帮助。

工作DEMO。

<强> HTML

<div class="wrapper">
<div class="selectbox alignleft">
    <ul id="selection" class="cf">
        <li>One <span class="desc">Description</span></li>            
        <li>...</li>
        <li>...</li>
    </ul>
</div>
<div class="movebutton alignleft">
    <input class="button mover" value=">>" type="button" />
</div>
<div id="moving" class="movebox alignleft">
    <ul class="cf">
        <li>One <span class="desc">Description</span>

        </li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
    </ul>
</div>
<div class="alignleft">
    <input class="button" id="move-up" type="button" value="Up" />
    <input class="button" id="move-down" type="button" value="Down" />
</div>

<强> CSS

.cf:before, .cf:after {
    content:"";
    display: table;
}
.cf:after {
    clear: both;
}
/* For IE 6/7 (trigger hasLayout) */
 .cf {
    zoom: 1;
}
/* general purpose classes */
 .nodisplay {
    display: none;
}
.nodisplay_strict {
    display: none !important;
}
.alignleft {
    float: left;
}
.alignright {
    float: right;
}
.button {
    cursor: pointer;
    background: #eee;
    border: 0;
    min-width: 116px;
    padding: 5px 0;
    margin-bottom: 2px;
    display: block;
}
body {
    padding: 25px;
    font-family:Verdana, Geneva, sans-serif;
    font-size: 12px;
}
li {
    display: block;
    cursor: pointer;
    padding: 5px;
    font-weight: bold;
    position: relative;
    border-bottom: 1px solid #fff;
}
li.active {
    background: #000;
    color: #fff;
}
.wrapper {
    width: 960px;
    margin: 0 auto;
}
.selectbox {
    border: 1px solid;
    width: 150px;
    min-height: 199px;
    max-height: 199px;
    overflow-y: auto;
    position: relative;
}
.movebox {
    border: 1px solid;
    width: 200px;
    min-height: 199px;
    max-height: 199px;
    overflow-y: auto;
    position:relative;
    margin-left: 10px;
    margin-right: 10px;
}
span.desc {
    display: block;
    padding-top: 5px;
    color: #7a7a7a;
    font-weight: normal;
    font-style: italic;
}
li.active span.desc {
    color: #ccc;
}
.movebox .delete, .movebox .unmoved {
    display: inline-block;
    position: absolute;
    right: 5px;
    top: 5px;
    z-index: 999;
    background:url(icon-close.png) no-repeat 0 0 red;
    width: 10px;
    height: 10px;
    text-indent: -99999px;
}
.movebutton {
    margin-left: 10px;
}
.movebutton .mover {
    background: url(icon_right.png) no-repeat 0 0 #eee;
    height: 48px;
    margin: 65px auto 0;
    min-width: 0;
    text-align: center;
    width: 48px;
}
.moved {
    background: #d9fffe;
}
#move-up {
    background: url("icon_up.png") no-repeat 0 0 #eee;
    height: 48px;
    margin: 0px auto 0;
    min-width: 0;
    text-align: center;
    width: 48px;
}
#move-down {
    background: url("icon_down.png") no-repeat 0 0 #eee;
    height: 48px;
    margin: 15px auto 0;
    min-width: 0;
    text-align: center;
    width: 48px;
}

<强>的JavaScript

// JavaScript Document
$(document).ready(function (e) {
    $('.selectbox li, .movebox li').click(function () {
        $(this).addClass('active').siblings().removeClass('active');
    });


    $('.mover').click(function () {
        $('.selectbox li.active').addClass('moved').prependTo('.movebox ul').prepend('<span class="delete alignright" onclick="moveToLHS(this);">DELETE</span>');
    });

    $('.mover').click(function () {
        $('.selectbox li.active').addClass('moved');
        $('.movebox li.active').removeClass('active');
        setTimeout(function () {
            $('.movebox li').removeClass('moved');
        }, 1500);
    });

    $('.movebox ul li').each(function () {
        $(this).prepend('<span class="unmoved alignright" onclick="deleteFromRHS(this);">DELETE</span>');
    });

    $("#move-up").click(moveUp);
    $("#move-down").click(moveDown);
    $("#reset-list").click(resetList);

});


//DELETE
function moveToLHS(t) {
    $(t).parent().remove().prependTo('.selectbox ul');
    $('.selectbox li').click(function () {
        $(this).addClass('active').siblings().removeClass('active');
    });

    //deleting span
    $('.selectbox ul li .delete').each(function () {
        $(this).remove();
    });


}

function deleteFromRHS(d) {
    $(d).parent().remove();
}


// LI Up Down
function moveUp() {
    $("#moving li.active").each(function () {
        var listItem = $(this);
        var listItemPosition = $("#moving li").index(listItem) + 1;

        if (listItemPosition == 1) return false;

        listItem.insertBefore(listItem.prev());
    });
}

function moveDown() {
    var itemsCount = $("#moving li").length;

    $($("#moving li.active").get().reverse()).each(function () {
        var listItem = $(this);
        var listItemPosition = $("#moving li").index(listItem) + 1;

        if (listItemPosition == itemsCount) return false;

        listItem.insertAfter(listItem.next());
    });
}

function resetList() {
    $("#moving").html(originalItems);
}

工作DEMO

Answer 2

H.B.他指出，有很多方法可以实现。 WPF最广受好评的架构可能是MVVM，因此我将尝试概述一个解决方案，以了解我对该架构的理解。

ViewModel将公开一些不同的属性：LHSList，LHSSelectedItem，RHSList，RHSSelectedItem（这里是集合ObservableCollections）以及一些命令 - MoveLHSSelectedToRHS，MoveLHSToRHS，MoveRHSSelectedToRHS，MoveRHSToLHS。

列表是View中ListViews的简单绑定，ListViews的SelectedItem也相应地绑定。这些命令只对列表和所选项目进行操作。例如，MoveLHSSelectedToRHS将是一个具有以下操作的命令：

public void OnMoveLHSSelectedToRHS（） { 如果（LHSSelectedItem == NULL）返回; RHSList.Add（LHSSelectedItem）; LHSList.Remove（LHSSelectedItem）; LHSSelectedItem = NULL; }

不幸的是，您现在看起来正在使用代码。如果您不熟悉MVVM，我建议您查看Josh Smith的WPF文章 - 它们是一个很好的起点！

左手侧和右手侧列表框添加一个，添加全部，删除一个，删除中间的所有按钮

2 个答案: