GridView 中如何实现，在多列的情况下，在每行下，添加一个可以展开/收缩的新的区域问题？

指间的风 2007-06-18 03:46:48

AJAX关于 CollapsiblePanel控件 的效果很好，可以在gridview 的每行里一个按钮
在每行下边加一个类似CollapsiblePanel控件实现的效果吗？
期待高手的解答？

需要实现的效果，在点击每行的按钮后，在点击行和下行之间出现一个可以区域，
用来显示或编辑信息。

这个问题，我是第二发，第一次由net_lover(【孟子E章】)
给我提供了一个 单列的嵌入如何收缩效果的方法。
方法 如下
http://dotnet.aspx.cc/article/2cb1c6d7-2b22-4655-8922-
2a8a053a66fa/read.aspx
http://dotnet.aspx.cc/article/f73eeaa9-2bdc-47fd-afd2-59f2fa4897f5/read.aspx
例子：
http://dotnet.aspx.cc/Exam/GridViewNested2.aspx

但是我想找个多列的，就是GridView 多列的情况下，在每行下边都做个
收缩/展开
...全文
1410 31 打赏 收藏 转发到动态 举报
写回复
用AI写文章
31 条回复
切换为时间正序
请发表友善的回复…
发表回复
指间的风 2007-06-25
  • 打赏
  • 举报
 回复
up
buxiangwei 2007-06-25
  • 打赏
  • 举报
 回复
up
shenpengbird 2007-06-25
  • 打赏
  • 举报
 回复
路过 狂顶
指间的风 2007-06-20
  • 打赏
  • 举报
 回复
yuxuanji 你的这个和我开头介绍的 net_lover(【孟子E章】)
的效果貌似很相似，不是我要的效果，但是还是谢谢了。
指间的风 2007-06-20
  • 打赏
  • 举报
 回复
呵呵，yuxuanji 你的代码，可以在给的详细点吗，这个很难跑起来啊
LutzMark 2007-06-20
  • 打赏
  • 举报
 回复
我做的项目里正好有这个，不过是在datagrid里，局部代码改改就可以了
<script type="text/javascript">
function showDetail(mainId,obj)
{ //alert(obj.src); alert(mainId);
if(obj.src.indexOf("minus.gif")!=-1 &&window.document.getElementById("ICON" + mainId + "showRow")==null){
return;
}

var ObjForm = window.document.getElementById("form1");
var hidText = document.getElementById("ctl00_MainContent_hidId_abc");


if(obj.src.indexOf("plus.gif")!=-1&&window.document.getElementById("ICON" + mainId + "showRow")==null){
//document.forms[0].hidId.value=mainId;
hidText.value = mainId;
//HierarGrid_toggleRow(document.all["ICON"+document.forms[0].hidId.value]);
HierarGrid_toggleRow(document.all["ICON"+ hidText.value]);
//document.forms[0].submit();
}else{
//document.forms[0].hidId.value=mainId;
hidText.value = mainId;
//HierarGrid_toggleRow(document.all["ICON"+document.forms[0].hidId.value]);
HierarGrid_toggleRow(document.all["ICON"+hidText.value]);

}

}
</script>

<asp:DataGrid ID="dgUser" runat="server" AllowSorting="True" AutoGenerateColumns="False"
DataKeyField="c_user_id" OnItemDataBound="dgUser_ItemDataBound">
<Columns>
<asp:TemplateColumn ItemStyle-BorderColor="#CFE2F8">
<ItemTemplate >
<!--主明细-->
<img alt="权限信息" id='ICON<%# DataBinder.Eval(Container.DataItem,"c_user_id ")%>' name="icon"
src='<%#GetImgSrc(DataBinder.Eval(Container.DataItem,"acount").ToString())%>'
onclick="showDetail('<%# DataBinder.Eval(Container.DataItem,"c_user_id ")%>',this);" />
<div id='Panel<%# DataBinder.Eval(Container.DataItem,"c_user_id ")%>' style="display: none">
<asp:Panel ID="pnlDetail" runat="server" EnableViewState="False" />
</div>
<!--主明细-->
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn HeaderText="选择" ItemStyle-BorderColor="#CFE2F8">
<ItemTemplate>
<asp:CheckBox ID="cbIsCheck" runat="server" />
</ItemTemplate>
<EditItemTemplate>
<asp:CheckBox ID="cbIsCheck" runat="server" Checked="True" />
</EditItemTemplate>
</asp:TemplateColumn>
<asp:BoundColumn HeaderText="用户名" DataField="C_USER_ID" ItemStyle-BorderColor="#CFE2F8"></asp:BoundColumn>
<asp:BoundColumn HeaderText="真实姓名" DataField="C_USER_NAME" ItemStyle-BorderColor="#CFE2F8"></asp:BoundColumn>
</Columns>
</asp:DataGrid>

