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

ASP.NET DataGrid 扩展 [客户端可排序/可拖拽....] - 第一部分

Muhammad Abubakar Dar
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.67/5 (21投票s)

2008年2月26日

CPOL

5分钟阅读

viewsIcon

90533

downloadIcon

1885

对 ASP.NET DataGrid 控件的扩展，内置客户端排序、列拖拽、固定表头、全选、全不选、选中行高亮显示等功能……

引言

该控件是 ASP.NET DataGrid 控件的扩展，将提供以下内置功能

  1. 客户端排序
  2. 客户端可拖拽列（用户可以根据自己的喜好重新排列网格的列顺序）
  3. 选择列（DataGirdColumn 的专用扩展列，包含一个标题复选框以及“全选”和“全不选”的功能，无需客户端脚本和服务器端工作）
  4. 固定网格表头
  5. 高亮显示选中的行
  6. 行的悬停颜色
  7. 选择状态
  8. 可打印
  9. 可导出为多种格式，并且由于其多态导出设计，可以轻松配置为任何导出格式
  10. 打印选中的行

优势

通过检查在单个网格控件中实现这些常见功能所需的时间，让我向您解释这些增强功能在网格控件中的重要性。

  1. 客户端排序（取决于开发者的能力，目前大多数人都是在服务器端完成的，每次排序都需要一次服务器往返）。
  2. 全选 – 全不选（需要在表单中添加一个复选框，编写 JavaScript 代码来处理此操作，以及其格式要求） - 大约需要 2 小时。
  3. 固定表头（需要在网格顶部放置一个相同的表格，并需要根据网格列进行严格的格式化；每当网格格式发生变化时，都需要重新更改） - 2 小时。
  4. 高亮显示选中的行（需要少量 JavaScript 代码） - 0.5 小时。
  5. 行的悬停颜色 - 0.5 小时。

总之，对于单个网格，我们可以节省至少 6 小时，并且错误几率相对较低，性能更好。这还减少了整体测试工作量。通过这种方式，我们可以在一个拥有1000 页的分布式应用程序中节省约 6000 小时。

动机

在过去的 8 个月里，在办公室工作时间，我厌倦了在数据网格上一次又一次地完成上述任务。直到现在，我所有的同事都在做同样的事情，并且对这种重复造轮子的做法还算满意，但我不是那种喜欢这种繁琐工作的人。我们（软件开发人员）通常被要求在匆忙和担忧中工作。所以，我决定接手，因为我有一些空闲的周六，于是我开始从事这项工作，为我的同事们提供关于可重用性和.NET的更广阔视野。

实现和使用方法

客户端排序

DataGrid 控件在客户端渲染一个简单的 HTML 表格。我们需要修改 DataGrid 控件生成的 HTML。启动一个新的 Visual Studio® .NET 解决方案，创建一个示例 ASP.NET 应用程序，并添加一个 Web 控件库项目。新的 DataGrid 类应该如下所示

 [ToolboxData("<{0}:DataGrid runat="\""server\" />")]
 public class DataGrid : System.Web.UI.WebControls.DataGrid
 {
   public DataGrid() : base()
   {
   }
   •••
 }

捕获默认的 HTML 标记并解析它。Control.Render 方法提供该控件将要生成的 HTML。您可以使用以下代码捕获给定控件生成的 HTML 代码

 StringWriter writer = new StringWriter();
 HtmlTextWriter buffer = new HtmlTextWriter(writer);
 base.Render(buffer);
 string gridMarkup = writer.ToString();

最后，将修改后的标记写入响应流。可以在此处添加任何额外的属性以在 HTML 中显示。这就是您可以根据需要更改任何 ASP.NET 控件的外观和行为的方式。我已经修改了 HTML，并将其格式化为一个更结构化的 HTML 表格，包含 THEAD、TBODY 和 TFOOT。

如何进行排序

为了启用网格的客户端排序，需要设置以下属性。

  • EnableClientSort - 此属性应设置为 true 以启用客户端排序。
  • InitialSort - 您可以选择设置此属性，格式应为基于零的列索引，升序/降序。如果您不想初始排序数据，可以忽略此属性。此属性的示例值是 1, ascending 或 3, descending。

列拖拽

为了实现这一点，我们需要编写一种 DHTML 行为，以便可以反复使用它。您可以浏览 MSDN® Online 上精彩的 "DHTML Dude" 列。它讨论了恢复 HTML 表格元素以及如何拖动列的方法。有关 DHTML 组件的更多详细信息，请参阅：脚本演进为更强大的技术：HTML Behaviors 深度解析。同样，您需要像排序一样进行相同的操作，只需修改生成的 HTML 并为表格添加一个行为，即可完成。现在，您的修改后的 style 应该像这样，其余工作将由该行为完成

style="behavior:behavior:url(dragdrop.htc);"

如何使用列拖拽

  • EnableColumnDrag - 为了使列可拖拽，应将其设置为 true。
  • Hitcolor - 在拖拽网格时使用。
  • Dragcolor - 在拖拽时使用。

自定义选择列

有关此自定义列的实现细节，您可以参考我之前的一篇文章：[实现自定义选择列]，或者访问我的博客。所有行选择颜色、“全选”和“全不选”功能都内置在该列中。要添加一个带有“全选”、“全不选”和行选择颜色的选择列，您需要在页面中添加包含 CheckBoxColumn 类的程序集引用，并在您的 DataGrid 列中添加以下代码片段

<Columns> <cc1:CheckBoxColumn\> </Columns>

您可以通过指定此列的 DataField 属性来选择性地将此列绑定到数据源，还可以提供行选择颜色和行取消选择颜色。

<Columns>
  <cc1:CheckBoxColumn RowSelectColor="Wheat" RowUnSelectColor="White" \>
</Columns>

固定表头

您需要在 aspx 页面的顶部添加一个文档类型，如下所示

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

其他所有内容将由自定义网格处理。

剩余部分

在第二部分，我将讨论并实现剩余的功能。

结论

这个巧妙的控件只需将控件拖到页面上，即可为您节省用于常见格式设置、重复脚本编写和编码的时间。

© . All rights reserved.