Generated Image

使用JavaScript 为GridView 行添加淡入淡出效果

GridView row fading is specially useful when you are performing operations on the single row. These operations can be save, update, delete etc. Let's check out how to create fading effects using JavaScript.

First I need to populate the GridView control.

http://aspadvice.com/blogs/azamsharp/archive/2007/...

这是

http://www.cnblogs.com/dflying/　推荐的本周ASP.NET英文技术文章推荐[05/20 - 06/02]　中的一篇文章

自己做了一遍

实现 

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/
xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>
   
    
   <script language=javascript type ="text/javascript" >
   function Save(obj) 
 
{ 
 
 
var row = null; 
 
 
if(IsFireFox()) 
 
{
 
row = obj.parentNode.parentNode;
 
}
 
 
else
 
{
 
row = obj.parentElement.parentElement;
 
}
 
 
var message = row.getElementsByTagName("DIV"); 
 
row.style.backgroundColor = 'Yellow'; 
 
message[0].innerHTML = '保存中!';
 
 
window.setTimeout(function()
 { row.style.backgroundColor = 'White'; message[0].innerHTML = '保存完毕!'; },2000); 
 
 
}
 
function IsFireFox() 
 
{
 
return navigator.appName == 'Netscape';
 
}
 
 
   
   </script> 
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Style="left: 290px;
            position: relative; top: 269px" Text="点我改变" />&nbsp;
        <asp:TextBox ID="TextBox1" runat="server" Style="left: 162px; position: relative;
            top: 61px"></asp:TextBox>
        <asp:TextBox ID="TextBox2" runat="server" Style="left: 3px; position: relative; top: 97px">
</asp:TextBox>
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="ProductID"
            DataSourceID="SqlDataSource1" Style="left: 433px; position: relative; top: 132px">
            <Columns>
                <asp:TemplateField HeaderText="ProductName" SortExpression="ProductName">
                    <ItemTemplate>
                        <asp:Label ID="Label1" runat="server" Text='<%# Bind("ProductName") %>'>
</asp:Label>
                 
                           <asp:Label ID="Label3" runat="server" Text='<%# Bind("CategoryName") %>'>
</asp:Label>
                                               <asp:Label ID="Label2" runat="server"
 Text='<%# Bind("QuantityPerUnit") %>'>
</asp:Label>
 
       <input type="button" value="保存" onclick="Save(this)" />
 
 
 
                    </ItemTemplate>
                </asp:TemplateField>
               <asp:TemplateField>
 
<ItemTemplate>
 
 
<div id="message" ></div>
 
</ItemTemplate>
 
</asp:TemplateField>
 
                
 
            </Columns>
        </asp:GridView>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
            SelectCommand="SELECT [ProductID], [ProductName], 
[QuantityPerUnit], [CategoryName], [Discontinued] FROM [Alphabetical list of products]">
        </asp:SqlDataSource>
    </div>
    </form>
</body>
</html>
posted @ 2007-06-04 10:10  桂圆  阅读(1211)  评论(0)  编辑  收藏  举报