Списки слева и справа с добавлением одного, добавлением всех, удалением одного, удалением всех кнопок посередине - PullRequest
Новая
       16

Списки слева и справа с добавлением одного, добавлением всех, удалением одного, удалением всех кнопок посередине

0 голосов
/ 12 апреля 2011

У меня есть список слева (lhs) и список справа (rhs). Я хочу иметь возможность выбирать элементы в списке lhs и добавлять один или все из них в список rhs. Тогда я также хотел бы удалить один или все из правых, возвращая их лхам. Как бы я это сделал? До сих пор мне удавалось получить только значение индекса поля lhs справа, но по какой-то причине оно не будет принимать фактическое имя элемента. Это код, который делает это: 

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

Ответы [ 2 ]

1 голос
/ 19 марта 2013

Привет, это не окончательное решение, но оно вам очень поможет.

Рабочая ДЕМО .

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

Рабочая ДЕМО

0 голосов
/ 13 апреля 2011

как H.B. отметил, что есть много способов, которыми это может быть достигнуто. Вероятно, наиболее широко известная архитектура для WPF - это MVVM, поэтому я постараюсь наметить решение в отношении моего понимания этой архитектуры.

ViewModel предоставляет несколько различных свойств: LHSList, LHSSelectedItem, RHSList, RHSSelectedItem (здесь коллекции являются ObservableCollections), а также несколько команд - MoveLHSSelectedToRHS, MoveLHSToRHS, MoveRHSSelectedToRHS, MoveRHST.

Списки являются простыми привязками к ListViews в представлении, и SelectedItem этих ListViews также связаны соответствующим образом. Команды просто работают со списками и выбранными элементами. Например, MoveLHSSelectedToRHS будет командой с действием, похожим на:

public void OnMoveLHSSelectedToRHS () { если (LHSSelectedItem == NULL) вернуть; RHSList.Add (LHSSelectedItem); LHSList.Remove (LHSSelectedItem); LHSSelectedItem = NULL; }

К сожалению, похоже, что вы используете код в данный момент. Если вы не знакомы с MVVM, я бы посоветовал заглянуть в статьи Джоша Смита о WPF - это отличное место для начала!

...