后台： private void SetUserDetail(DataGridItem item)
{
if (item.ItemType == ListItemType.Item || item.ItemType == ListItemType.AlternatingItem)
{
int no = Utility.StrToInt(item.Cells[10].Text.ToString(), 0);
item.Cells[10].Text = no.ToString();
if (no > 0)
{
Panel pl = (Panel)item.Cells[0].FindControl("pnlDetail");
Control con = null;

con = LoadControl("..\\Templates\\UserDetail.ascx");
((UserDetail)con).MainID = dgUser.DataKeys[item.ItemIndex].ToString();
pl.Controls.Add(con);
}
}
}

protected void dgUser_ItemDataBound(object sender, DataGridItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
SetUserDetail(e.Item);
}
}
指间的风 2007-06-20
  • 打赏
  • 举报
 回复
haihua99 可以用Ajax实现在动态编辑
可以给点代码，或解决方案的介绍吗
指间的风 2007-06-20
  • 打赏
  • 举报
 回复
UP
指间的风 2007-06-19
  • 打赏
  • 举报
 回复
谁还有别的方法可以实现这个效果，给点建议好吗？
haihua99 2007-06-19
  • 打赏
  • 举报
 回复
可以用Ajax实现在动态编辑
jili810 2007-06-19
  • 打赏
  • 举报
 回复
关于第二点，显示+号展开详细信息，为显示的信息添加一个新的表关系，就可以实现了。这是最方便的设置了，代码写起来也很简单，为当前的信息表指定一个关系表，如果没有，可以进行自联。1和3都是很简单的，参考书上应该都有示例，第3点在DataGrid的属性里就可以设置。
指间的风 2007-06-19
  • 打赏
  • 举报
 回复
|-----------------------------|
| 编号| 姓名 | 年龄|性别|详细 |
| 1 | 小白 | 23 | 男 | + |
| 2 | 小蓝 | 34 | 女 | + |
| | | | | |
| | | | | |
| | | | | |
|-----------------------------|
| 1 2 3 |
|-----------------------------|
我现在需要的效果是: 1 上边列头可以，实现排序；
2 点每行的+号，可以在实现在入图，编号为1 2 的行之间展开一个编辑区域或一个显示区域，点在于，这个区域要和展开的两行宽度要对齐,而且展开的部分，看上去就是在 1 2 之间在添加了一列*;
3 点下边的 1 2 3 可以实现 分页

很直观的感觉就是在 正常的gridview 的每行下边+上一个可以 展开/收缩的区域，但是这个+起来貌似很麻烦，我被这个问题捆饶，郁闷啊ing~~~~~~~~~~~,谁有现成的办法，可以帮下啊。
指间的风 2007-06-19
  • 打赏
  • 举报
 回复
哪个到不是问题，主要是，我需要分页和排序的功能，这个做感觉就和GridView单行的效果差不多，无法实现外层，分页和排序的功能。
amandag 2007-06-18
  • 打赏
  • 举报
 回复
DataList嵌套GridView的要写和这个也差不多..

关键就是拼那些客户端脚本,没什么难度的

