gridview如何将一行记录显示为两行

最近遇到这么一个需求

 

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。

意外发现，已经有人给出代码了。

google到的地址：http://www.dotnetspider.com/forum/159858-How-we-can-create-nested-gridview-asp-net.aspx

演示在这里：http://www.giswiz.com/nested_gridview_dropdown/

 

嗯，正是我想要的。

关键代码：

 <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 ThenDim gv As GridView = e.Row.FindControl("GridView2")Dim dbSrc As New SqlDataSourcedbSrc.ConnectionString = ConfigurationManager.ConnectionStrings("NorthwindConnectionString2").ConnectionStringdbSrc.SelectCommand = "SELECT * FROM Orders WHERE CustomerID = '" & _e.Row.DataItem("CustomerID").ToString & "' ORDER BY OrderDate"gv.DataSource = dbSrcgv.DataBind()End IfEnd SubHere 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 DiwaliSAP B1

 

某同学提供了一个不错的东西：http://demos.devexpress.com/ASPxGridViewDemos/Columns/CustomizationWindow.aspx