gridview如何将一行记录显示为两行
2009-12-24 16:00
267 查看
最近遇到这么一个需求
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/
嗯,正是我想要的。
关键代码:
1 <asp:GridView ID="GridView1" runat="server"
2 AutoGenerateColumns="False" DataKeyNames="CustomerID"
3 DataSourceID="SqlDataSource1" OnRowDataBound="gv_RowDataBound"
4 AllowPaging="True" PageSize="20" >
5 <HeaderStyle CssClass="dataTable" />
6 <RowStyle CssClass="dataTable" />
7 <AlternatingRowStyle CssClass="dataTableAlt" />
8 <Columns>
9 <asp:TemplateField>
10 <ItemTemplate>
11 <a href="javascript:switchViews('div<%# Eval(" mce_href="javascript:switchViews('div<%# Eval("CustomerID") %>', 'one');">
12 <img id="imgdiv<%# Eval("CustomerID") %>" alt="Click to show/hide orders" border="0" src="Images/expand_button_white.jpg" />
13 </a>
14 </ItemTemplate>
15 <AlternatingItemTemplate>
16 <a href="javascript:switchViews('div<%# Eval(" mce_href="javascript:switchViews('div<%# Eval("CustomerID") %>', 'alt');">
17 <img id="imgdiv<%# Eval("CustomerID") %>" alt="Click to show/hide orders" border="0" src="Images/expand_button_white_alt.jpg" /> </a>
18 </AlternatingItemTemplate>
19 </asp:TemplateField>
20 <asp:BoundField DataField="CompanyName" HeaderText="CompanyName" SortExpression="CompanyName" />
21 <asp:BoundField DataField="ContactName" HeaderText="ContactName" SortExpression="ContactName" />
22 <asp:BoundField DataField="Address" HeaderText="Address" SortExpression="Address" />
23 <asp:BoundField DataField="City" HeaderText="City" SortExpression="City" /> <asp:BoundField DataField="PostalCode" HeaderText="PostalCode" SortExpression="PostalCode" />
24 <asp:BoundField DataField="Phone" HeaderText="Phone" SortExpression="Phone" />
25 <asp:TemplateField>
26 <ItemTemplate>
27 </td></tr>
28 <tr>
29 <td colspan="100%">
30 <div id="div<%# Eval("CustomerID") %>" style="display:none;position:relative;left:25px;" >
31 <asp:GridView ID="GridView2" runat="server" Width="80%"
32 AutoGenerateColumns="false" DataKeyNames="OrderID"
33 EmptyDataText="No orders for this customer." >
34 <HeaderStyle CssClass="dataTable" />
35 <AlternatingRowStyle CssClass="dataTableAlt" />
36 <RowStyle CssClass="dataTable" />
37 <Columns>
38 <asp:BoundField DataField="OrderDate" HeaderText="Order Date" DataFormatString="{0:MMM-dd-yyyy}" HtmlEncode="False" />
39 <asp:BoundField DataField="ShippedDate" HeaderText="Shipped Date" DataFormatString="{0:MMM-dd-yyyy}" HtmlEncode="False" />
40 <asp:BoundField DataField="ShipCity" HeaderText="Shipped To" />
41 </Columns>
42 </asp:GridView>
43 </div>
44 </td>
45 </tr>
46 </ItemTemplate>
47 </asp:TemplateField>
48 </Columns>
49 </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<%# 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<%# 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
某同学提供了一个不错的东西:http://demos.devexpress.com/ASPxGridViewDemos/Columns/CustomizationWindow.aspx
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/
嗯,正是我想要的。
关键代码:
1 <asp:GridView ID="GridView1" runat="server"
2 AutoGenerateColumns="False" DataKeyNames="CustomerID"
3 DataSourceID="SqlDataSource1" OnRowDataBound="gv_RowDataBound"
4 AllowPaging="True" PageSize="20" >
5 <HeaderStyle CssClass="dataTable" />
6 <RowStyle CssClass="dataTable" />
7 <AlternatingRowStyle CssClass="dataTableAlt" />
8 <Columns>
9 <asp:TemplateField>
10 <ItemTemplate>
11 <a href="javascript:switchViews('div<%# Eval(" mce_href="javascript:switchViews('div<%# Eval("CustomerID") %>', 'one');">
12 <img id="imgdiv<%# Eval("CustomerID") %>" alt="Click to show/hide orders" border="0" src="Images/expand_button_white.jpg" />
13 </a>
14 </ItemTemplate>
15 <AlternatingItemTemplate>
16 <a href="javascript:switchViews('div<%# Eval(" mce_href="javascript:switchViews('div<%# Eval("CustomerID") %>', 'alt');">
17 <img id="imgdiv<%# Eval("CustomerID") %>" alt="Click to show/hide orders" border="0" src="Images/expand_button_white_alt.jpg" /> </a>
18 </AlternatingItemTemplate>
19 </asp:TemplateField>
20 <asp:BoundField DataField="CompanyName" HeaderText="CompanyName" SortExpression="CompanyName" />
21 <asp:BoundField DataField="ContactName" HeaderText="ContactName" SortExpression="ContactName" />
22 <asp:BoundField DataField="Address" HeaderText="Address" SortExpression="Address" />
23 <asp:BoundField DataField="City" HeaderText="City" SortExpression="City" /> <asp:BoundField DataField="PostalCode" HeaderText="PostalCode" SortExpression="PostalCode" />
24 <asp:BoundField DataField="Phone" HeaderText="Phone" SortExpression="Phone" />
25 <asp:TemplateField>
26 <ItemTemplate>
27 </td></tr>
28 <tr>
29 <td colspan="100%">
30 <div id="div<%# Eval("CustomerID") %>" style="display:none;position:relative;left:25px;" >
31 <asp:GridView ID="GridView2" runat="server" Width="80%"
32 AutoGenerateColumns="false" DataKeyNames="OrderID"
33 EmptyDataText="No orders for this customer." >
34 <HeaderStyle CssClass="dataTable" />
35 <AlternatingRowStyle CssClass="dataTableAlt" />
36 <RowStyle CssClass="dataTable" />
37 <Columns>
38 <asp:BoundField DataField="OrderDate" HeaderText="Order Date" DataFormatString="{0:MMM-dd-yyyy}" HtmlEncode="False" />
39 <asp:BoundField DataField="ShippedDate" HeaderText="Shipped Date" DataFormatString="{0:MMM-dd-yyyy}" HtmlEncode="False" />
40 <asp:BoundField DataField="ShipCity" HeaderText="Shipped To" />
41 </Columns>
42 </asp:GridView>
43 </div>
44 </td>
45 </tr>
46 </ItemTemplate>
47 </asp:TemplateField>
48 </Columns>
49 </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<%# 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<%# 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
某同学提供了一个不错的东西:http://demos.devexpress.com/ASPxGridViewDemos/Columns/CustomizationWindow.aspx
相关文章推荐
- gridview如何将一行记录显示为两行
- 如何使gridView中的每条记录分两行显示
- ASP.net中GridView中增加一行记录并默认显示为编辑状态
- 如何将子表记录和主表记录在同一行显示
- 如何实现两行内容增多和一行内容增多,多余的内容显示省略号
- SQLServer中如何将一个字段的多个记录值合在一行显示
- 如何实现图片和两行文字在一行显示
- 导入excel 文件解析,一行数据,有一列分两行显示,解析时如何 合为一行?
- 如何在Gridview绑定的记录前添加一列显示序号
- 不修改 GridView的HeaderText,其中数据库中的头标题是:custName,custId.这样的字符同样显示在GridView中,应该如何更改才能让GridView的头一行显示:姓名,编号而不是显示custName,custId
- C#.net 添加一行记录,在gridview中显示一条记录。添加多条记录,在gridview中显示多条记录
- 如何使Label显示时,一行顶部居中,两行靠左显示----董鑫
- SQLServer中如何将一个字段的多个记录值合在一行显示
- Struts迭代问题解决:如何在一行显示多个记录(同一字段)
- 无记录时显示gridview表头,并增加一行显示“没有记录”【绑定SqlDataSource控件时】
- SQLServer中如何将一个字段的多个记录值合在一行显示
- Repeater在无数据记录时显示类似GridView空模板(EmptyDataTemplate)
- Android在ListView中嵌套一个GridView时只显示一行的原因及解决方法
- 如何使input双击时不显示历史记录
- ScrollView中嵌套GridView,ListView只显示一行的解决办法