一步一步教你在GridView中实现可收缩的面板

简介:

1、创建一个TestDB数据库:

添加一张表Table_1,并向其中添加一些数据,表结构如下图。

2、新建一个asp.net网站。

在Default.aspx上拖放一个GridView。在页面上加入下面切换层的js代码:

复制代码
  function  toggleLayer(whichLayer)
 {     
     
if  (document.getElementById)
     {
      
//  this is the way the standards work
       var  style2  =  document.getElementById(whichLayer).style;
      style2.display 
=  style2.display ?   "" : " block " ;
     }
     
else   if  (document.all)
     {
      
//  this is the way old msie versions work
       var  style2  =  document.all[whichLayer].style;
      style2.display 
=  style2.display ?   "" : " block " ;
     }
     
else   if  (document.layers)
     {
      
//  this is the way nn4 works
       var  style2  =  document.layers[whichLayer].style;
      style2.display 
=  style2.display ?   "" : " block " ;
     }
    }
复制代码

3、定义面板:

面板的css样式:

复制代码
.DivPanelTextBold
{
    font-size
:  8pt ;
    font-weight
: bold ;
    color
:  #000000 ;
    font-family
:  Verdana, Helvetica, sans ;
}
.DivPanel
{
    display
: none ;
    background-color
: #F5F5F5 ;
    white-space
:  nowrap ;
    border-bottom
:  #0072b4 1px solid ;
    border-left
:  #0072b4 1px solid ;
    border-top
:  #0072b4 1px solid ;
    border-right
:  #0072b4 1px solid ;
    width
: 90% ;
    vertical-align
: middle ;
    
}
复制代码

面板的HTML代码如下:

复制代码
  < div >
    
< href ="javascript:toggleLayer('row1');"  class =DivPanelTextBold > a </ a > &nbsp;&nbsp;&nbsp;&nbsp;
    
< div  id ='row1'  class ='DivPanel' >
    
< TABLE  cellSpacing ='2'  cellPadding ='2'  width ='100%'  border ='0' >
    
< tr >
    
< td  class ='La_Ma_Text' > &nbsp; </ td >
    
< td  align =right >
    
< href ="javascript:toggleLayer('row1');"  class =La_Ma_Link >
    
< img  src ='Close.gif'  border =0  align ='absmiddle' >
    
</ a >
    
</ td >
    
</ tr >
    
< tr >
    
< td  class ='DivPanelText'  width ='158px' > &nbsp; Cell Value:  </ td >
    
< td  class ='DivPanelText'  width ='152px' > a </ td >
    
</ tr >
    
< tr >
    
< td >
    
< b >  Something  </ b >
    
</ td >
    
</ tr >
    
</ TABLE >
    
</ div >
复制代码

收起的面板,如下图:

缩放的面板,如下图:

4、将面板绑定到GridView上。

    将面板的HTML代码绑定到Datatable的行上,并将Datatable绑定到GridView上,后台代码如下:

