GridviewFix jQuery 插件

引言

在本文中，我讨论了开发者在使用 dataTable 插件搭配 ASP.NET Gridview 控件时面临的问题，并提出了相应的解决方案。如果您正在使用非常流行的 dataTable jquery 插件 搭配 ASP.NET 数据绑定服务器控件，那么这篇文章就是为您准备的。

背景

jQuery 插件 dataTable 在 Web 应用程序中得到了广泛应用。它可以轻松地与 repeater 和 table 集成。DataTable 插件用于将普通的 Gridview/table/repeater 转换为功能强大的表格，具备以下功能：

1. 动态添加新行
2. 单列过滤
3. 高亮显示行和列
4. 显示和隐藏特定记录的详细信息
5. 用户可选行（多选）
6. 用户可选行（单选）和删除行
7. 可编辑行（使用 jEditable）
8. 提交表格中的元素表单
9. 索引列（静态编号列）
10. 动态显示和隐藏列
11. 正则表达式过滤

除了上述列出的 API 外，DataTable 插件还提供了许多其他功能。我们可以通过一行代码将任何表格转换为 jQuery datatable。

//Applying dataTable on table element.
    $("#table-id").dataTable();

dataTable 插件要正常工作，有一个先决条件：目标表格必须格式良好，包含 'thead' 和 'tbody' 部分。其中 'tfoot' 部分是可选的。下面是一个理想目标表格的示例

//Ideal Table structure for applying dataTable plugin.
<table id="table_id">
<thead>
<tr>
  <th>Column 1</th>
  <th>Column 2</th>
  <th>etc</th>
</tr>
</thead>

<tbody>
<tr>
  <td>Row 1 Data 1</td>
  <td>Row 1 Data 2</td>
 <td>etc</td>
</tr>

<tr>
  <td>Row 2 Data 1</td>
  <td>Row 2 Data 2</td>
  <td>etc</td>
</tr>
//rest rows...

</tbody>
</table>

在上面的表格中，我没有使用 tfoot 部分，因为它不是必需的。如果需要，也可以包含 'tfoot' 部分。

Gridview 和 dataTable 插件的问题

如果您将 DataTable 插件与 ASP.NET Gridview 控件一起使用，您会发现 dataTable 插件无法与 ASP.NET Gridview 控件正常工作。让我们看看 gridview 为什么不能与 dataTable 插件一起工作，并通过编写一个辅助插件来尝试解决它。

问题分析

如果我们使用 Gridview，它会渲染出与 dataTable 插件不兼容的 HTML。让我们使用下面的 Gridview 代码来查看其渲染的 HTML 表格。

//Gridview Code used in ASP.NET page
<asp:GridView ID="GridViewExample" runat="server" 
	AutoGenerateColumns="false" cellpadding="0" cellspacing="0" 
	border="0" class="display">
        <columns>
            <asp:BoundField HeaderText="Name" DataField="Name" />
            <asp:BoundField HeaderText="Town" DataField="Town" />
            <asp:BoundField HeaderText="Age" DataField="Age" />
            <asp:BoundField HeaderText="Employee Id" DataField="Id" />
            <asp:BoundField HeaderText="Skills" DataField="Skills" />
        </columns>
        <rowstyle cssclass="rowStyle"> //Giving class name to all rows
        <HeaderStyle CssClass="headerStyle" /> //Giving class name to header row
        <footerstyle cssclass="footerStyle">//Giving class name to footer row.
</footerstyle></rowstyle>

下面是上面 Gridview 渲染的 HTML。

//Table HTML that gridview rendered on the DOM.
//thead and tfoot sections are missing.
<table id="Table1" style="border-collapse: collapse;" 
	border="0" rules="all" cellspacing="0" cellpadding="0">
<tbody>
<tr class="headerStyle">
  <th scope="col">Name</th>
  <th scope="col">Town</th>
  <th scope="col">Age</th>
  <th scope="col">Employee Id</th>
  <th scope="col">Skills</th>
</tr>
<tr class="rowStyle">
  <td>Rupesh</td>
  <td>Louisville</td>
  <td>29</td>
  <td>114230</td>
  <td>c sharp, jquery</td>
</tr>
//rest rows...
//tfoot section (optional)...
</tbody>
</table>

在上面的表格 HTML 中，您可以看到只有一个 tbody 部分。但是，没有 thead 和 tfoot 部分。

正如我 之前提到的，为了让 dataTable 正常工作，目标表格必须包含 'thead' 和 'tbody' 作为必需元素。

gridview 渲染的 HTML 中缺少 'thead' 和 'tbody' 元素是导致 Gridview 控件无法与 datatable 插件配合工作的根本原因。

因此，如果我们对 Gridview 使用 dataTable 插件，它将永远无法正常工作。让我们来看一下实际情况。下面是将 dataTable 插件应用于 gridview 所需的代码。

