65.9K
CodeProject 正在变化。 阅读更多。
Home

在回发时保留 DropDownList 的 listitem 颜色

starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.67/5 (3投票s)

2009年6月11日

CPOL

1分钟阅读

viewsIcon

33203

downloadIcon

276

在 Postback 期间保持应用于下拉列表的样式;文章重点关注颜色样式。

引言

有时您可能需要将样式应用于 DropDownList 的列表项,但这些样式仅在 Postback 发生之前保持。我提供的示例是一个产品列表,其中红色条目表示已保存的产品。

使用代码

在 ASPX 页面中,您有一个 DropDownList 来应用颜色,并在其中添加一个 HiddenField 来存储具有颜色的列表项的索引。

<asp:HiddenField ID="hfValuesSelectForColor" runat="server" />
<asp:DropDownList ID="drpProduct" runat="server" 
     DataTextField="Text" DataValueField="Value" ><asp:DropDownList/>

它还需要一个 JavaScript 函数,该函数负责根据存储在 hfValuesSelectForColor 中的索引对 DropDownList 进行着色;此函数位于 head 标签之间。

<head runat="server">
<title>DropDownListColor</title>
<script language="javascript" type="text/javascript">
<!--
//DESCRIPTION: Keep the colors of a dropdownlist during postback
//DrpName: Name of the dropdownlist who need to keep the colors during postback
//Color: Color to apply in the dropdownlist
//StyleType: Style to apply in the dropdownlist COLOR or BACKGROUND-COLOR
//indicesForSplit: string with the list of index
//                 of the items of the dropdownlist who has color
//SeparatorSplit: A char to disjoin the items of the string indicesParaSplit
function drpSetColors(DrpName, Color, StyleType, indicesForSplit, SeparatorSplit) 
{
  if (document.getElementById(DrpName) != null) {
      var indices = indicesForSplit.split(SeparatorSplit);
    if (indices[0] == "")
        return;
    for (j = 0; j < indices.length; j++) {
     if (StyleType.toUpperCase() == "COLOR")
      document.getElementById(DrpName).options[indices[j]].style.color = Color;
     else if (StyleType.toUpperCase() == "BACKGROUND-COLOR")
     document.getElementById(DrpName).options[indices[j]].style.backgroundColor = Color;
    }
  }
}
-->
</script />

在代码后台的 Page_load 中,您需要调用一个 JavaScript 函数。为了构造句子,我使用了一个 StringBuider(需要添加命名空间 System.Text),但您可以使用一个简单的字符串。

protected void Page_Load(object sender, EventArgs e)
{
    //call the javascript function to keep the color of the dropdownlist
    StringBuilder drpSetColors = new StringBuilder();
    drpSetColors.Append("<script>");
    drpSetColors.Append("drpSetColors('DrpProduct', 'Red', 'color', '" + 
                        hfValuesSelectForColor.Value + "','|');");
    drpSetColors.Append("</script>");
    //For Visual 2008 with Ajax we use ScriptManager not clientScript.
    //ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), 
    //       "drpColor", drpSetColors.ToString(), false);
    this.Page.ClientScript.RegisterStartupScript(this.Page.GetType(), 
                           "drpColor", drpSetColors.ToString());
}

您已经拥有保持颜色的所有必需内容,现在您只需要指示哪些条目被着色。为此,我在代码后台工作,假设您在服务器端比在客户端进行更多开发,因此需要保持列表中条目的颜色在 Postback 中。

为了实现这一点,您必须在某个地方存储着色列表项的原因。在我的示例中,我从 Viewstate 中提取数据,Viewstate 包含一个包含三个列的 datatable:TextValueIsSaveTextValue 列是 DropDownListDataTextFieldDataValueField,而 IsSave 是一个指示您是否必须在保存项目(产品)时为其着色的值。

DataTable dt = (DataTable)ViewState["vsTable"];
            
hfValuesSelectForColor.Value = "";
//search for the elements you must colored and add to hfValuesSelectForColor
DataRow[] drColors = dt.Select("IsSave = 1");
for (int i = 0; i < drColors.Length; i++)
{
    int index = drpProduct.Items.IndexOf(
      drpProduct.Items.FindByValue(drColors[i]["Value"].ToString()));
    drpProduct.Items[index].Attributes.Add("style", "color: red");
    drpProductCopy.Items[index].Attributes.Add("style", 
                         "background-Color: red");
    drpProductCopy.SelectedIndex = index;
    if (hfValuesSelectForColor.Value == "")
        hfValuesSelectForColor.Value = index.ToString();
    else
        hfValuesSelectForColor.Value = hfValuesSelectForColor.Value + "|" + inde;
}

关注点

好了,这就是全部内容。为了完成代码,您需要下载源代码……我希望您觉得这个提示有用。

© . All rights reserved.