最近遇到這麼一個需求

gridview中原有7個欄位
column1  column2  column3  column4  column5  column6  column7
xxx          xxx         xxx          xxx          xxx          xxx          xxx   
現在需要新增加4個欄位，由於橫向排列會比較長，所以希望可以把新增加的4個欄位放在原有欄位的下面，增加一個控制顯示/隱藏的按鈕來控制新行。
就是這個樣子
column1  column2  column3  column4  column5  column6  column7 
xxx          xxx          xxx          xxx          xxx          xxx          xxx        button
column8:yyy        column9:yyy        column10:yyy      column11:yyy 

由於新的4個欄位需要顯示名稱，所以可能需要合併該行，重新排列4個欄位的顯示

由於gridview生成的是表格，所以要換行處理起來比較困難。

如果換做datalist或者repeater，有了template的存在，就沒有什麼問題了。

或者，可以把gridview只保留一列，所有的東西都定義在一個templatefield裡面，也就相當於repeater，實現起來也不難，只是標題和內容的對齊要控制。

google，百度，找了好久，沒有什麼結果。

CSDN上發了帖子，也是建議不要用gridview的。無奈，繼續google。

意外發現，已經有人給出程式碼了。

嗯，正是我想要的。

關鍵程式碼：

 <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="CustomerID" DataSourceID="SqlDataSource1" OnRowDataBound="gv_RowDataBound" AllowPaging="True" PageSize="20" > <HeaderStyle CssClass="dataTable" /> <RowStyle CssClass="dataTable" /> <AlternatingRowStyle CssClass="dataTableAlt" /> <Columns> <asp:TemplateField> <ItemTemplate> <a href="javascript:switchViews('div<%# Eval(" mce_href="javascript:switchViews('div&lt;%# Eval("CustomerID") %>', 'one');"> <img id="imgdiv<%# Eval("CustomerID") %>" alt="Click to show/hide orders" border="0" src="Images/expand_button_white.jpg" /> </a> </ItemTemplate> <AlternatingItemTemplate> <a href="javascript:switchViews('div<%# Eval(" mce_href="javascript:switchViews('div&lt;%# Eval("CustomerID") %>', 'alt');"> <img id="imgdiv<%# Eval("CustomerID") %>" alt="Click to show/hide orders" border="0" src="Images/expand_button_white_alt.jpg" /> </a> </AlternatingItemTemplate> </asp:TemplateField> <asp:BoundField DataField="CompanyName" HeaderText="CompanyName" SortExpression="CompanyName" /> <asp:BoundField DataField="ContactName" HeaderText="ContactName" SortExpression="ContactName" /> <asp:BoundField DataField="Address" HeaderText="Address" SortExpression="Address" /> <asp:BoundField DataField="City" HeaderText="City" SortExpression="City" /> <asp:BoundField DataField="PostalCode" HeaderText="PostalCode" SortExpression="PostalCode" /> <asp:BoundField DataField="Phone" HeaderText="Phone" SortExpression="Phone" /> <asp:TemplateField> <ItemTemplate> </td></tr> <tr> <td colspan="100%"> <div id="div<%# Eval("CustomerID") %>" style="display:none;position:relative;left:25px;" > <asp:GridView ID="GridView2" runat="server" Width="80%" AutoGenerateColumns="false" DataKeyNames="OrderID" EmptyDataText="No orders for this customer." > <HeaderStyle CssClass="dataTable" /> <AlternatingRowStyle CssClass="dataTableAlt" /> <RowStyle CssClass="dataTable" /> <Columns> <asp:BoundField DataField="OrderDate" HeaderText="Order Date" DataFormatString="{0:MMM-dd-yyyy}" HtmlEncode="False" /> <asp:BoundField DataField="ShippedDate" HeaderText="Shipped Date" DataFormatString="{0:MMM-dd-yyyy}" HtmlEncode="False" /> <asp:BoundField DataField="ShipCity" HeaderText="Shipped To" /> </Columns> </asp:GridView> </div> </td> </tr> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView>

注意27行，這裡做了一個inject，結束掉一行並且建立一個新行。這樣，就可以將一行記錄顯示為兩行，而又可以像操作一行記錄那樣操作改行記錄和控制元件。

需要注意的是，結束掉的行的末尾，會多出來一個空列，會佔用一點空間，需要把列隱藏掉。

回頭想想，好像很久以前的時候，組裡的老大曾經講過這個東西。不常用到，忘了。

附上原作者的原文：

