使用JQuery或JavaScript将Gridview转换为Datatable

时间:2013-05-15 20:27:49

标签: javascript jquery gridview datatable

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

<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" />

1 个答案:

答案 0 :(得分:0)

您对上述问题的回答仍然不是很明确,所以我只想回答您在此处提出的两件事:

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();
});