[英]populate ListBox with groups in code-behind to ListBox using jquery chosen
I am writing a web application using web forms (ASP.NET / C#). 我正在使用Web表单(ASP.NET / C#)编写Web应用程序。 I have a ListBox Control that is using the jquery plugin, chosen.
我有一个正在使用jquery插件的ListBox控件被选中。 I populate the list box in the code-behind using a database call.
我使用数据库调用在代码背后填充列表框。 It is working fine so I wanted to add groups to the ListBox.
它工作正常,所以我想将组添加到ListBox。 The data is displayed in a list, not by the groups I set.
数据显示在列表中,而不是我设置的组中。
I beleive the problem is with the chosen query plugin. 我相信问题在于所选的查询插件。 I need to maybe set the option of this plugin somehow but I have not seen any documentation on how to do it.
我可能需要以某种方式设置此插件的选项,但是我还没有看到任何有关如何执行此操作的文档。 This is my javascript / HTML code:
这是我的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>
This is my C# code to populate the 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);
}
The data is correct and the ListBox shows the data but not in groups. 数据正确,并且列表框显示数据,但不是分组显示。 How do I get the chosen jquery plugin to show the data in groups?
如何获取所选的jquery插件以分组显示数据?
Thanks. 谢谢。
UPDATE 更新
I have learned that the ListBox and DropDownList do not support optgroup. 我了解到ListBox和DropDownList不支持optgroup。 So I wanted to try this solution but am having trouble understanding the javascript.
因此,我想尝试此解决方案,但无法理解javascript。 In the code behind, attributes are added to each ListItem:
在后面的代码中,属性被添加到每个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");
}
This is the javascript 这是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'>");
});
I don't understand where the "select.listsmall' represents. I tried using my ListBox ID but I get an exception. Can anyone explain this part of the javascript? Thanks. 我不明白“ select.listsmall”在哪里表示。我尝试使用ListBox ID,但出现异常。任何人都可以解释javascript的这一部分吗?
UPDATE THis is how I am using the code-behind and javascript from above: 更新这个是我如何使用从上面的隐藏代码和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);
}
This is the ListBox HTML: 这是ListBox HTML:
<asp:ListBox ID="lstBoxTo" runat="server" SelectionMode="Multiple"
data-placeholder="Choose recipient(s)…" multiple="true" class="chosen-select">
</asp:ListBox>
This is the javascript: 这是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'>");
});
Is there something that I am missing or wrong? 有什么我想念或做错的吗?
UPDATE Well, if I remove the '@' from the attribute=value, it does not throw an exception but it also does not group the list. 更新好吧,如果我从attribute = value中删除“ @”,它不会引发异常,但也不会对列表进行分组。
I figured out my problem...the chosen-jquery configuration function has to come after the 'wrapAll' functions. 我想出了我的问题... selected-jquery配置功能必须放在'wrapAll'函数之后。 This is the change:
这是更改:
$(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.