demoshop

demo, trying to be the best_

光棒(LightBar)的效果就是滑鼠移到每一個row的時候都會顯示另一種顏色,讓使用者清楚的知道目前在看哪行,市面上寫法百百款,不過demo比較喜歡使用此文的寫法,所以提供出來給各位看一下。

您可以參考 demo 另一篇使用 jQuery 所寫的光棒效果 萬用版表格光棒效果 LinghtBar 使用 jQuery

◆首先開啟您的web.config來加上設定值。


 
  1. 		<appSettings> 
  2.     <add key="changeColor" value="#F7F7F6"/> 
  3.     <add key="backgroundColor" value="#FBFBFB"/> 
  4. </appSettings> 

◆ 要使GridView擁有光棒的效果必須把事件寫在RowCreated事件或是RowDataBound事件裡面     ▲如果您的GridView是單色的就可以這樣寫


 
  1. 		if (e.Row.RowType == DataControlRowType.DataRow) 
  2. //判定row的型態是資料行 
  3.         { 
  4.             e.Row.Attributes.Add("onmouseover", string.Format("this.style.backgroundColor='{0}';", changeColor)); 
  5.             //滑鼠移到變色 
  6.             e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor='#FFFFFF';"); 
  7.             //滑鼠移開底色恢復為白色 
  8.         } 

    ▲如果您的GridView是雙色的就可以這樣寫


 
  1. 		if (e.Row.RowType == DataControlRowType.DataRow) 
  2.             //判定row的型態是資料行 
  3.         { 
  4.             e.Row.Attributes.Add("onmouseover", string.Format("this.style.backgroundColor='{0}';",ConfigurationManager.AppSettings["changeColor"].ToString())); 
  5.             //滑鼠移到變色 
  6.             if (e.Row.RowState == DataControlRowState.Alternate) 
  7.                 //判定row的型態是替代行 
  8.                 e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor='White';"); 
  9.                 //滑鼠移開底色恢復為白色 
  10.             else 
  11.                 e.Row.Attributes.Add("onmouseout", string.Format("this.style.backgroundColor='{0}';", ConfigurationManager.AppSettings["backgroundColor"].ToString())); 
  12.             //滑鼠移開底色恢復為設定好的底色 
  13.         } 

?小鋪廢言:這樣子寫的好處就在於如果GridView的色系改變了,只需要改變web.config的色碼就好了,而且不需要每次呼叫一次就打一次色碼

回應討論