GridView 行淡入效果

引言

在任何应用程序中，在操作进行时向用户提供视觉指示始终是一个好主意。 在本文中，我将描述如何在用户对选定行执行操作时提供视觉指示。

填充 GridView 控件

第一项任务是填充 GridView 控件。 请查看以下用于填充 GridView 的代码。

private void BindData()
{
    SqlConnection myConnection = 
        new SqlConnection(
        "Server=localhost;Database=Northwind;Trusted_Connection=true");
    SqlDataAdapter ad = 
        new SqlDataAdapter("SELECT * FROM Categories", myConnection);
    DataSet ds = new DataSet();
    ad.Fill(ds);
    gvCategories.DataSource = ds;
    gvCategories.DataBind();
}

GridView 的 HTML 代码如下所示

<asp:GridView ID="gvCategories" runat="server" AutoGenerateColumns="False">
    <Columns>
        <asp:TemplateField Visible="true">
            <ItemTemplate>
                <div id="categoryID"><%# Eval("CategoryID") %></div>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:Literal ID="litCategoryName" 
                    runat="server" Text='<%# Eval("CategoryName") 
                    %>' />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField>
            <ItemTemplate>
                <input type="button" value="Save" onclick="Save(this)" />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField>
            <ItemTemplate>
                <div id="message" ></div>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

重要的是要注意，当模板列内的按钮被点击时，会调用 Save(this) 方法。 让我们看一下 Save 方法。

Save 方法

Save 方法负责创建淡入淡出效果。 让我们看一下 Save 方法，然后我们将讨论它是如何实现的。

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[1].innerHTML = 'Saving!'; 
    // Here you can also call the server side method 

    // to save the item to the database

    window.setTimeout(function() 
    { 
        row.style.backgroundColor = 'White'; 
        message[1].innerHTML = 'Saved!'; 
    }, 2000); 
}

第一项任务是获取被点击的 GridView 行对象。 获取行对象后，我找到该行中包含的所有 DIV 元素。 检索 DIV 元素是为了在保存行时显示消息。 淡入淡出函数的核心是 window.setTimeOut 方法，该方法在 2000 毫秒或 2 秒后触发。 我没有创建实际的方法，而是将匿名方法传递给 window.setTimeout 函数。

window.setTimeout(function() 
{ 
    row.style.backgroundColor = 'White'; 
    message[1].innerHTML = 'Saved!'; 
}, 2000);

您可以使用以下 URL 查看效果的实时动画

<a href="http://gridviewguy.com/ArticleDetails.aspx?articleID=241"></a>

历史

• 2007年7月6日 -- 发布原始版本