訂閱
上一篇
返回
下一篇
DataGrid表格光棒設定方法
作者: Ahan 日期: 2005-04-23 10:18
我們通常使用表格列出資料時，若未將表格介面做適當的處理，將造成使用者閱讀困難的問題，使用交錯表格顏色搭配滑鼠移動時的光棒效果（附圖1）是個還算不錯的處理方式，單純的網頁很好做，但要怎麼在ASP.Net的DataGrid上實作這樣子的方法，以下是我使用的方式，可能有點笨，如果有更好的方式，歡迎交流指正。
（附圖1）顏色交錯表格列與光棒
（附圖1）顏色交錯表格列與光棒
DataGrid OnItemDataBound時將Attribute設定Mouse動作屬性
<script language="c#" runat="server">
private void DG_ItemDataBound(object Sender, DataGridItemEventArgs e){
if(e.Item.ItemType == ListItemType.Item ||
e.Item.ItemType == ListItemType.AlternatingItem){
e.Item.Attributes.Add
("onmouseover","trMouseColor(this)");
e.Item.Attributes.Add
("onmouseout","trMouseColor(this)");
}
}
</script>
private void DG_ItemDataBound(object Sender, DataGridItemEventArgs e){
if(e.Item.ItemType == ListItemType.Item ||
e.Item.ItemType == ListItemType.AlternatingItem){
e.Item.Attributes.Add
("onmouseover","trMouseColor(this)");
e.Item.Attributes.Add
("onmouseout","trMouseColor(this)");
}
}
</script>
使用event.type捕捉滑鼠事件型態，再針對每種狀態做處理，因為使用了交錯表格顏色，因此必須將變色之前的顏色值做儲存，本例將TR原色使用物件.name來做暫存，不知道有沒有更好的辦法
<script language="javascript">
function trMouseColor(objTRColor){
var strColor = objTRColor.style.backgroundColor;
objTRColor.style.backgroundColor = strColor;
switch (event.type){
case 'mouseover':
objTRColor.style.backgroundColor = '#FFFF00';
objTRColor.name = strColor;
break;
case 'mouseout':
objTRColor.style.backgroundColor = objTRColor.name;
break;
default:
break;
}
}
</script>
function trMouseColor(objTRColor){
var strColor = objTRColor.style.backgroundColor;
objTRColor.style.backgroundColor = strColor;
switch (event.type){
case 'mouseover':
objTRColor.style.backgroundColor = '#FFFF00';
objTRColor.name = strColor;
break;
case 'mouseout':
objTRColor.style.backgroundColor = objTRColor.name;
break;
default:
break;
}
}
</script>
參考資料
引用通告地址:
點擊獲取引用地址
發表評論
