DropDownList控件扩展练习
首先，在说我的练习之前要谢谢YYControls媛媛控件提供的扩展DropDownList控件和ListBox控件(1) - 支持分组功能(optgroup标签)原代码
图片如下：
在我YYControls媛媛控件的基础上只是做了一两点的修改，如加入颜色的设置。基本功能大家也可以自己加上。
好了，现在说说做法吧！
大家都知道，在HTML控件SELECT中是可以加入分组的
如图片1：
<select > <optgroup label="dddd"> <option value="dfsdfsdfsd" >fsddsf</option> <option value="sdfdsfsdfdsf">sdfsdfdsf</option> <option value="rrrrrrrr" >rrrrrrrr</option> </optgroup> <optgroup label="ggggggg"> <option value="sssssssssssss" >sdfsdf</option> <option value="wwwwww" >wwwwwwwww</option> </optgroup></select>但在DropDownList控件中却是找不到可以分组的选项。那就只可以对DropDownList进行扩展了。
DropDownList控件当它在设置界面时的代码是
<asp:DropDownList ID="DropDownList1" runat="server"> <asp:ListItem>123</asp:ListItem> <asp:ListItem>234</asp:ListItem> <asp:ListItem>345</asp:ListItem> </asp:DropDownList>但当它生成页后，就会给输出
<select name="DropDownList1" id="DropDownList1"> <option value="123">123</option> <option value="234">234</option> <option value="345">345</option></select>由这可以看出。DropDownList控件在HTML页面输出时应该也可以做出分组的功能。
基本原理知道了，现在开始做控件的扩展了。
首先是要继承DropDownList类public partial class SmartDropDownList : DropDownList
然后就是重新重写输出界面时的代码
/// <summary>
/// 将控件的内容呈现到指定的编写器中 /// </summary>
/// <param name="writer">writer</param> protected override void RenderContents(HtmlTextWriter writer) {
// 呈现Option或OptionGroup OptionGroupRenderContents(writer); }/// <summary> /// 呈现Option或OptionGroup /// </summary> /// <param name="writer">writer</param> private void OptionGroupRenderContents(HtmlTextWriter writer) { // 是否需要呈现OptionGroup的EndTag bool writerEndTag = false; foreach (ListItem li in this.Items)
{
// 如果没有optgroup属性则呈现Option if (li.Value != this.OptionGroupValue) { // 呈现Option RenderListItem(li, writer);
} // 如果有optgroup属性则呈现OptionGroup else { if (writerEndTag) // 呈现OptionGroup的EndTag OptionGroupEndTag(writer); else writerEndTag = true; // 呈现OptionGroup的BeginTag OptionGroupBeginTag(li, writer); } } if (writerEndTag) // 呈现OptionGroup的EndTag OptionGroupEndTag(writer); } /// <summary> /// 呈现OptionGroup的BeginTag /// </summary> /// <param name="li">OptionGroup数据项</param> /// <param name="writer">writer</param> private void OptionGroupBeginTag(ListItem li, HtmlTextWriter writer) { writer.WriteBeginTag("optgroup"); //string d = wcc.ConvertToString(GroupFontColor); writer.WriteAttribute("style", "color:"+wcc.ConvertToString(GroupFontColor)+";"); // writer.WriteStyleAttribute("color", "red",true); // 写入OptionGroup的label writer.WriteAttribute("label", li.Text); foreach (string key in li.Attributes.Keys) { // 写入OptionGroup的其它属性 writer.WriteAttribute(key, li.Attributes[key]); } writer.Write(HtmlTextWriter.TagRightChar); writer.WriteLine(); } /// <summary> /// 呈现OptionGroup的EndTag /// </summary> /// <param name="writer">writer</param> private void OptionGroupEndTag(HtmlTextWriter writer) { writer.WriteEndTag("optgroup"); writer.WriteLine(); } /// <summary> /// 呈现Option /// </summary> /// <param name="li">Option数据项</param> /// <param name="writer">writer</param> private void RenderListItem(ListItem li, HtmlTextWriter writer) { writer.AddAttribute(HtmlTextWriterAttribute.Value, li.Value); writer.AddStyleAttribute(HtmlTextWriterStyle.Color, wcc.ConvertToString(ChildFontColor)); if (li.Selected) { // 如果该Option被选中则写入selected writer.AddAttribute(HtmlTextWriterAttribute.Selected, "selected"); } foreach (string key in li.Attributes.Keys) { // 写入Option的其它属性 writer.WriteAttribute(key, li.Attributes[key]); } writer.RenderBeginTag(HtmlTextWriterTag.Option); //writer.Write(HtmlTextWriter.TagRightChar); // 写入Option的Text writer.Write(li.Text); writer.RenderEndTag(); }在这里要说明一下，在RenderListItem(ListItem li, HtmlTextWriter writer)中我是使用了AddAttribute的方法输出子项的值。而在 private void OptionGroupBeginTag(ListItem li, HtmlTextWriter writer)中是使用了WriteAttribute来输出分组项的值。在用这两个方法时应该要主意的是写代码时顺序。AddAttribute的方法是要写完了其属性后才写输出的控件类型，而使用WriteAttribute是要先写出输出的控件类型再写出属性（这就像写文章的顺序写法，AddAttribute就是倒序写法）。
如果把
/// <summary> /// 呈现Option /// </summary> /// <param name="li">Option数据项</param> /// <param name="writer">writer</param> private void RenderListItem(ListItem li, HtmlTextWriter writer) { writer.AddAttribute(HtmlTextWriterAttribute.Value, li.Value); writer.AddStyleAttribute(HtmlTextWriterStyle.Color, wcc.ConvertToString(ChildFontColor)); if (li.Selected) { // 如果该Option被选中则写入selected writer.AddAttribute(HtmlTextWriterAttribute.Selected, "selected"); } foreach (string key in li.Attributes.Keys) { // 写入Option的其它属性 writer.WriteAttribute(key, li.Attributes[key]); } writer.RenderBeginTag(HtmlTextWriterTag.Option); //writer.Write(HtmlTextWriter.TagRightChar); // 写入Option的Text writer.Write(li.Text); writer.RenderEndTag(); }
写为
/// <summary> /// 呈现Option /// </summary> /// <param name="li">Option数据项</param> /// <param name="writer">writer</param> private void RenderListItem(ListItem li, HtmlTextWriter writer) { writer.RenderBeginTag(HtmlTextWriterTag.Option); writer.AddAttribute(HtmlTextWriterAttribute.Value, li.Value); writer.AddStyleAttribute(HtmlTextWriterStyle.Color, wcc.ConvertToString(ChildFontColor)); if (li.Selected) { // 如果该Option被选中则写入selected writer.AddAttribute(HtmlTextWriterAttribute.Selected, "selected"); } foreach (string key in li.Attributes.Keys) { // 写入Option的其它属性 writer.WriteAttribute(key, li.Attributes[key]); } //writer.Write(HtmlTextWriter.TagRightChar); // 写入Option的Text writer.Write(li.Text); writer.RenderEndTag(); }
运行以下代码
protected void SmartDropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
Label1.Text = SmartDropDownList1.SelectedItem.Text;
}
就会有特别的效果，效果是怎样大家试一下吧。代码下载
