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

最新推荐文章于 2024-11-11 19:29:13 发布

weixin_30802273

最新推荐文章于 2024-11-11 19:29:13 发布

阅读量57

点赞数

文章标签： javascript xhtml c# ViewUI

原文链接：http://www.cnblogs.com/zbqy/archive/2007/06/04/770233.html

版权

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]">