将 FooTable 插件与 ASP.NET DataGrid 一起使用

Question

我目前正在为我工作的公司重新设计应用程序。所有数据都通过 DataGrid 显示，这很好，除了当我尝试合并一个名为 "Footable" 的 JQuery 库以使所有网格在较小的设备上折叠时，如解释的那样 here.在本教程中，它使用 GridView。我制作了演示，效果很好，这正是我想要的，但是我在使用 DataGrid 做同样的事情时遇到了麻烦。我的第一个想法是将我的 DataGrid 切换为 Gridview 并像在演示中那样实现它，但我必须重新连接后面代码中的所有内容，这非常庞大，而且会非常耗费人力。所以我想知道是否可以使用 DataGrid 而不是 GridView

来实现 FooTable JQuery 插件

后面的代码中只有几行实际触发了 JQuery，但它似乎不适用于 DataGrid。以下是演示对 GridView（在 C# 中）所做的操作：

//Attribute to show the Plus Minus Button.
GridView1.HeaderRow.Cells[0].Attributes["data-class"] = "expand";

//Attribute to hide column in Phone.
GridView1.HeaderRow.Cells[2].Attributes["data-hide"] = "phone";
GridView1.HeaderRow.Cells[3].Attributes["data-hide"] = "phone";

//Adds THEAD and TBODY to GridView.
GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;

这是我通过数据网格（在 VB.NET 中）进行的尝试，但没有成功：

'Attribute to show the Plus Minus Button.
e.Item.Cells(0).Attributes("data-class") = "expand"

'Attribute to hide column in Phone.
e.Item.Cells(2).Attributes("data-hide") = "phone"

'Adds THEAD and TBODY to GridView.
e.Item.TableSection = TableRowSection.TableHeader

根据我的阅读，GridView 基本上是具有额外属性的超级 DataGrid，因此我怀疑我是否真的可以使用 DataGrid 实现 FooTable 插件。任何帮助都会很棒，我不指望任何人能帮助我解决这个问题，只是朝着正确的方向前进。

Answer 1

即使使用 DataGrid 实现 FooTable 插件比使用 GridView 更难，但这并不意味着不可能。如果你读了一点 FooTable introduction page，你就会意识到这个插件与 HTML table 元素一起工作。因此，无论您使用何种技术控制，只要它生成 table，它就应该可以工作。

上面示例中建议的代码与 Gridview 控件一起使用，呈现以下内容 table:

<table class="footable" cellspacing="0" rules="all" border="1" id="MainContent_GridView1" style="border-collapse:collapse;max-width: 500px">
    <thead>
        <tr>
            <th data-class="expand" scope="col">Customer Name</th><th scope="col">Customer Id</th><th data-hide="phone" scope="col">Country</th><th data-hide="phone" scope="col">Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John Hammond</td><td>1</td><td>United States</td><td>70000</td>
        </tr>
        <tr>
            <td>Mudassar Khan</td><td>2</td><td>India</td><td>40000</td>
        </tr>
        <tr>
            <td>Suzanne Mathews</td><td>3</td><td>France</td><td>30000</td>
        </tr>
        <tr>
            <td>Robert Schidner</td><td>4</td><td>Russia</td><td>50000</td>
        </tr>
    </tbody>
</table>

所以让我们尝试使用 DataGrid 呈现相同的代码。在您的 aspx 页面中应该与此类似：

<asp:DataGrid runat="server" ID="dataGrid1" ShowHeader="true" AutoGenerateColumns="false" UseAccessibleHeader="true">
    <Columns>
        <asp:BoundColumn DataField="Name" HeaderText="Customer Name" />
        <asp:BoundColumn DataField="Id" HeaderText="Customer Id" />
        <asp:BoundColumn DataField="Country" HeaderText="Country" />
        <asp:BoundColumn DataField="Salary" HeaderText="Salary" />
    </Columns>
</asp:DataGrid>

DataGrid 必须具有 asp:BoundColumns 而不是 asp:BoundFields（在 GridView 中）。此外，请确保 ShowHeader="true"，否则 DataGrid 不会生成您的 header。 UseAccessibleHeader="true" 也很重要，因为没有它，您的 header 单元格将生成为 tr 而不是 th.

实施 header 属性（例如 data-class= "expand"）的主要困难是访问您的 header。但这是可行的。在后面的代码中，在 Page_Load 事件中，添加以下代码（在 DataGrid 的 DataBind 之后）：

' That's how you can access to your header
Dim dataGridHeader As DataGridItem = dataGrid1.Controls(0).Controls(0)

' I fyou need to access to your footer, do the following:
' MyGrid.Controls(0).Controls(MyGrid.Controls(0).Con trols.Count - 1)

dataGridHeader.Cells(0).Attributes("data-class") = "expand"

'Attribute to hide column in Phone.
dataGridHeader.Cells(2).Attributes("data-hide") = "phone"
dataGridHeader.Cells(3).Attributes("data-hide") = "phone"

' Make the header row part of a `thead` instead of `tbody` (by default)
dataGridHeader.TableSection = TableRowSection.TableHeader

如果您按照所有说明进行操作，您应该得到与之前指定的相同的 HTML Table。请记住，无论您尝试使用 FooTable 插件做什么，DataGrid 和 GridView 一样都是可能的，因为两者都会生成 HTML Table, 插件针对的元素。

将 FooTable 插件与 ASP.NET DataGrid 一起使用

Using the FooTable plugin with the ASP.NET DataGrid

vb.net

asp.net

datagrid

gridview

footable