ListBox使用说明

SelectionMode属性

CheckColumn：带复选框的列

Multiple：选择多列，可以用SHIFT等组合键

Single：选择单列

 

以上图实现功能为例：

js：

function AddSelectedItems() { MoveSelectedItems(lbAvailable, lbChoosen); UpdateButtonState(); } function AddAllItems() { MoveAllItems(lbAvailable, lbChoosen); UpdateButtonState(); } function RemoveSelectedItems() { MoveSelectedItems(lbChoosen, lbAvailable); UpdateButtonState(); } function RemoveAllItems() { MoveAllItems(lbChoosen, lbAvailable); UpdateButtonState(); } function MoveSelectedItems(srcListBox, dstListBox) { srcListBox.BeginUpdate(); dstListBox.BeginUpdate(); var items = srcListBox.GetSelectedItems(); for(var i = items.length - 1; i >= 0; i = i - 1) { dstListBox.AddItem(items[i].text, items[i].value); srcListBox.RemoveItem(items[i].index); } srcListBox.EndUpdate(); dstListBox.EndUpdate(); } function MoveAllItems(srcListBox, dstListBox) { srcListBox.BeginUpdate(); var count = srcListBox.GetItemCount(); for(var i = 0; i < count; i++) { var item = srcListBox.GetItem(i); dstListBox.AddItem(item.text, item.value); } srcListBox.EndUpdate(); srcListBox.ClearItems(); } function UpdateButtonState() { btnMoveAllItemsToRight.SetEnabled(lbAvailable.GetItemCount() > 0); btnMoveAllItemsToLeft.SetEnabled(lbChoosen.GetItemCount() > 0); btnMoveSelectedItemsToRight.SetEnabled(lbAvailable.GetSelectedItems().length > 0); btnMoveSelectedItemsToLeft.SetEnabled(lbChoosen.GetSelectedItems().length > 0); }

 

aspx

<asp:Content ID="Content2" ContentPlaceHolderID="phContent" Runat="Server"> <dxge:ASPxGlobalEvents ID="GlobalEvents" runat="server"> <ClientSideEvents ControlsInitialized="function(s, e) { UpdateButtonState(); }" /> </dxge:ASPxGlobalEvents> <table cellpadding="0"><tr> <td valign="top"> <dxe:ASPxLabel ID="lblAvailable" runat="server" CssClass="DemoLabel NoLeftIndent CaptionLabelIndent" Text="Available:"></dxe:ASPxLabel> <dxe:ASPxListBox ID="lbAvailable" runat="server" ClientInstanceName="lbAvailable" Width="230px" Height="240px" SelectionMode="CheckColumn"> Items <Items> <dxe:ListEditItem Text="ASPxEditors Library" Value="ASPxEditors" /> <dxe:ListEditItem Text="ASPxGauges Suite" Value="ASPxGauges" /> <dxe:ListEditItem Text="ASPxGridView and Editors Suite" Value="ASPxGridView and Editors" /> <dxe:ListEditItem Text="ASPxHTMLEditor Suite" Value="ASPxHTMLEditor" /> <dxe:ListEditItem Text="ASPxperience Suite" Value="ASPxperience" /> <dxe:ListEditItem Text="ASPxPivotGrid Suite" Value="ASPxPivotGrid" /> <dxe:ListEditItem Text="ASPxScheduler Suite" Value="ASPxScheduler" /> <dxe:ListEditItem Text="ASPxSpellChecker" Value="ASPxSpellChecker" /> <dxe:ListEditItem Text="ASPxTreeList Suite" Value="ASPxTreeList" /> <dxe:ListEditItem Text="XtraReports Suite" Value="XtraReports" /> <dxe:ListEditItem Text="XtraCharts Suite" Value="XtraCharts" /> </Items> <ClientSideEvents SelectedIndexChanged="function(s, e) { UpdateButtonState(); }"></ClientSideEvents> </dxe:ASPxListBox> </td><td style="padding: 0px 5px;" mce_style="padding: 0px 5px;"> Buttons <table cellpadding="0"><tr><td> <dxe:ASPxButton ID="btnMoveSelectedItemsToRight" runat="server" ClientInstanceName="btnMoveSelectedItemsToRight" AutoPostBack="False" Text="Add >" Width="120px" Height="23px" ClientEnabled="False" ToolTip="Add selected items"> <ClientSideEvents Click="function(s, e) { AddSelectedItems(); }" /> </dxe:ASPxButton> </td></tr><tr><td> <dxe:ASPxButton ID="btnMoveAllItemsToRight" runat="server" ClientInstanceName="btnMoveAllItemsToRight" AutoPostBack="False" Text="Add All >>" Width="120px" Height="23px" ToolTip="Add all items"> <ClientSideEvents Click="function(s, e) { AddAllItems(); }" /> </dxe:ASPxButton> </td></tr><tr><td> <div class="Spacer" style="height: 10px;"></div> </td></tr><tr><td> <dxe:ASPxButton ID="btnMoveSelectedItemsToLeft" runat="server" ClientInstanceName="btnMoveSelectedItemsToLeft" AutoPostBack="False" Text="< Remove" Width="120px" Height="23px" ClientEnabled="False" ToolTip="Remove selected items"> <ClientSideEvents Click="function(s, e) { RemoveSelectedItems(); }" /> </dxe:ASPxButton> </td></tr><tr><td> <dxe:ASPxButton ID="btnMoveAllItemsToLeft" runat="server" ClientInstanceName="btnMoveAllItemsToLeft" AutoPostBack="False" Text="<< Remove All" Width="120px" Height="23px" ClientEnabled="False" ToolTip="Remove all items"> <ClientSideEvents Click="function(s, e) { RemoveAllItems(); }" /> </dxe:ASPxButton> </td></tr></table> </td><td valign="top"> <dxe:ASPxLabel ID="lblChoosen" runat="server" CssClass="DemoLabel NoLeftIndent CaptionLabelIndent" Text="Choosen:"></dxe:ASPxLabel> <dxe:ASPxListBox ID="lbChoosen" runat="server" ClientInstanceName="lbChoosen" Width="230px" Height="240px" SelectionMode="CheckColumn"> <ClientSideEvents SelectedIndexChanged="function(s, e) { UpdateButtonState(); }"></ClientSideEvents> </dxe:ASPxListBox> </td> </tr></table> </asp:Content>