GridView，Child GridView，多余的列不会消失吗? [英] GridView, Child GridView, extra column won't disappear?

问题描述

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

I'm building a GridView control which encapsulates a child gridview. The child gridview holds a div tag which is displayed when the user selects a row in the parent gridview. However, even though the contents is hidden i.e. the div tag, an extra column is added - how do I get rid of the extra column. In the tutorial it states that by adding a </td></td> and starting a new row <tr> this should happen but it does (I also noticed that the author turned off gridlines so my assumption is that he in fact has this problem also). Here is the gridview, oh and I set the visible state of the itemtemplate to 'true' but then the javascript could (not) find it.

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

除了主网格视图中的多余列之外，它都可以正常工作.

Apart from the extra column in the master gridview it works fine.

仅出于完整性考虑，以下是原始文章(针对由于某些原因，它不喜欢我的<a href>标签，因此它是复制并粘贴的.)

Just for completeness, here is a to the original article (for some reason it didn't like my <a href> tag so it's copy and paste).

推荐答案

要摆脱多余的列，只需将其CSS样式设置为display: none.您可以通过将CssClass应用于包含嵌套网格的TemplateField来实现:

To get rid of the extra column, just set its css style to display: none. You can do this by applying a CssClass to the TemplateField containing the nested grid:

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

这是我使用的CssClass的定义:

Here is the definition of the CssClass I used:

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

注意:标记仍将保留在html中，但至少不会显示.
经过IE 8.0，Google Chrome 2.0和Opera 10.0的测试

Note: the markup will still be in the html but at least it won't be visible.
Tested under IE 8.0, Google Chrome 2.0 and Opera 10.0

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

Update: To eliminate the double border, just put the id and the style on the <tr> instead of the <div>:

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

...，然后将javascript中的显示从block更改为table-row:

... and change the display in the javascript from block to table-row:

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

这篇关于GridView，Child GridView，多余的列不会消失吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！