Переместить параметры между несколькими списками

Question

В настоящее время у нас есть форма со стандартной функцией множественного выбора: «Вот доступные опции, вот выбранные опции, вот некоторые кнопки для перемещения материала назад и вперед». Однако теперь клиент хочет иметь возможность не только выбирать определенные элементы, но и классифицировать их. Например, учитывая список книг, они хотят не только выбрать те, которые им принадлежат, но и те, которые они прочитали, те, которые они хотели бы прочитать, и те, о которых они слышали. (Все примеры вымышлены.) К счастью, выбранный элемент может быть только в одной категории за один раз.

Я могу найти много примеров перемещения элементов между списками, но ни одного примера для перемещения элементов между несколькими списками. Чтобы добавить усложнение, форма должна иметь два набора списков + категории, например, список фильмов, которые должны быть классифицированы в дополнение к вышеупомянутым книгам.

РЕДАКТИРОВАТЬ: Теперь, когда я фактически сел, чтобы попытаться закодировать не-javascripty биты, мне нужно пересмотреть мой вопрос, потому что я понял, что множественные списки выбора не будут работать из "как мне сообщить серверу обо всех эта прекрасная новая информационная "точка зрения. Таким образом, html-код теперь является псевдо-списком, то есть неупорядоченный список (<ul>), отображаемый в поле с полосой прокрутки, и каждый элемент списка (<li>) имеет набор из пяти переключателей (невыбранный / собственный / читаемый) /like/heard).

Моя задача по-прежнему примерно такая же: как взять этот один список и упростить классификацию элементов таким образом, чтобы пользователь мог сразу увидеть, что находится в какой категории. (У псевдо-списка есть некоторые из тех же недостатков, что и у списка с множественным выбором, а именно, трудно сказать, что выбрано, если список достаточно длинный для прокрутки.) Решение сновидения было бы перетаскиванием типа, но в этот момент даже кнопки будут в порядке.

Другая модификация (хорошая) заключается в том, что клиент пересмотрел списки, поэтому самый длинный теперь составляет «всего» 62 элемента (вместо многих сотен, которые они имели раньше). Категории по-прежнему в основном будут содержать ноль, один или два выбранных элемента, возможно, еще пару, если пользователь был слишком усердным.

Что касается операционной системы и прочего, то сайт работает в классическом формате asp (перестаньте хихикать!), Код на стороне сервера - VBScript, и до сих пор мы избегали различных библиотек Javascript, просто избегая использования клиента. скрипты Эта форма для этого клиента в настоящее время является большим исключением. Дайте им дюйм, и они хотят милю ...

О, и я должен добавить: я сосу на Javascript, или действительно на любом языке C-потомка. Фигурные скобки дают мне ульи. Мне бы очень, очень хотелось что-то, что я мог бы просто скопировать и вставить на свою страницу, возможно изменить некоторые имена переменных и никогда больше не смотреть на это. Девушка может мечтать, не так ли? :)

[существующий код удален, потому что он по большей части не имеет значения.]

Answer 1

Забавно, я также только что вчера погуглил "перемещение элементов между несколькими списками" и ваш вопрос всплыл.

Я не прочитал весь ваш пост, поэтому я не уверен, что смогу помочь. Но это решило мою проблему. Я скачал это решение. А затем внесли следующие изменения ...

• Добавьте одно дополнительное поле hiden в html. за (дополнительный) список.
• Изменено, как показано ниже, вы можете сравните, какие изменения я внес ...

// ...

