在回发时保留 DropDownList 的 listitem 颜色
在 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:Text
、Value
和 IsSave
。Text
和 Value
列是 DropDownList
的 DataTextField
和 DataValueField
,而 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;
}
关注点
好了,这就是全部内容。为了完成代码,您需要下载源代码……我希望您觉得这个提示有用。