复制代码
  private   void  LoadDT()
    {
        
try
        {
            ds 
=   new  DataSet();
            sqlCMD 
=   new  SqlCommand( " SELECT PKID,EmpId,SubModule FROM Table_1 " , sqlConn);
            sqlDA.SelectCommand 
=  sqlCMD;
            sqlDA.Fill(ds);

            
if  (ds.Tables[ 0 ].Rows.Count  >   0 )
            {
                DataColumn dc1 
=   new  DataColumn();
                dc1.DataType 
=  System.Type.GetType( " System.String " );
                dc1.ColumnName 
=   " PKID " ;

                DataColumn dc2 
=   new  DataColumn();
                dc2.DataType 
=  System.Type.GetType( " System.String " );
                dc2.ColumnName 
=   " SubModule " ;

                dt.Columns.Add(dc1);
                dt.Columns.Add(dc2);


                
foreach  (DataRow dr  in  ds.Tables[ 0 ].Rows)
                {
                    myDr 
=  dt.NewRow();
                    myDr[
0 =  dr[ 0 ].ToString();

                    myDr[
1 =   " <a href=\ " javascript:toggleLayer( ' row" + count + " ' );\ "  class=DivPanelTextBold> "   +  dr[ " SubModule " ].ToString()  +   " </a> "

                        
+   " &nbsp;&nbsp;&nbsp;&nbsp;<div id='row "   +  count  +   " ' class='DivPanel'> "
                        
+   " <TABLE cellSpacing='2' cellPadding='2' width='100%' border='0'> "
                        
+   " <tr><td class='La_Ma_Text'>&nbsp;</td><td align=right><a href=\ " javascript:toggleLayer( ' row" + count + " ' );\ "  class=La_Ma_Link><img src='Close.gif' border=0 align='absmiddle'></a></td></tr> " ;

                    myDr[
1 =  myDr[ 1 +   " <tr><td class='DivPanelText' width='158px'>&nbsp;Cell Value: </td><td class='DivPanelText' width='152px'> "   +  dr[ " SubModule " ].ToString()  +   " </td></tr> " ;

                    myDr[
1 =  myDr[ 1 +   " <tr><td><b> Something </b></td></tr> " ;
                    myDr[
1 =  myDr[ 1 +   " </TABLE> "   +   " </div><br> " ;
                    
// dsa.dispose();
                    dt.Rows.Add(myDr);
                    count
++ ;
                }
            }
            
else
            {
           

            }

            
this .GridView1.DataSource  =  dt;
            
this .GridView1.DataBind();
            ds.Dispose();
        }
        
catch  (Exception ex)
        {
           

        }

    }
复制代码

数据显示:

复制代码
     protected   void  GridView1_DataBound( object  sender, EventArgs e)
    {
        
foreach  (TableRow trow  in  GridView1.Rows)
        {
            
foreach  (TableCell tcell  in  trow.Cells)
            {
                tcell.Text 
=  HttpUtility.HtmlDecode(tcell.Text);                
            }
        }
    }
复制代码

5、最终效果:

 

6、代码:/Files/zhuqil/DataGridViewDemo.zip

备注:代码是电脑上找到的,原出处不详。






本文转自麒麟博客园博客,原文链接:http://www.cnblogs.com/zhuqil/archive/2010/03/29/GridView_Panel.html,如需转载请自行联系原作者

相关文章
|
6天前
|
弹性计算 人工智能 安全
云上十五年——「弹性计算十五周年」系列客户故事(第二期)
阿里云弹性计算十五年深耕,以第九代ECS g9i实例引领算力革新。携手海尔三翼鸟、小鹏汽车、微帧科技等企业,实现性能跃升与成本优化,赋能AI、物联网、智能驾驶等前沿场景,共绘云端增长新图景。
|
12天前
|
存储 弹性计算 人工智能
【2025云栖精华内容】 打造持续领先,全球覆盖的澎湃算力底座——通用计算产品发布与行业实践专场回顾
2025年9月24日,阿里云弹性计算团队多位产品、技术专家及服务器团队技术专家共同在【2025云栖大会】现场带来了《通用计算产品发布与行业实践》的专场论坛,本论坛聚焦弹性计算多款通用算力产品发布。同时,ECS云服务器安全能力、资源售卖模式、计算AI助手等用户体验关键环节也宣布升级,让用云更简单、更智能。海尔三翼鸟云服务负责人刘建锋先生作为特邀嘉宾,莅临现场分享了关于阿里云ECS g9i推动AIoT平台的场景落地实践。
【2025云栖精华内容】 打造持续领先,全球覆盖的澎湃算力底座——通用计算产品发布与行业实践专场回顾
|
3天前
|
云安全 人工智能 安全
Dify平台集成阿里云AI安全护栏,构建AI Runtime安全防线
阿里云 AI 安全护栏加入Dify平台,打造可信赖的 AI
|
10天前
|
人工智能 自然语言处理 自动驾驶
关于举办首届全国大学生“启真问智”人工智能模型&智能体大赛决赛的通知
关于举办首届全国大学生“启真问智”人工智能模型&智能体大赛决赛的通知
|
6天前
|
人工智能 运维 Java
Spring AI Alibaba Admin 开源!以数据为中心的 Agent 开发平台
Spring AI Alibaba Admin 正式发布!一站式实现 Prompt 管理、动态热更新、评测集构建、自动化评估与全链路可观测,助力企业高效构建可信赖的 AI Agent 应用。开源共建,现已上线!
535 16
|
5天前
|
人工智能 Java Nacos
基于 Spring AI Alibaba + Nacos 的分布式 Multi-Agent 构建指南
本文将针对 Spring AI Alibaba + Nacos 的分布式多智能体构建方案展开介绍,同时结合 Demo 说明快速开发方法与实际效果。
355 36
|
11天前
|
编解码 自然语言处理 文字识别
Qwen3-VL再添丁!4B/8B Dense模型开源,更轻量,仍强大
凌晨,Qwen3-VL系列再添新成员——Dense架构的Qwen3-VL-8B、Qwen3-VL-4B 模型,本地部署友好,并完整保留了Qwen3-VL的全部表现,评测指标表现优秀。
702 7
Qwen3-VL再添丁!4B/8B Dense模型开源,更轻量,仍强大