[英]How to bind ReactiveList to WPF ListBox or ListView using code-behind?
[英]populate ListBox with groups in code-behind to ListBox using jquery chosen
我正在使用Web表單(ASP.NET / C#)編寫Web應用程序。 我有一個正在使用jquery插件的ListBox控件被選中。 我使用數據庫調用在代碼背后填充列表框。 它工作正常,所以我想將組添加到ListBox。 數據顯示在列表中,而不是我設置的組中。
我相信問題在於所選的查詢插件。 我可能需要以某種方式設置此插件的選項,但是我還沒有看到任何有關如何執行此操作的文檔。 這是我的javascript / HTML代碼:
<script type="text/javascript">
$(document).ready(function () {
$(".chosen-select").chosen({
search_contains: true,
no_results_text: "Sorry, no match!",
allow_single_deselect: true
});
$('.chosen-container').css('width', '600px');
});
</script>
<asp:ListBox ID="lstBoxTo" runat="server" SelectionMode="Multiple"
data-placeholder="Choose recipient(s)…" multiple="true" class="chosen-select">
</asp:ListBox>
這是我的C#代碼,用於填充ListBox:
foreach (DataRow row in m_dtRecipients.Rows)
{
ListItem recItem = new ListItem(row["Name"].ToString(), row["ID"].ToString());
if (row["UserID"].ToString().Equals("Global"))
{
recItem.Attributes[OPT_GROUP_ATTRIBUTE] = GLOBAL_GROUP;
}
else if (row["UserID"].ToString().Equals(m_strUserID))
{
recItem.Attributes[OPT_GROUP_ATTRIBUTE] = PERSONAL_GROUP;
}
else
{
recItem.Attributes[OPT_GROUP_ATTRIBUTE] = INDIVIDUAL_GROUP;
}
lstBoxTo.Items.Add(recItem);
}
數據正確,並且列表框顯示數據,但不是分組顯示。 如何獲取所選的jquery插件以分組顯示數據?
謝謝。
更新
我了解到ListBox和DropDownList不支持optgroup。 因此,我想嘗試此解決方案,但無法理解javascript。 在后面的代碼中,屬性被添加到每個ListItem中:
foreach (ListItem item in ((DropDownList)sender).Items)
{
if (System.Int32.Parse(item.Value) < 5)
item.Attributes.Add("classification", "LessThanFive");
else
item.Attributes.Add("classification", "GreaterThanFive");
}
這是javascript
<script>
$(document).ready(function() {
//Create groups for dropdown list
$("select.listsmall option[@classification='LessThanFive']").wrapAll("<optgroup label='Less than five'>");
$("select.listsmall option[@classification='GreaterThanFive']").wrapAll("<optgroup label='Greater than five'>");
});
我不明白“ select.listsmall”在哪里表示。我嘗試使用ListBox ID,但出現異常。任何人都可以解釋javascript的這一部分嗎?
更新這個是我如何使用從上面的隱藏代碼和javascript:
private const string OPT_GROUP_ATTRIBUTE = "grouping";
private const string GLOBAL_GROUP = "Global Groups";
private const string PERSONAL_GROUP = "Personal Groups";
private const string INDIVIDUAL_GROUP = "Individuals";
foreach (DataRow row in m_dtRecipients.Rows)
{
ListItem recItem = new ListItem(row["Name"].ToString(), row["ID"].ToString());
if (row["UserID"].ToString().Equals("Global"))
{
recItem.Attributes.Add(OPT_GROUP_ATTRIBUTE, GLOBAL_GROUP);
}
else if (row["UserID"].ToString().Equals(m_strUserID))
{
recItem.Attributes.Add(OPT_GROUP_ATTRIBUTE, PERSONAL_GROUP);
}
else
{
recItem.Attributes.Add(OPT_GROUP_ATTRIBUTE, INDIVIDUAL_GROUP);
}
lstBoxTo.Items.Add(recItem);
}
這是ListBox HTML:
<asp:ListBox ID="lstBoxTo" runat="server" SelectionMode="Multiple"
data-placeholder="Choose recipient(s)…" multiple="true" class="chosen-select">
</asp:ListBox>
這是javascript:
$(document).ready(function () {
$(".chosen-select").chosen({
search_contains: true,
no_results_text: "Sorry, no match!",
allow_single_deselect: true,
group: true
});
$('.chosen-container').css('width', '600px');
//Create groups for dropdown list
$("select.chosen-select option[@grouping='Global Groups']").wrapAll("<optgroup label='Global Groups'>");
$("select.chosen-select option[@grouping='Personal Groups']").wrapAll("<optgroup label='Personal Groups'>");
$("select.chosen-select option[@grouping='Individuals']").wrapAll("<optgroup label='Individuals'>");
});
有什么我想念或做錯的嗎?
更新好吧,如果我從attribute = value中刪除“ @”,它不會引發異常,但也不會對列表進行分組。
我想出了我的問題... selected-jquery配置功能必須放在'wrapAll'函數之后。 這是更改:
$(document).ready(function () {
//Create groups for dropdown list
$(".chosen-select option[grouping='GlobalGroups']").wrapAll("<optgroup label='Global Groups'>");
$(".chosen-select option[grouping='PersonalGroups']").wrapAll("<optgroup label='Personal Groups'>");
$(".chosen-select option[grouping='Individuals']").wrapAll("<optgroup label='Individuals'>");
//Configure the ListBox using the 'chosen' jquery plugin
$(".chosen-select").chosen({
search_contains: true,
no_results_text: "Sorry, no match!",
allow_single_deselect: true
});
$('.chosen-container').css('width', '600px');
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.