gridview行颜色渐变

行之间颜色间隔:

gridview:<AlternatingRowStyle ForeColor="#ffffff" BackColor="#ECECEC" />

datalist/datagrid:<AlternatingItemStyle ForeColor="#ffffff" BackColor="#ECECEC" />

鼠标滑过颜色变化:

gridview:

代码
1 protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
2 {
3 if (e.Row.RowType == DataControlRowType.DataRow)
4 {
5 e.Row.Attributes.Add("onmouseover", "currentColor=this.style.backgroundColor;this.style.backgroundColor='#E8D098'");
6 e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=currentColor");
        //单击行改变行背景颜色

e.Row.Attributes.Add(
"onclick","this.style.backgroundColor='颜色'; this.style.color='buttontext';this.style.cursor='default';");

7 }
8 }

datagird:

代码
1 protected void dgValueInfo_ItemDataBound(object sender, DataGridItemEventArgs e)
2 {
3 if (e.Item.ItemIndex != -1)
4 {
5 e.Item.Cells[0].Text = (e.Item.ItemIndex + 1).ToString();
6 ListItemType itemType = e.Item.ItemType;
7 if (itemType == ListItemType.Item)
8 {
9 e.Item.Attributes.Add("onmouseover", "e=this.style.backgroundColor; this.style.backgroundColor='#FBF9F9'");
10 e.Item.Attributes.Add("onmouseout", "this.style.backgroundColor=e");
11 }
12 }
13 }

datalist:

这个用类似上面的方式好像没有效果,所以可以考虑在页面去实现:

代码
1 <asp:DataList ID="dlMain" runat="server" >
2 <AlternatingItemStyle ForeColor="#ffffff" BackColor="#ECECEC" />
3 <HeaderTemplate>
4 <asp:Table ID="tabHeader" runat="server" CssClass="gridviewHead">
5 <asp:TableRow CssClass="Header">
6 <asp:TableCell CssClass="gridviewHead">序号 </asp:TableCell>
7 </asp:TableRow>
8 </asp:Table>
9 </HeaderTemplate>
10 <ItemTemplate>
11 <asp:Table ID="tabItem" runat="server" CssClass="GridTableTDCenter">
12 <asp:TableRow onmouseover="currentColor=this.style.backgroundColor;this.style.backgroundColor='#FBF9F9'" onmouseout="this.style.backgroundColor=currentColor>
13 <asp:TableCell CssClass="GridTableTDCenter"><#Container.ItemIndex+1%></asp:TableCell>
14 </asp:TableRow>
15 </asp:Table>
16 </ItemTemplate>
17 </asp:DataList>

 或者有table,则在tr中实现....

posted @ 2010-03-17 19:56  peter cheng  阅读(571)  评论(0编辑  收藏  举报