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

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

<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中有一个代码，我想使用中继器在网格视图中创建。

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

我想使用中继器创建 html 页面中显示的<th>，请帮助。

如果您要使用中继器控件，那么格式化表格有什么大不了的。您可以非常轻松地格式化。喜欢这个：-`

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

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

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

相关内容

最新更新

热门标签：