0

我目前正在为我工​​作的公司重新设计一个应用程序。所有数据都通过 DataGrid 显示，这很好，除非我尝试合并一个名为“Footable”的 JQuery 库，以便在较小的设备上使所有网格崩溃，如此处所述。在本教程中，它使用 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 插件。任何帮助都会很棒，我不指望任何人能通过这件事牵着我的手，只是朝着正确的方向前进。

4

1 回答 1

1

即使使用 DataGrid 实现 FooTable 插件比使用 GridView 更难，但这并不意味着它不可能。如果您稍微阅读一下FooTable 介绍页面，您就会意识到这个插件可以与 HTMLtable元素一起使用。因此，无论您使用何种技术使用的控件，只要它生成一个表格，它就应该可以工作。

上面示例中提出的与 Gridview 控件一起使用的代码呈现下表：

<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 不会生成您的标题。UseAccessibleHeader="true"也很重要，因为没有它，您的标题单元格将生成为tr而不是th.

实现标头属性（例如 data-class="expand"）的主要困难是访问您的标头。但这是可行的。在您的代码后面，在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 表格。请记住，无论您尝试使用 FooTable 插件做什么，DataGrid 都尽可能与 GridView 一样，因为两者都生成一个 HTML 表格，即插件针对的元素。

于 2015-06-11T14:32:24.137 回答