在多個列表之間移動選項

Question

我們目前有一個標準的多選功能「這裏有可用的選項，這裏是選定的選項，這裏有一些按鈕來回移動東西」。但是，客戶現在希望能夠不僅僅選擇某些項目，而且還要對它們進行分類。例如，給定一個書目清單，他們不僅要選擇他們自己擁有的書籍，還要選擇他們已經閱讀的書籍，他們想要閱讀的書籍，以及他們所聽到的書籍。 （所有示例都是虛構的）。幸運的是，所選項目一次只能在一個類別中。

我可以找到很多在列表框之間移動項目的例子，但是在多個列表框之間移動項目並不是一個例子。爲了增加複雜性，表格需要有兩組列表+類別，例如，除了上述書籍之外還需要分類的電影列表。

編輯：現在已經坐下來嘗試編碼非javascripty位，我需要修改我的問題，因爲我意識到多個選擇列表不會真的從「我如何通知服務器所有這些可愛的新信息「的立場。因此，html代碼現在是一個僞列表框，即在帶滾動條的框中顯示的一個無序列表（<ul>），並且每個列表項（<li>）都有一組五個單選按鈕（未選中/自己/讀/喜歡/聽過）。

我的任務仍然大致相同：如何使用這一個列表並使其易於對項目進行分類，以便用戶可以一目瞭然地分辨哪些項目屬於哪個類別。 （僞列表框與多選列表框有一些相同的缺點，即如果列表的長度足夠滾動，很難判斷選擇了什麼）。夢想解決方案將是一個拖放式類型的東西，但在這一點上甚至按鈕都可以。

另一個修改（一個很好的）是客戶修改了列表，所以最長的「現在」只有62個項目（而不是他們之前的幾百個）。類別仍然大部分包含零個，一個或兩個選定的項目，如果用戶過於熱情，可能還會多一些。至於操作系統和東西，該網站是在經典的asp（退出snickering！），服務器端代碼是VBScript，到目前爲止，我們已經通過簡單的方法避免了各種Javascript庫幾乎從不使用客戶端腳本。這一個客戶端的這種形式目前是一個很大的例外。給他們一英寸，他們想要一英里...

哦，我必須補充：我吸吮JavaScript，或真的在任何C後裔的語言。大括號給我蕁麻疹。我真的很喜歡我可以複製&粘貼到我的頁面，也許調整一些變量名稱，而不再看它。一個女孩可以夢想，不是嗎？ :)

[現有的代碼刪除，因爲它在很大程度上是無關緊要的。]

Answer 1

好了，似乎沒有人想要做我的工作對我來說，所以這裏是我們落得這樣做。 （它還沒有完全完成，當它時，我可能只是爲了完整性而發佈代碼）。

我們已經採取了一些措施並下載了JQuery，特別是JQuery UI「可排序」功能。就像我說的，主要的下拉列表現在是一個僞列表框，即一個ul有限制高度和overflow:auto。每個項目旁邊都有五個單選按鈕，它們都是用Javascript隱藏的。 （也就是說，如果Javascript不可用，用戶只會看到帶有單選按鈕的列表。）當您將主列表中的項目拖動到（腳本生成的）類別列表中時，會標記相應的單選按鈕。在頁面加載時也會有一些代碼將已經標記的選項從主列表移動到適當的類別（即用於編輯功能）。在SO

Answer 2

爲了避免使用Javascript大塊大塊的，我建議你做的工作有一對夫婦一個Ajax調用

1. 添加幾個按鈕旁邊該項目（已擁有它，想要它等）。每個按鈕都應調用服務器中的一個頁面，以將該項目設置爲正確的類別。
2. 在成功回調中，調用其他僅刷新受影響類別列表的ajax函數。

使用jQuery，你會看到使得調用非常簡單。

祝你好運。

Answer 3

滑稽，我也只是昨天一派，你的問題彈出「多重列表框之間移動項目」。

我沒有讀你的整個帖子所以林不知道如果我能幫助出。 但這解決了我的問題。 我下載了this解決方案。 然後做了以下修改......

• 添加一個額外的hidenfield在HTML 每（額外）列表框。
• 修改如下圖所示，你可以 比較我做了什麼樣的變化？

// ...

公共部分類ErrorActions：System.Web.UI.Page { 私人的XmlDocument _xmlDocument = new XmlDocument（）; 公共列表框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())); 
     } 
    } 

}

// ...