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

Question

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

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

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

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

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

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

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

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

Answer 1

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

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

Answer 2

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

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

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

Удачи.

Answer 3

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

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

• Добавьте один дополнительный hidenfield в HTML в (за дополнительную плату) ListBox.
• Modified, как показано ниже, вы можете сравнить, какие изменения я сделал ...

// ...

общественного ErrorActions частичных классов: System.Web.UI.Page { частного XMLDOCUMENT _xmlDocument = новый 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())); 
     } 
    } 

}

// ...