如何添加中继器以在网格视图中获取答案

【问题标题】：how to add repeater to get th in grid view如何添加中继器以在网格视图中获取
【发布时间】：2014-11-26 06:40:13
【问题描述】：

我想通过 gridview 数据创建一个表，但 jQuery 代码需要 <th>，它不会在 gridview 中定义我想使用中继器添加。
这是我的代码

<body>
    <form id="form1" runat="server">
        <div>
            <asp:GridView ID="gdSource" runat="server" AutoGenerateColumns="False" OnPreRender="gdSource_PreRender" Width="202px">
                <Columns>
                    <asp:TemplateField HeaderText="EmployeeID">
                        <EditItemTemplate>
                            <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("EmployeeName") %>'></asp:TextBox>
                        </EditItemTemplate>
                        <ItemTemplate>
                            <asp:Label ID="Label2" runat="server" Text='<%# Bind("EmployeeID") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="January">
                        <EditItemTemplate>
                            <asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("January") %>'></asp:TextBox>
                        </EditItemTemplate>
                        <ItemTemplate>
                            <asp:Label ID="Label2" runat="server" Text='<%# Bind("January") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Febrarury">
                        <EditItemTemplate>
                            <asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind("Febrarury") %>'></asp:TextBox>
                        </EditItemTemplate>
                        <ItemTemplate>
                            <asp:Label ID="Label3" runat="server" Text='<%# Bind("Febrarury") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="March">
                        <EditItemTemplate>
                            <asp:TextBox ID="TextBox4" runat="server" Text='<%# Bind("March") %>'></asp:TextBox>
                        </EditItemTemplate>
                        <ItemTemplate>
                            <asp:Label ID="Label4" runat="server" Text='<%# Bind("March") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
            <div id="target">
            </div>
            <script type="text/javascript">
                $(document).ready(function () {
                    $('#<%=gdSource.ClientID%>').tableBarChart('#target', '', false);
                });
            </script>
        </div>
    </form>
</body>
<link href="TableBarChart.css" rel="stylesheet" />
<script src="Scripts/WebForms/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="Scripts/WebForms/TableBarCharts.js"></script>

这是我的 jQuery 文件。

在 html 中有一个代码，我想使用中继器在 gridview 中创建它。

<table cellspacing="0" rules="all" border="1" id="gdSource" style="border-collapse: collapse;">
    <caption>Employee Record</caption>
    <thead>
        <tr>
            <th scope="col">EmployeeID</th>
            <th scope="col">January</th>
            <th scope="col">Febrarury</th>
            <th scope="col">March</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>
                <span id="gdSource_Label2_0">1</span>
            </th>
            <td>
                <span id="Span1">200</span>
            </td>
            <td>
                <span id="gdSource_Label3_0">100</span>
            </td>
            <td>
                <span id="gdSource_Label4_0">300</span>
            </td>
        </tr>
        <tr>
            <th>
                <span id="gdSource_Label2_1">2</span>
            </th>
            <td>
                <span id="Span2">100</span>
            </td>
            <td>
                <span id="gdSource_Label3_1">200</span>
            </td>
            <td>
                <span id="gdSource_Label4_1">200</span>
            </td>
        </tr>
    </tbody>
</table>
</div>
<div id="target"> </div>                        
<script type="text/javascript">
    $(document).ready(function () {
        $('#gdSource').tableBarChart('#target', '', true);
    });
</script>
</div>
</form>

我想使用Repeater plz帮助创建<th>，如griview中的html页面所示。

【问题讨论】：

ASP.NET GridView 仅呈现 HTML 表格！

标签： jquery css asp.net gridview

【解决方案1】：

如果您要使用中继器控件，那么格式化表格有什么大不了的。你可以很容易地格式化。像这样：- `

<asp:Repeater ID="repBanner" runat="server">
        <HeaderTemplate>
            <table>
<tr>
<th>Name</th>
<th>Email</th>
</tr>
</table>
        </HeaderTemplate>
        <ItemTemplate>
            <tr>
                <td>
                    <asp:Label runat="server" Text="XYZ" ID="lblName" />
                </td>
                <td>
                     <asp:Label runat="server" Text="Email@gmail.com" ID="lblEmail" />
                </td>
            </tr>
        </ItemTemplate>
    </asp:Repeater>

【讨论】：

【解决方案2】：

尝试在模板字段中使用标题模板：

<asp:TemplateField>
    <HeaderTemplate> EmployeeID </HeaderTemplate>
    <ItemTemplate> YOUR_CONTROLS </ItemTemplate>
    <EditItemTemplate> YOUR_CONTROLS </EditItemTemplate>
</asp:TemplateField>

【讨论】：