一步一步教你在GridView中实现可收缩的面板-低调大师

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

2017-12-31 566

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
  >
  
     
  <
  a 
  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
  >
  
     
  <
  a 
  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，如需转载请自行联系原作者

微信关注我们

原文链接：https://yq.aliyun.com/articles/337768

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

一种简单的直观的高效的权限设计

大部分系统都有权限系统。一般来说，它能管控人员对某个否页面的访问；对某些字段、控件可见或者不可见。对gridview中的数据是否可删除、可添加、可新增等等。大部分人都把权限作为一个子系统独立出来。但是这里我不是想设计一个权限管理系统，网上的设计方案太多了，可以说每个开发人员都有自己的开发权限管理系统的想法和思路。在这篇文章中，我先用简单的C#代码模仿一个用户的权限，再使用sql去模拟。这是一种很简单，很直观，很高效的方式去判定用户的权限。 C#: 好吧，先从最简单开始，定义一个用户（User）类，如下。 1 class User 2 { 3 bool CanDelete; 4 bool CanRead; 5 bool CanWrite; 6 bool CanModify; 7 bool CanCreate; 8 } 这里设计5个属性来管控用户的权限。我发现这样虽然很直观，但是不宜扩张。我们将权限独立出来，在看下面代码： 1 enum PermissionTypes: int 2 { 3 None = 0 , 4 Read = 1 , 5 Write = 2 ,...

2018-01-01

482

这要注意应用场合的区别，是有异常就及时中止，还是等主进程拿结果。《Java程序员修炼之道》此书长功力啊！ package demo.thread; import java.io.IOException; import java.nio.ByteBuffer; import java.nio.channels.AsynchronousFileChannel; import java.nio.channels.CompletionHandler; import java.nio.file.Path; import java.nio.file.Paths; import java.util.concurrent.ExecutionException; import java.util.concurrent.Future; public class Run { public static void main(String[] args) { try { Path file = Paths.get("D:\\monad\\MyStuff.txt"); AsynchronousFileChan...

2018-01-01

579

资源下载

更多资源

优质分享App

近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

Oracle

Oracle Database，又名Oracle RDBMS，或简称Oracle。是甲骨文公司的一款关系数据库管理系统。它是在数据库领域一直处于领先地位的产品。可以说Oracle数据库系统是目前世界上流行的关系数据库管理系统，系统可移植性好、使用方便、功能强，适用于各类大、中、小、微机环境。它是一种高效率、可靠性好的、适应高吞吐量的数据库方案。

Eclipse

Eclipse 是一个开放源代码的、基于Java的可扩展开发平台。就其本身而言，它只是一个框架和一组服务，用于通过插件组件构建开发环境。幸运的是，Eclipse 附带了一个标准的插件集，包括Java开发工具（Java Development Kit，JDK）。

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。