使用代码隐藏或 jquery 解决方案的带有组的 Asp.net webform DropdownList [重复]

Question

我想在asp.net webform中对DropDownList中的数据进行分组

从数据库表中下拉拉取数据，下面是表中的示例数据

ID      Name                CatID   
1       Project One         1           
2       Project Two         1         
3       Project Three       2           
4       Project Four        2           
5       General             3           
6       Cat 1               1
7       Cat 2               2
8       Cat 3               3

我尝试了几种从 Code behind direct 执行此操作的方法，但没有按预期工作。

我还尝试使用以下 example 实现相同的 jquery，但它具有静态条件值，因此这也不起作用

下面是我现在的代码

public void getDonationForDDGrouping()
{
    SqlConnection con = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["SQLConnectionString"].ToString());
    if (con.State == ConnectionState.Closed)
    {
        con.Open();
    }
    SqlCommand cmd = new SqlCommand("select ID, Name, CatID from Project ", con);
    cmd.ExecuteNonQuery();
    SqlDataAdapter adp = new SqlDataAdapter(cmd);
    DataSet ds = new DataSet();
    adp.Fill(ds);
    con.Close();

    ListItem newItem;
    DataTable dt = new DataTable();
    dt = ds.Tables[0];


    foreach (DataRow drow in dt.Rows)
    {
        newItem = new ListItem(drow["Name"].ToString(), drow["ID"].ToString());
        newItem.Attributes["OptionGroup"] = drow["ParentID"].ToString();
        ddlOptionGroup.Items.Add(newItem);
    }
}

如何使用或不使用 jQuery 对它们进行分组。从后面的代码做所有事情会很好

期望的输出

Cat 1
--Item 1
--item 2
Cat 2
--
General
--Project Two
General
--Project One
--Project Four
--Project Three
Project One

Answer 1

在服务器端修改如下代码，

foreach (DataRow drow in dt.Rows)
    {
        newItem = new ListItem(drow["Name"].ToString(), drow["ID"].ToString());
        newItem.Attributes["data-category"] = drow["ParentID"].ToString();//Instead of ID, Pass Category Name.
        ddlOptionGroup.Items.Add(newItem);
    }

在客户端使用 Jquery，

   var groups = {};
$("select option[data-category]").each(function () {
     groups[$(this).attr("data-category")] = true;
});

$.each(groups, function (c) {
     $("select option[data-category='"+c+"']").wrapAll('<optgroup label="' + $("select option[data-category='"+c+"']").html() + '">');
});

Answer 2

这里是示例代码

public class DropDownListAdapter : 
   System.Web.UI.WebControls.Adapters.WebControlAdapter {
protected override void RenderContents(HtmlTextWriter writer) {
    DropDownList list = this.Control as DropDownList;
    string currentOptionGroup;
    List<string> renderedOptionGroups = new List<string>();
    foreach(ListItem item in list.Items) {
        if(item.Attributes["OptionGroup"] == null) {
            RenderListItem(item, writer);
        } else {
            currentOptionGroup = item.Attributes["OptionGroup"];
            if(renderedOptionGroups.Contains(currentOptionGroup)) {
                RenderListItem(item, writer);
            } else {
                if(renderedOptionGroups.Count > 0) {
                    RenderOptionGroupEndTag(writer);
                }
                RenderOptionGroupBeginTag(currentOptionGroup, 
                                          writer);
                renderedOptionGroups.Add(currentOptionGroup);
                RenderListItem(item, writer);
            }
        }
    }
    if(renderedOptionGroups.Count > 0) {
        RenderOptionGroupEndTag(writer);
    }
}
private void RenderOptionGroupBeginTag(string name, 
             HtmlTextWriter writer) {
    writer.WriteBeginTag("optgroup");
    writer.WriteAttribute("label", name);
    writer.Write(HtmlTextWriter.TagRightChar);
    writer.WriteLine();
}
private void RenderOptionGroupEndTag(HtmlTextWriter writer) {
    writer.WriteEndTag("optgroup");
    writer.WriteLine();
}
private void RenderListItem(ListItem item, 
             HtmlTextWriter writer) {
    writer.WriteBeginTag("option");
    writer.WriteAttribute("value", item.Value, true);
    if(item.Selected) {
        writer.WriteAttribute("selected", "selected", false);
    }
    foreach(string key in item.Attributes.Keys) {
        writer.WriteAttribute(key, item.Attributes[key]);
    }
    writer.Write(HtmlTextWriter.TagRightChar);
    HttpUtility.HtmlEncode(item.Text, writer);
    writer.WriteEndTag("option");
    writer.WriteLine();
}

}

参考： https://www.codeproject.com/articles/15505/asp-net-dropdownlist-with-optiongroup-support