Author: UltimateRengan 16 Jul 2008 Member Level: Diamond Rating: Points: 1 Live example:- http://www.giswiz.com/nested_gridview_dropdown/ I have created an extremely simple nested GridView that uses some javascript to create the dropdown effect. I use the nested GridView to display relational data to the rows in the main GridView. I am hoping to get replies with links to other examples of how to display relational data with the GridViews and I wanted to help get this out to the community because it was so simple to implement. Most of all i would like to hear about how this can be improved upon... What makes this different is that the nested GridView here is displayed beneath the corresponding row as opposed to it being displayed in the last column of the main GridView as in all the examples I've seen. To get this effect I simply injected some HTML (starting a line 29) to end the current row and create a new row. The nested GridView is then placed inside a <DIV> tag where the display of that <DIV> is controled by Javascript. Each <DIV> is assigned a unique ID that corresponds to the main GridView's rowID and that is passed to the javascript to control the opening and closing of the nested GridView. I have even created a double nested GridView where a third GridView is nested inside the first nested GridView. See code for details or post a question. I created this entirely from scratch and did not see another example of it after searching Google for 30 minutes. GridView Code: <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="CustomerID" DataSourceID="SqlDataSource1" OnRowDataBound="gv_RowDataBound" AllowPaging="True" PageSize="20" > <HeaderStyle CssClass="dataTable" /> <RowStyle CssClass="dataTable" /> <AlternatingRowStyle CssClass="dataTableAlt" /> <Columns> <asp:TemplateField> <ItemTemplate> <a href="javascript:switchViews('div<%# Eval(" mce_href="javascript:switchViews('div&lt;%# Eval("CustomerID") %>', 'one');"> <img id="imgdiv<%# Eval("CustomerID") %>" alt="Click to show/hide orders" border="0" src="Images/expand_button_white.jpg" /> </a> </ItemTemplate> <AlternatingItemTemplate> <a href="javascript:switchViews('div<%# Eval(" mce_href="javascript:switchViews('div&lt;%# Eval("CustomerID") %>', 'alt');"> <img id="imgdiv<%# Eval("CustomerID") %>" alt="Click to show/hide orders" border="0" src="Images/expand_button_white_alt.jpg" /> </a> </AlternatingItemTemplate> </asp:TemplateField> <asp:BoundField DataField="CompanyName" HeaderText="CompanyName" SortExpression="CompanyName" /> <asp:BoundField DataField="ContactName" HeaderText="ContactName" SortExpression="ContactName" /> <asp:BoundField DataField="Address" HeaderText="Address" SortExpression="Address" /> <asp:BoundField DataField="City" HeaderText="City" SortExpression="City" /> <asp:BoundField DataField="PostalCode" HeaderText="PostalCode" SortExpression="PostalCode" /> <asp:BoundField DataField="Phone" HeaderText="Phone" SortExpression="Phone" /> <asp:TemplateField> <ItemTemplate> </td></tr> <tr> <td colspan="100%"> <div id="div<%# Eval("CustomerID") %>" style="display:none;position:relative;left:25px;" > <asp:GridView ID="GridView2" runat="server" Width="80%" AutoGenerateColumns="false" DataKeyNames="OrderID" EmptyDataText="No orders for this customer." > <HeaderStyle CssClass="dataTable" /> <AlternatingRowStyle CssClass="dataTableAlt" /> <RowStyle CssClass="dataTable" /> <Columns> <asp:BoundField DataField="OrderDate" HeaderText="Order Date" DataFormatString="{0:MMM-dd-yyyy}" HtmlEncode="False" /> <asp:BoundField DataField="ShippedDate" HeaderText="Shipped Date" DataFormatString="{0:MMM-dd-yyyy}" HtmlEncode="False" /> <asp:BoundField DataField="ShipCity" HeaderText="Shipped To" /> </Columns> </asp:GridView> </div> </td> </tr> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString2 %>" SelectCommand="SELECT [CustomerID], [CompanyName], [ContactName], [Address], [City], [PostalCode], [Phone] FROM [Customers]"> </asp:SqlDataSource> The code to populate the nested GridView that is called on the main GridView's OnRowDataBound event (this code readily available from one of the many websites demonstrating how to do a nested GridView): Protected Sub gv_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) If e.Row.RowType = DataControlRowType.DataRow Then Dim gv As GridView = e.Row.FindControl("GridView2") Dim dbSrc As New SqlDataSource dbSrc.ConnectionString = ConfigurationManager.ConnectionStrings("NorthwindConnectionString2").ConnectionString dbSrc.SelectCommand = "SELECT * FROM Orders WHERE CustomerID = '" & _ e.Row.DataItem("CustomerID").ToString & "' ORDER BY OrderDate" gv.DataSource = dbSrc gv.DataBind() End If End Sub Here is the simple javascript to open and close the nested GridView: function switchViews(obj,row) { var div = document.getElementById(obj); var img = document.getElementById('img' + obj); if (div.style.display=="none") { div.style.display = "inline"; if (row=='alt') { img.src="Images/expand_button_white_alt_down.jpg" mce_src="Images/expand_button_white_alt_down.jpg"; } else { img.src="Images/Expand_Button_white_Down.jpg" mce_src="Images/Expand_Button_white_Down.jpg"; } img.alt = "Close to view other customers"; } else { div.style.display = "none"; if (row=='alt') { img.src="Images/Expand_button_white_alt.jpg" mce_src="Images/Expand_button_white_alt.jpg"; } else { img.src="Images/Expand_button_white.jpg" mce_src="Images/Expand_button_white.jpg"; } img.alt = "Expand to show orders"; } } Advance Happy Diwali SAP B1