但我这个是把数据都读出来了,通过按钮去控制是否显示,效率不高
指间的风 2007-06-18
  • 打赏
  • 举报
 回复
sorry 看到了，是第二个DataList
luyesql 2007-06-18
  • 打赏
  • 举报
 回复
学习收藏了
指间的风 2007-06-18
  • 打赏
  • 举报
 回复
上边的代码里没有出现GridView啊~~晕
amandag 2007-06-18
  • 打赏
  • 举报
 回复
DataList嵌套GridView的找不到了,DataList嵌套DataList模拟收缩的请参考

//aspx
<%@ Page language="c#" Codebehind="DataListNesting.aspx.cs" AutoEventWireup="false" Inherits="DataListNesting" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>DataListNesting</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<script type="text/javascript">
function showorhide(showID,imageID){
if(document.getElementById(imageID).src == "http://localhost/WebDemo/images/down.gif")
{
if(document.getElementById(showID) != null)
document.getElementById(showID).style.display = "none";
document.getElementById(imageID).src = "http://localhost/WebDemo/images/up.gif";
}
else
{
if(document.getElementById(showID) != null)
document.getElementById(showID).style.display = "block";
document.getElementById(imageID).src = "http://localhost/WebDemo/images/down.gif";
}
// alert (showID);
return false;
}

</script>
</HEAD>
<body>
<form id="Form1" method="post" runat="server">
<asp:datalist id="DataList1" runat="server" DataKeyField="au_id" BorderWidth="1px" GridLines="Both"
CellPadding="4" BackColor="White" BorderStyle="None" BorderColor="#CC9966">
<SelectedItemStyle Font-Bold="True" ForeColor="#663399" BackColor="#FFCC66"></SelectedItemStyle>
<FooterStyle ForeColor="#330099" BackColor="#FFFFCC"></FooterStyle>
<ItemStyle ForeColor="#330099" BackColor="White"></ItemStyle>
<ItemTemplate>
au_id:
<asp:Label id=Label1 runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "au_id")%>'>
</asp:Label><BR>
au_lname:
<asp:Label id=Label2 runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "au_lname")%>'>
</asp:Label><BR>
<asp:ImageButton id="ibtnUpDown" runat="server" CommandName="ibtnUpDown" ImageUrl="images/up.gif"></asp:ImageButton><BR>
<asp:DataList id=DataList2 runat="server" BorderWidth="1px" GridLines="Both" CellPadding="4" BackColor="White" BorderStyle="None" BorderColor="#CC9966" DataKeyField="Title_id" DataSource='<%# GetTitleID(DataBinder.Eval(Container.DataItem, "au_id").ToString()) %>'>
<SelectedItemStyle Font-Bold="True" ForeColor="#663399" BackColor="#FFCC66"></SelectedItemStyle>
<FooterStyle ForeColor="#330099" BackColor="#FFFFCC"></FooterStyle>
<ItemStyle ForeColor="#330099" BackColor="White"></ItemStyle>
<ItemTemplate>
title_id:
<asp:Label id="Label4" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "title_id")%>'>
</asp:Label><BR>
</ItemTemplate>
<HeaderStyle Font-Bold="True" ForeColor="#FFFFCC" BackColor="#990000"></HeaderStyle>
</asp:DataList>
</ItemTemplate>
<HeaderStyle Font-Bold="True" ForeColor="#FFFFCC" BackColor="#990000"></HeaderStyle>
</asp:datalist></form>
</body>
</HTML>

//aspx.cs
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;

