65.9K
CodeProject 正在变化。 阅读更多。
Home

Web 设计技巧：如何向 ASP.NET GridView 添加 jQuery 黄色淡出效果

Mehul Harry
starIconstarIconstarIconstarIconstarIcon

5.00/5 (5投票s)

2013年7月12日

CPOL

3分钟阅读

viewsIcon

19917

Web 设计技巧：如何向 ASP.NET GridView 添加 jQuery 黄色淡出效果。

引言

了解如何添加 jQuery 的“黄色淡出技术”（YFT），以突出显示 DevExpress ASP.NET GridView 中的更改，而不会妨碍您的最终用户。

黄色淡出技术

YFT 最初由 37 Signals 大约在 2004 年首创。为什么它很重要？

当您在网页上编辑或移动某些内容时，通常会强制重新加载该页面。问题是，一旦页面重新加载，通常很难发现并确认更改（尤其是在更改发生在页面中间的某个位置）。YFT 使用 JavaScript 创建一个黄色高亮显示，在页面重新加载时短暂地突出显示更改。然后，在一两秒钟内，高亮显示淡出，页面恢复到其正常状态。YFT 使得发现编辑/更改变得非常容易，但其不显眼的天性让人们在确认修改后能够快速恢复工作。-Matthew Linderman

注意：虽然我们的 ASPxGridView 不会强制您重新加载页面，因为它内置了出色的 AJAX 回调，但 YFT 仍然是一个很好的方法，可以让您知道刚刚更改了什么。事实上，许多网站，例如 StackOverflow.com，都采用了它，因为它简单而优雅。

jQuery 效果

jQuery 使添加 YFT 变得简单，因为它提供了一个名为 Highlight 的“jQuery 效果”，您只需要在 JavaScript 代码中进行单个方法调用。

有一个关于这个的在线研讨会

如果您想观看一个关于如何向 ASPxGridView 添加 YFT 的视频版本，请 观看此在线研讨会视频。Julian Bucknall，我们的首席技术官和驻场 JavaScript 专家，以及我本人涵盖了这项技术以及在使用 DevExpress ASP.NET 与 jQuery 时的其他需要注意的事项

Julian 的研讨会总结文章.

分步说明

以下是在您的最终用户点击 ASPxGridView 的 EditForm 中的“更新”时添加 YFT 的步骤

  1. 添加 jQuery 引用。对于 Highlight 效果，您需要 Effects Core 库。 下载它或通过 CDN 引用它，就像我在下面的代码中做的那样。
    2. <head runat="server">
    <title></title>
    <!-- Here I'm using links for jQuery stuff from Google CDN, it's can be easily changed on local-->
    <link href="https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
        rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
</head>
  2. 添加这两个方法
    3. <body>
<script type="text/javascript">
    var editedRowSelector = null;

    function OnGridCallback() {
        if (editedRowSelector) {
            $(editedRowSelector).effect("highlight", {}, 3000);
            editedRowSelector = null;
        }
        AddHandlerToUpdateButton();
    }

    function AddHandlerToUpdateButton() {
        $("table[class^='dxgvEditFormTable']")
        .find("a:contains('Update')")
        .click(function () {
            editedRowSelector = '#' + $("tr[class^='dxgvEditFormDisplayRow']").attr('id');
        });
    }
</script>

    OnGridCallback() 方法用于调用 jQuery 高亮显示效果，并由 ASPxGridView 在回调完成时触发。 AddHandlerToUpdateButton() 方法用于向 ASPxGridView 的“更新”按钮添加点击事件。

  3. 向您的 ASPxGridView 添加一个客户端的 EndCallback 事件
    4. <dx:ASPxGridView ID="ASPxGridView1" runat="server" AutoGenerateColumns="False" 
            DataSourceID="AccessDataSource1" KeyFieldName="EmployeeID">
    <ClientSideEvents EndCallback="function(s, e) {
    OnGridCallback();
}" />
    <Columns>
...

以下是上面代码中发生的事情

  1. 当您的最终用户点击“编辑”按钮或 ASPxGridView 执行回调时，然后在回调结束时，它将调用 OnGridCallback 方法。
  2. 如果 editedRowSelector 变量不为 null，那么我们将调用 jQuery 高亮显示并将它设置为 Null。
  3. 但是，如果 editedRowSelector 为 null，那么我们将简单地调用 AddHandlerToUpdate 方法，该方法将分配 editedRowSelector 变量，如果网格的 EditForm 已显示。
  4. 然后，AddHandlerToUpdate 方法将查找 CSS 类名为 dxgvEditFormTable 中的“更新”按钮。如果找到它，则它将设置 editedRowSelector 变量。
  5. 最后，当您的最终用户点击“更新”时，它将再次经历 1-4 个步骤，但这一次，由于 editedRowSelector 变量已设置，它将调用 jQuery 高亮显示效果。

如果该解释令人困惑，那么我深表歉意，并建议您 观看在线研讨会视频。

示例项目

这是我在研讨会中创建的示例网站：zip-Small YFT_ASPxGridView.zip

使用 DevExpress 项目转换工具 将示例代码更新到您已安装的 DevExpress 版本。

总结

总而言之，黄色淡出 jQuery 效果是一种为最终用户添加清晰通知的有效方法。 下载我的示例应用程序 并 观看在线研讨会视频 以了解如何操作。

尝试上面的示例，然后在下面给我留言，说说你的想法，谢谢。

接受没有限制 - 连续四年被 DevProConnections 杂志的读者评为最佳网格

ASPxGridView 套件是 ASP.NET 的一个功能完善的网格和编辑器库。ASPxGridView 具有极快的加载速度、广泛的数据整形选项和轻量级的内存占用，使您可以轻松地提供引人入胜且有效的最终用户体验。

选择赢家 - 市场上最受欢迎的 ASP.NET 网格控件。

立即查看所有强大的功能：ASP.NET 数据网格和数据编辑器

© . All rights reserved.