открытый частичный класс ErrorActions: System.Web.UI.Page { private XmlDocument _xmlDocument = new XmlDocument (); общедоступный ListBox FromListBox { получить { вернуть lstFrom; } }

    public ListBox AbortListBox
    {
        get
        {
            return lstToAbort;
        }
    }

    public ListBox ClearingListBox
    {
        get
        {
            return lstToClearing;
        }
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        Page.ClientScript.RegisterClientScriptInclude("listboxjs", "/JavaScripts/listbox.js");

        if (!IsPostBack)
        {
            string movejs = "move('{0}','{1}','{2}')";
            string unselectjs = "unselect('{0}')";
            lstFrom.Attributes["onclick"] = String.Format(unselectjs, lstToAbort.ClientID);
            lstFrom.Attributes["onclick"] = String.Format(unselectjs, lstToClearing.ClientID);
            lstToAbort.Attributes["onclick"] = String.Format(unselectjs, lstFrom.ClientID);
            lstToAbort.Attributes["onclick"] = String.Format(unselectjs, lstToClearing.ClientID);
            lstToClearing.Attributes["onclick"] = String.Format(unselectjs, lstFrom.ClientID);
            lstToClearing.Attributes["onclick"] = String.Format(unselectjs, lstToAbort.ClientID);

            btnToAbort.Attributes["onclick"] = String.Format(movejs, lstFrom.ClientID, lstToAbort.ClientID, hdnDropdownsAbort.ClientID);
            btnFromAbort.Attributes["onclick"] = String.Format(movejs, lstToAbort.ClientID, lstFrom.ClientID, hdnDropdownsAbort.ClientID);

            btnToClearing.Attributes["onclick"] = String.Format(movejs, lstFrom.ClientID, lstToClearing.ClientID, hdnDropdownsClearing.ClientID);
            btnFromClearing.Attributes["onclick"] = String.Format(movejs, lstToClearing.ClientID, lstFrom.ClientID, hdnDropdownsClearing.ClientID);
        }
        else
        {
            //if (!(String.IsNullOrEmpty(hdnDropdowns.Value)))
            //{
            //    PopulateListBoxes();
            //}

            if (!(String.IsNullOrEmpty(hdnDropdownsAbort.Value)))
            {
                PopulateAbortListBox();
            }

            if (!(String.IsNullOrEmpty(hdnDropdownsClearing.Value)))
            {
                PopulateClearingListBox();
            }
        }
    }

    private void PopulateListBox(ListBox listBox)
    {
        listBox.Items.Clear();
        XmlNodeList nodes = _xmlDocument.SelectNodes("listboxes/" + listBox.ClientID + "/option");
        foreach (XmlNode node in nodes)
        {
            listBox.Items.Add(new ListItem(node["key"].InnerText, node["value"].InnerText));
        }
    }

    //private void PopulateListBoxes()
    //{
    //    _xmlDocument.LoadXml(HttpUtility.UrlDecode(hdnDropdownsAbort.Value));
    //    //PopulateListBox(lstFrom);
    //    PopulateListBox(lstToAbort);
    //    PopulateListBox(lstToClearing);
    //}

    private void PopulateAbortListBox()
    {
        _xmlDocument.LoadXml(HttpUtility.UrlDecode(hdnDropdownsAbort.Value));
        PopulateListBox(lstToAbort);
    }

    private void PopulateClearingListBox()
    {
        _xmlDocument.LoadXml(HttpUtility.UrlDecode(hdnDropdownsClearing.Value));
        PopulateListBox(lstToClearing);
    }

    protected void btnDoIt_Click(object sender, EventArgs e)
    {
        MissionErrorCodeDB db = new MissionErrorCodeDB();
        db.DeleteErrorCodeActions(ErrorAction.AbortMission);
        db.DeleteErrorCodeActions(ErrorAction.GoToClearingStation);

        foreach (ListItem item in lstToAbort.Items)
        {
            db.AddErrorCodeAction(Convert.ToInt32(item.Value), ErrorAction.AbortMission);
        }
        foreach (ListItem item in lstToClearing.Items)
        {
            db.AddErrorCodeAction(Convert.ToInt32(item.Value), ErrorAction.GoToClearingStation);
        }
    }

    protected override void OnPreRender(EventArgs e)
    {
        MissionErrorCodeDB db = new MissionErrorCodeDB();
        List<MissionErrorCode> aborts = db.GetAll(ErrorAction.AbortMission);
        List<MissionErrorCode> clearing = db.GetAll(ErrorAction.GoToClearingStation);
        List<MissionErrorCode> all = db.GetAll();

        all.RemoveAll(delegate(MissionErrorCode mec) 
                    {
                        foreach (MissionErrorCode item in aborts)
                        {
                            if( mec.ErrorCode == item.ErrorCode )
                                return true;

                        }
                        return false;
                    });
        all.RemoveAll(delegate(MissionErrorCode mec)
                    {
                        foreach (MissionErrorCode item in clearing)
                        {
                            if (mec.ErrorCode == item.ErrorCode)
                                return true;

                        }
                        return false;
                    });

        populateBoxFromDatabase(AbortListBox, aborts);
        populateBoxFromDatabase(ClearingListBox, clearing);
        populateBoxFromDatabase(FromListBox, all);

        base.OnPreRender(e);
    }

    private void populateBoxFromDatabase(ListBox listBox, List<MissionErrorCode> errorCodes)
    {
        string text;
        int textLength = 46;

        listBox.Items.Clear();
        foreach (MissionErrorCode item in errorCodes)
        {
            if (item.ErrorText.Length < textLength)
            {
                text = item.ErrorCode + "  - " + item.ErrorText;
            }
            else
            {
                text = item.ErrorCode + "  - " + item.ErrorText.Substring(0, textLength - 1) + "...";
            }
            listBox.Items.Add(new ListItem(text, item.ErrorCode.ToString()));
        }
    }

}

// ...

Answer 2

Ну, кажется, никто не хочет делать мою работу за меня, так что вот что мы в итоге сделали. (Это еще не сделано полностью; когда это произойдет, я мог бы опубликовать код только для полноты картины.)

Мы сделали решающий шаг и загрузили JQuery, в частности функции сортируемого интерфейса пользователя JQuery. Как я уже сказал, основным выпадающим списком теперь является псевдо-список, то есть ul с ограниченной высотой и overflow:auto. Каждый элемент имеет пять переключателей рядом с ним, которые скрыты с помощью Javascript. (То есть, если Javascript недоступен, пользователь просто видит список с переключателями.) Когда вы перетаскиваете элементы из основного списка в списки категорий (сгенерированные скриптом), соответствующий переключатель отмечается. Также будет некоторый код, который запускается при загрузке страницы, чтобы переместить уже отмеченные опции из основного списка в соответствующую категорию (т.е. для возможности редактирования).

Answer 3

Чтобы избежать больших кусков Javascript, я предлагаю вам сделать работу с парой, которую Ajax называет

1. Добавьте несколько кнопок рядом с элементом (уже есть, хотите и т. Д.). Каждая кнопка должна вызывать страницу на сервере, которая устанавливает элемент в правильную категорию.
2. При успешном обратном вызове вызовите другую функцию ajax, которая обновляет только затронутый список категорий.

Используйте jQuery, и вы увидите, что звонить довольно просто.

Удачи.