public class DataListNesting : System.Web.UI.Page
{
protected System.Web.UI.WebControls.DataList DataList1;

private void BindList()
{
SqlConnection cn = new SqlConnection("server=.;uid=sa;pwd=sa;database=pubs");
SqlDataAdapter da = new SqlDataAdapter("select au_id,au_lname from authors", cn);
DataSet ds = new DataSet();
cn.Open();
da.Fill(ds);
cn.Close();
DataList1.DataSource = ds;
DataList1.DataBind();
}

public DataView GetTitleID(string au_id)
{
SqlConnection cn = new SqlConnection("server=.;uid=sa;pwd=sa;database=pubs");
SqlDataAdapter da = new SqlDataAdapter("select au_id, title_id from titleauthor where au_id = @au_id", cn);
da.SelectCommand.Parameters.Add("@au_id", SqlDbType.VarChar, 11).Value = au_id;
DataSet ds = new DataSet();
cn.Open();
da.Fill(ds);
cn.Close();
return ds.Tables[0].DefaultView;
}

private void Page_Load(object sender, System.EventArgs e)
{
if(!IsPostBack)
{
BindList();
}
}

private void DataList1_ItemDataBound(object sender, System.Web.UI.WebControls.DataListItemEventArgs e)
{
ImageButton ibtnUpDown;
DataList DataList2;
if(e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
DataList2 = (DataList) e.Item.FindControl("DataList2");
if (DataList2 != null)
DataList2.Attributes.Add("style", "display:none");
ibtnUpDown = (ImageButton) e.Item.FindControl("ibtnUpDown");
if(ibtnUpDown != null)
ibtnUpDown.Attributes.Add("onclick","return showorhide('" + DataList2.ClientID + "','" + ibtnUpDown.ClientID + "');");
}
}

#region Web 窗体设计器生成的代码
override protected void OnInit(EventArgs e)
{
InitializeComponent();
base.OnInit(e);
}

private void InitializeComponent()
{
this.DataList1.ItemDataBound += new System.Web.UI.WebControls.DataListItemEventHandler(this.DataList1_ItemDataBound);
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion
}

指间的风 2007-06-18
  • 打赏
  • 举报
 回复
谢谢了。
amandag 2007-06-18
  • 打赏
  • 举报
 回复
==
加载更多回复（11）
flutter仿抖音首页面效果
本课程将使用 flutter 实现类似抖音首页面效果 通过 TabBar 与 TabBarView 结合使用 实现仿抖音APP首页面 关注 与推荐 页面左右滑动ui构建通过 PageView 来实现上下整屏切换效果使用 VideoPlayer组件实现视频播放功能通过 CircularProgressIndicator实现 有圆形背景样式的按钮浮在视频列表上方来实现控制视频的播放与暂停，并会综述一个 Align 在手机坐标系中的对齐方式通过 ClipOval、CachedNetworkImage 实现圆形头像通过 showModalBottomSheet 实现从页面底部上滑的弹框，结合 ListView 实现弹框显示评论列表功能通过 showModalBottomSheet 实现从页面底部上滑的弹框，结合 GridView 实现弹框显示九宫格列表功能
实现WinForm的DataGridView折叠功能(非原创,仅供收藏)
说明：本文章是在学习WinForm过程中收藏的代码,非原创代码,仅用于学习，贴出的代码基本与原文章无异,稍作修改就实现了困扰我一年多的功能,这里要向原文章博主致谢。原文链接：这里写链接内容C#的DataGridView是不支持分组以及折叠的,所以要实现此功能,就得扩展他的功能。 首先 添加扩展的Cell类/// /// 可分组的单元格 /// public cla
C# DataGridView添加可分组的单元格
自定义DataGridViewEx组件在DataGridView中添加类似于treeview的列，实现展开和折叠的效果。
android listview的item的展开与隐藏
实现listview展开与隐藏item的思路： 在item布局里面在写一个布局，使用布局方式根据需要来（如果需要展开的item在点击的item上面，就使用相对布局或者帧布局；如果需要展开的item在点击的item下面，就是线性布局的垂直布局）
玩转DevExpress.XtraGrid.view.gridview
（一）双击展开，收缩字表 Private Sub ExpandedChild(ByVal sender As DevExpress.XtraGrid.Views.Grid.GridView) '找出焦点行 Dim VIntPage As Integer = sender.FocusedRowHandle If sender.GetMasterRowExpanded(VIntP...
.NET社区

62,074

社区成员

669,028

社区内容

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见，支持健康理性的辩论和互动，反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧

+ 用AI写文章