c# - GridView, Child GridView, extra column不会消失？

Question

我正在构建一个封装子 gridview 的 GridView 控件。子 gridview 包含一个 div 标签，当用户在父 gridview 中选择一行时显示该标签。但是，即使内容被隐藏，即 div 标签，也会添加一个额外的列 - 我如何摆脱额外的列。在教程中，它指出通过添加 </td></td>并开始新的一行 <tr>这应该发生但确实发生了(我还注意到作者关闭了网格线所以我的假设是他实际上也有这个问题)。这是 gridview，哦，我设置了 itemtemplate 的可见状态至 'true'但是 javascript 无法(无法)找到它。

<asp:GridView ID="GridView1" runat="server" AllowPaging="True" AllowSorting="True"
  AutoGenerateColumns="False" DataKeyNames="PublicationID" 
  DataSourceID="ObjectDataSource1" Width="467px" OnRowDataBound="GridView1_RowDataBound"
  Font-Names="Verdana" Font-Size="Small">
  <Columns>
    <asp:TemplateField>
      <ItemTemplate>
        <asp:CheckBox ID="PublicationSelector" runat="server" />
      </ItemTemplate>
    </asp:TemplateField>
    <asp:BoundField DataField="NameAbbrev" HeaderText="Publication Name" SortExpression="NameAbbrev" />
    <asp:BoundField DataField="City" HeaderText="City" SortExpression="City" />
    <asp:BoundField DataField="State" HeaderText="State" SortExpression="State" />
    <asp:TemplateField HeaderText="Owners">
      <ItemTemplate>
       <asp:Label ID="Owners" runat="server"></asp:Label>
      </ItemTemplate>
      <ItemStyle HorizontalAlign="Center" />
    </asp:TemplateField>
    <asp:BoundField DataField="Type" HeaderText="Type" SortExpression="Type" />
    <asp:TemplateField>
      <ItemTemplate >
      </td></tr>
        <tr>
          <td colspan="7">
            <div id="<%# Eval("PublicationID") %>" style="display: none; position: relative">
              <asp:GridView ID="GridView2_ABPubs" runat="server" AutoGenerateColumns="false" Width="100%"
                Font-Names="Verdana" Font-Size="small">
                <Columns>
                  <asp:BoundField DataField="NameAbbrev" HeaderText="Publication Name" SortExpression="NameAbbrev" />
                </Columns>
              </asp:GridView>
            </div>
          </td>
        </tr>
      </ItemTemplate>
    </asp:TemplateField>
  </Columns>
</asp:GridView>

除了主 GridView 中的额外列外，它工作正常。

为了完整起见，这里是 original article (出于某种原因，它不喜欢我的 <a href> 标签，所以它是复制和粘贴的)。

Answer 1

要去除多余的列，只需将其 css 样式设置为 display: none .您可以通过将 CssClass 应用于 TemplateField 来完成此操作包含嵌套网格:

<asp:TemplateField HeaderStyle-CssClass="hidden-column" ItemStyle-CssClass="hidden-column" FooterStyle-CssClass="hidden-column">

这是我使用的 CssClass 的定义:

<style type="text/css">
  .hidden-column {
    display: none;
  }
</style>

注意:标记仍将位于 html 中，但至少不会显示。
在 IE 8.0、Google Chrome 2.0 和 Opera 10.0 下测试

更新:要消除双边框，只需将 id 和样式放在 <tr> 上而不是 <div> :

<tr id="<%# Eval("PublicationID") %>" style="display: none; position: relative">
  <td colspan="7">
    <div>
...

... 并从 block 更改 javascript 中的显示至 table-row :

div.style.display = "table-row";  // not a div anymore!!