//calling dataTable plugin on above Gridview
$(">

如果您运行应用程序并加载页面，您会发现在 dataTables.js 文件中代码会中断，并抛出一个异常，提示“asSorting is null or not an object”。请看下面的截图。

出现上述错误是因为在应用 dataTable() 方法之前，gridview 的渲染格式 不符合要求。如果您点击继续按钮，您将看到表格未被 dataTable 插件修改。请看下面的截图。

让我们为这个问题寻找解决方案。

解决方案：GridviewFix 辅助插件

我创建了一个名为 GridviewFix 的辅助插件，可以在调用 dataTable 插件之前应用于 Gridview 控件。这个辅助插件将使 ASP.NET Gridview 控件渲染的表格 HTML 兼容 dataTable 插件，从而使 GridviewFix 能够让 dataTable 插件与 gridview 控件协同工作。让我们来了解一下这个插件的代码细节、用法，并实际演示一下。

GridviewFix 插件代码

//GridviewFix Plugin Code
(function($,undefined){
   /*
An object required as an argument for the class names of the header , 
rows and footer of the target table.
Below are the default values for the plugins parameter object.
{
    header:"headerStyle" // header class name
    ,row:"rowStyle" //row class name
    ,footer:"footerStyle" //footer class name
}
*/
(function($,undefined){
    $.fn.GridviewFix = function (params) {
        var settings = $.extend({},{header:"headerStyle",row:"rowStyle",
		footer:"footerStyle"},params);
        return this.each(function ( ){
            var 
            ctxt= $(this)
	        ,thead =$("").append($("tr.".concat(settings.header),ctxt)) 
	        ,tbody = $("").append($("tr.".concat(settings.row),ctxt))
	        ,tfooter = $("").append($("tr.".concat(settings.footer),ctxt));
	        $("tbody",ctxt).remove();
	        ctxt.append(thead).append(tbody).append(tfooter);
        });
    }
})(jQuery);

此插件将 Gridview 的默认渲染表格 HTML 转换为 dataTable 插件所需的 标准格式。GridviewFix 方法创建在 jQuery 的 prototype 对象中，因此可以在 jQuery 对象上使用。

• 方法名称是 GridviewFix。
• 调用此方法所需的参数是一个 JSON 对象，其中包含目标表格的表头、行和表尾的类名。

     //JSON object required to call GridviewFix method.
     {
      header:"headerStyle" // header class name
      ,row:"rowStyle" //row class name
      ,footer:"footerStyle" //footer class name
  }

  在调用插件方法之前，目标 Gridview 应为其表头、表尾和行部分设置恰当的类名。

• GridviewFix 插件的工作原理：正如我们所知，gridview 的默认渲染 HTML 不正确，如果我们能在渲染前将其变得正确，就可以解决这个问题。让我们看看 GridviewFix 辅助插件是如何做到这一点的。
  • 首先，它通过给定的类名查找表头行、表尾行和普通行。
  • 找到行之后，它将它们包装在各自所需的元素部分中。例如，表头行将被包装在 'thead' 元素下，普通行将被包装在 'tbody' 元素下，表尾行将被包装在 'tfoot' 元素部分下。
  • 在按上述部分分隔和分组之后，它会清理 gridview 表格，移除其 'tbody' 部分。
  • 然后，它将上面分组的部分逐一追加到 gridview 表格中。这样，gridview 表格现在就包含了带有正确行排列的 'thead'、'tbody' 和 'tfoot' 部分。

因此，如果您在应用 dataTable 插件之前在 gridview 上应用 GridviewFix 插件，那么 gridview 将准备好，拥有 dataTable 所需的正确表格 格式，并能正常工作。

GridviewFix 插件实战

现在我们将看到如何在页面中使用 GridviewFix 插件，并查看它如何解决 问题。我们将使用上面提到的相同的 Gridview 控件。在页面的脚本部分包含 GridviewFix.js 辅助插件文件。在对 gridview 控件调用 dataTable() 方法之前，先调用 GridviewFix() 辅助方法。下面是相应的代码

//Applying GridviewFix plugin before calling dataTable method.
$(">

在上面的代码中，我首先对 gridview 调用了 GridviewFix() 方法，然后才调用 dataTable()。我没有向 GridviewFix() 方法传递任何参数。因为我在目标 Gridview 中使用了与插件 默认参数 对象中定义的相同的类名。如果您为目标 gridview 的表头、表尾和行设置了不同的类名，您可以将它们的类名作为参数传递给 GridviewFix() 方法的对象。请参阅代码

//passing class names for header, footer and rows to GridviewFix method.
$(">

现在，让我们运行应用程序，查看下面渲染的 gridview 的截图。

您可以看到，在我们对 gridview 应用了辅助插件的 GridviewFix() 方法后，gridview 被正确渲染，dataTable 插件也能正常工作。因此，GridviewFix 插件 是上述 问题的一个简单而有用的解决方案。

源代码

我在本文中附带了源代码。在源代码中，我为演示包含了 datatable.aspx。在那里，我对 gridview 使用了 GridviewFix 插件。如果您运行项目，您可以看到演示。源代码可从 这里 下载。下面是项目的截图。

历史

这是 GridviewFix 插件的第一个版本。我需要您的反馈，以便使其更加通用和有用。