Question

我正在构建一个封装子gridview的GridView控件。子gridview包含div标签，当用户在父网格视图中选择一行时显示该标签。但是，即使内容被隐藏，即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>

除了主网格视图中的额外列之外，它可以正常工作。

为了完整起见，这里是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>
...

...并将javascript中的显示从block更改为table-row：

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

Answer 2

您的<ItemTemplate>：

看起来有不平衡的标签

<ItemTemplate >
  </td></tr> <<---- These look unbalanced
    <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>

Answer 3

我没有看到这些tr，td代码的开头标记：

...
<ItemTemplate >
      </td></tr>
...

刚刚检查过，文章的作者似乎在生成的页面源中遇到了同样的问题。

GridView，Child GridView，额外的列不会消失？

3 个答案: