在 ASP.NET WebForm 的 DevExpress 控件库中,ASPxComboBox 原生并不支持多选功能。若需要实现多选效果,官方推荐使用 ASPxDropDownEdit 结合 ASPxListBox 来模拟(即 CheckComboBox 方案)。下面分别说明这两种情况下的显示与设置方法。
方案一:ASPxComboBox(单选)
如果你的场景只需单选,直接使用 ASPxComboBox 即可。
显示选中项
控件会自动在编辑框中显示选中项的 Text 属性值。
设置选中项(服务器端)
可以通过以下任一方式设置:
csharp
// 按索引设置
cbxJobType.SelectedIndex = 1;
// 按 Value 设置
cbxJobType.Value = "Value #2";
// 按 Text 设置
cbxJobType.Text = "Text #2";
// 按 ListEditItem 对象设置
cbxJobType.SelectedItem = cbxJobType.Items.FindByValue("Value #2");
设置选中项(客户端)
javascript
comboBox.SetSelectedIndex(1);
comboBox.SetValue('Value #2');
comboBox.SetText('Text #2');
comboBox.SetSelectedItem(comboBox.FindItemByValue('Value #2'));
方案二:ASPxDropDownEdit + ASPxListBox(多选模拟)
这是 DevExpress 官方推荐的实现多选的方式,核心思路是:在 ASPxDropDownEdit 的下拉窗口中放置一个 ASPxListBox,并将其 SelectionMode 设为 CheckColumn(复选框列)。
页面标记示例
aspx
<dx:ASPxDropDownEdit ID="ddeLot" runat="server" ClientInstanceName="checkComboBox"
Width="285px" AnimationType="None">
<DropDownWindowTemplate>
<dx:ASPxListBox ID="listBox1" runat="server" ClientInstanceName="checkListBox"
SelectionMode="CheckColumn" EnableSelectAll="true"
DataSourceID="dsLot" ValueField="Lot" TextField="Lot"
ValueType="System.String" Height="200">
<FilteringSettings ShowSearchUI="true" />
<ClientSideEvents SelectedIndexChanged="updateText" Init="updateText" />
</dx:ASPxListBox>
<dx:ASPxButton ID="btnClose" runat="server" AutoPostBack="False" Text="Close">
<ClientSideEvents Click="function(s, e){ checkComboBox.HideDropDown(); }" />
</dx:ASPxButton>
</DropDownWindowTemplate>
</dx:ASPxDropDownEdit>
显示选中的多项
ASPxDropDownEdit 的 Text 属性会自动存储选中项的 Text 值列表,各项之间以分号分隔。你只需通过客户端脚本监听 ASPxListBox 的 SelectedIndexChanged 事件,将选中项拼接后回写到 ASPxDropDownEdit 的编辑框中即可。
设置选中的多项(服务器端)
ASPxListBox 的 SelectedItems 集合提供了对选中项的访问。在服务器端可以通过遍历该集合来设置或读取选中的项:
csharp
// 假设 listBox1 是 ASPxListBox 的服务器端 ID
foreach (ListEditItem item in listBox1.SelectedItems)
{
// 处理每个选中项
string text = item.Text;
string value = item.Value;
}
// 若要程序化设置选中项,可先清空再添加
listBox1.SelectedItems.Clear();
listBox1.SelectedItems.Add(listBox1.Items.FindByValue("Lot001"));
listBox1.SelectedItems.Add(listBox1.Items.FindByValue("Lot002"));
设置选中的多项(客户端)
javascript
// 获取所有选中项
var selectedItems = checkListBox.GetSelectedItems();
// 或逐个获取
var item = checkListBox.GetSelectedItem(); // 返回单个选中项
// 设置选中(通过 Value)
checkListBox.SelectItemsByValues(['Lot001', 'Lot002']);
注意事项
ASPxListBox 必须设置 ClientInstanceName,否则客户端脚本无法访问。
ASPxDropDownEdit 的 Text 属性中的分号分隔列表是显示多选结果的关键,建议在 SelectedIndexChanged 客户端事件中同步更新该文本。
如果需要回传服务器,可通过 ASPxHiddenField 或回调(Callback)机制将选中的值传递到服务器端。
官方演示页面(CheckComboBox Emulation)提供了完整的可运行示例,可直接参考:https://demos.devexpress.com/ASPxEditorsDemos/ASPxDropDownEdit/CheckComboBox.aspx。
|