ListBox使用说明

最新推荐文章于 2025-08-02 19:51:29 发布

原创最新推荐文章于 2025-08-02 19:51:29 发布 · 3.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#function #server #table #library #asp #class

本文介绍了一个使用ListBox组件进行数据选择和转移的操作示例。通过不同的按钮实现选择项的添加、删除及全选功能，并展示了如何利用JavaScript进行客户端事件处理。

SelectionMode属性

CheckColumn：带复选框的列

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

Single：选择单列

以上图实现功能为例：

js：

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>