使用 JQuery 或 JavaScript 将 Gridview 转换为 Datatable

Question

我正在尝试使用 javascript 或 JQuery 将网格视图转换为 DataTable。可以请一些人帮助这个请求。请注意，由于服务器限制，我无法使用 AJAX。请注意，我有模板字段和绑定字段作为网格列。

<asp:GridView ID="grdcloneProgoffers" runat="server" CssClass="mGrid" Width="98%" AutoGenerateColumns="false"
    Visible="true" >
    <Columns>
        <asp:TemplateField HeaderText="Offerid" Visible="false">
            <ItemTemplate>
                <asp:Label ID="lblOfferId" runat="server" Text='<%#Eval("OFFER_ID") %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Offer Name">
            <ItemTemplate>
                <asp:Label ID="lblOfferName" runat="server" Text='<%#Eval("OFFER_NAME") %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="PS-R" HeaderStyle-Width="5%">
            <ItemTemplate>
                <asp:Label ID="lblPreSelected" runat="server" Text='<%#Eval("PRE_SELECTED_REQ") %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="PS-O" HeaderStyle-Width="5%">
            <ItemTemplate>
                <asp:Label ID="lblPreSelectedNot" runat="server" Text='<%#Eval("PRE_SELECTED_NOT_REQ") %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="O">
            <ItemTemplate>
                <asp:Label ID="lblOptional" runat="server" Text='<%#Eval("OPTIONAL") %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="Eligibility_GM" HeaderText="Eligibility GM" />
        <asp:BoundField DataField="Eligibility_EE" HeaderText="Eligibility EE" />
        <asp:BoundField DataField="Eligibility_WD" HeaderText="Eligibility WD" />
        <asp:BoundField DataField="Eligibility_MDUBULK" HeaderText="Eligibility MDUBULK" />
        <asp:BoundField DataField="SERVICE_CODE" HeaderText="Service Code" />
        <asp:BoundField DataField="PRICE_CODE" HeaderText="Price Code" />
        <asp:BoundField DataField="OFFER_STATE" HeaderText="Staged State" />
        <asp:BoundField DataField="Compliance_GM" HeaderText="Compliance GM" />
        <asp:BoundField DataField="Compliance_EE" HeaderText="Compliance EE" />
        <asp:BoundField DataField="Compliance_WD" HeaderText="Compliance WD" />
        <asp:BoundField DataField="Compliance_MDUBULK" HeaderText="Compliance MDUBULK" />
        <%-- <asp:TemplateField HeaderText="Tags">
                                    <ItemTemplate>
                                        <asp:Label ID="lbltags" runat="server"></asp:Label>
                                    </ItemTemplate>
                               </asp:TemplateField>--%>
    </Columns>
    <HeaderStyle CssClass="header" Height="20px" />

Answer 1

您对我上面问题的回答仍然不是很清楚，所以我将在这里回答您可能会问的两件事：

GridViews 和 DataTables（.NET 的）不是“可转换的”，因为它们有不同的用途。 GridView 可以使用DataTable 中的数据将其显示在屏幕上。例如，您可以这样做：

DataTable dt = GetDataFromDataBase();
GridView.DataSource=dt; // dt contains rows coming from the database
GridView.DataBind(); //Gridview takes the rows from the datatable and creates a nice HTML table for displaying purposes, applying css, etc.

如果您指的是datatables plugin（我在这个帖子的问题中提到的那个），那么您需要做的就是：

protected void Page_Load(object sender, EventArgs e)
{
    grdcloneProgoffers.PreRender += new EventHandler(grdcloneProgoffers_PreRender);
}

void grdcloneProgoffers_PreRender(object sender, EventArgs e)
{
  if (grdcloneProgoffers.Rows.Count > 0)
  {
    grdcloneProgoffers.UseAccessibleHeader = true;
    grdcloneProgoffers.HeaderRow.TableSection = TableRowSection.TableHeader;
   }
}

上述代码的作用是强制 GridView 在生成的 HTML 表中绘制 THEAD 和 TBODY 部分，因为 datatables 插件需要这些元素存在。

完成后，您只需在 javascript 端执行此操作：

$(function(){

    $('#<%=grdcloneProgoffers.ClientID%>').dataTable();
});