0

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

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

2 回答 2

1

嗨，这不是最终的解决方案，但这会对您有很大帮助。

工作演示。

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

工作演示

于 2013-03-19T07:27:17.013 回答
0

正如 HB 所指出的，有很多方法可以实现这一点。WPF 最广受好评的架构可能是 MVVM，因此我将尝试根据我对该架构的理解来概述一个解决方案。

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

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

公共无效 OnMoveLHSSelectedToRHS() { if(LHSSelectedItem==null) 返回；RHSList.Add(LHSSelectedItem); LHSList.Remove(LHSSelectedItem); LHSSelectedItem=空；}

不幸的是，您目前似乎正在使用后面的代码。如果您不熟悉 MVVM，我建议您查看 Josh Smith 的 WPF 文章——它们是一个很好的起点！

于 2011-04-13T05:43:05.523 回答