demoshop

NEWS

demo, trying to be the best.

站內搜尋載入中...

如何在gridview中使用光棒呢

  • 4962
  • 1

光棒(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的色碼就好了,而且不需要每次呼叫一次就打一次色碼