GirdView实现折叠式效果

本GridView参考国外的一篇文章而来，并在原来的基础上面加以改进而成，先看图：

但是有个非常不爽的地方，就是GridView要进行回发操作，所以，点击或者展开折叠节点，都会进行数据的回发。

实现的原理是这样的，首先看一下绑定到GridView的datatable数据表格：

可以看到本数据集的构造方式，即parentID下面保存的都是父ID的节点，而ChildID为空；但是当某行数据为子类时，父类的ParentID置空，而ChildID则存入子类ID值。这样，把这个数据集赋值给GridView的时候，稍微处理就可以达到开始的图片效果了，具体操作如下：

首先，需要在GridView的首列添加两个ImageButton按钮，分别为“MinBT”（-）和“PluseBT”（+），还包括一个image标签。然后就是在RowCreated的时候，将GridView的行值赋值给imagebutton的commandargument属性，同时将datatable中数据的前两行ParentID和ChildID隐藏掉，具体代码如下：

 

  protected   void  GridView1_RowCreated( object  sender, GridViewRowEventArgs e)
    {
         if  (e.Row.RowType  ==  DataControlRowType.Header)
        {
            e.Row.Cells[ 1 ].Visible  =   false ;
            e.Row.Cells[ 2 ].Visible  =   false ;
        }
         if  (e.Row.RowType  ==  DataControlRowType.DataRow)
        {
            e.Row.Cells[ 1 ].Visible  =   false ;
            e.Row.Cells[ 2 ].Visible  =   false ;
            ImageButton btnMin  =  (ImageButton)e.Row.Cells[ 0 ].FindControl( " MinBT " );
            btnMin.CommandArgument  =  e.Row.RowIndex.ToString();
            ImageButton btnAdd  =  (ImageButton)e.Row.Cells[ 0 ].FindControl( " PluseBT " );
            btnAdd.CommandArgument  =  e.Row.RowIndex.ToString();
        }
    }

 

然后，就是对按钮进行处理了，让有子节点的父类显示“+”按钮，而让没有子节点的父类显示“-”按钮，这需要在GridView1_RowDataBound事件中处理，具体代码如下：

 

protected   void  GridView1_RowDataBound( object  sender, GridViewRowEventArgs e)
    {
         if  (e.Row.RowType  ==  DataControlRowType.DataRow)
        {
             string  ShowHide  =  e.Row.Cells[ 1 ].Text;
            ShowHide  =  ShowHide.Replace( "   " ,  "" );    
            ShowHide  =  ShowHide.Replace( "   " , "" );
             if  (ShowHide.Trim().Length  ==   0 )  //如果有子类，前面就会有空白，替换掉后，长度为0，反之则不为0

            {
                ImageButton btnMin  =  (ImageButton)e.Row.Cells[ 0 ].FindControl( " MinBT " );
                btnMin.Visible  =   false ;   //不显示已展开按钮
                ImageButton btnAdd  =  (ImageButton)e.Row.Cells[ 0 ].FindControl( " PluseBT " );
                btnAdd.Visible  =   false ;  //不显示可展开按钮
                HtmlImage Line  =  (HtmlImage)e.Row.Cells[ 0 ].FindControl( " Line " );
                Line.Visible  =   true ;  //显示虚线框
            }
             else
            {
                HtmlImage Line  =  (HtmlImage)e.Row.Cells[ 0 ].FindControl( " Line " );
                Line.Visible  =   false ;  //反之，则不现实虚线框
            }
        }
    }

 

 

 然后就是处理按钮的点击事件了：

 

protected   void  GridView1_RowCommand( object  sender, GridViewCommandEventArgs e)
    {
       
         if  (e.CommandName  ==   " _Show " )  //当点击展开按钮时
        {
             int  index  =  Convert.ToInt32(e.CommandArgument);  //获取第几行
            GridViewRow row  =  GridView1.Rows[index];
             int  G_Count  =  GridView1.Rows.Count;  //查出总行数
             for  ( int  i  =  index  +   1 ; i  <  G_Count; i ++ )  //从本行下面一行开始
            {
                 if  (GridView1.Rows[i].Cells[ 1 ].Text  ==   " &nbsp; " )  //如果遇见是子类
                {
                    GridView1.Rows[i].Visible  =   true ;  //那么本行显示

                }
                 else  //如果遇见的不是子类
                {
                    ImageButton Bt_Min  =  (ImageButton)row.Cells[ 0 ].FindControl( " MinBT " );
                    Bt_Min.Visible  =   true ;  //那么已展开按钮显示
                    ImageButton Bt_plus  =  (ImageButton)row.Cells[ 0 ].FindControl( " PluseBT " );
                    Bt_plus.Visible  =   false ;  //未展开按钮隐藏
                     break ;

                }
                ImageButton Bt_Min1  =  (ImageButton)row.Cells[ 0 ].FindControl( " MinBT " );
                Bt_Min1.Visible  =   true ;
                ImageButton Bt_plus1  =  (ImageButton)row.Cells[ 0 ].FindControl( " PluseBT " );
                Bt_plus1.Visible  =   false ;
            }

        }
         if  (e.CommandName  ==   " _Hide " )
        {
             int  index  =  Convert.ToInt32(e.CommandArgument);
            GridViewRow row  =  GridView1.Rows[index];
             int  G_Count  =  GridView1.Rows.Count;
             for  ( int  i  =  index  +   1 ; i  <  G_Count; i ++ )
            {
                 if  (GridView1.Rows[i].Cells[ 1 ].Text  ==   " &nbsp; " )
                {
                    GridView1.Rows[i].Visible  =   false ;
                }
                 else
                {
                    ImageButton Bt_Min  =  (ImageButton)row.Cells[ 0 ].FindControl( " MinBT " );
                    Bt_Min.Visible  =   false ;
                    ImageButton Bt_plus  =  (ImageButton)row.Cells[ 0 ].FindControl( " PluseBT " );
                    Bt_plus.Visible  =   true ;
                     break ;

                }
                ImageButton Bt_Min1  =  (ImageButton)row.Cells[ 0 ].FindControl( " MinBT " );
                Bt_Min1.Visible  =   false ;
                ImageButton Bt_plus1  =  (ImageButton)row.Cells[ 0 ].FindControl( " PluseBT " );
                Bt_plus1.Visible  =   true ;
            }

        }

 

 所有代码如下：

 

using  System;
using  System.Collections.Generic;
using  System.Linq;
using  System.Web;
using  System.Web.UI;
using  System.Web.UI.WebControls;
using  System.Data;
using  System.Data.SqlClient;
using  System.Web.UI.HtmlControls;

public   partial   class  Default2 : System.Web.UI.Page
{
     public   string  connStr  =  System.Configuration.ConfigurationManager.AppSettings[ " connStr " ];

     protected   void  Page_Load( object  sender, EventArgs e)
    {
         if  ( ! IsPostBack)
        {
             using  (SqlConnection conn  =   new  SqlConnection(connStr))
            {
                conn.Open();
                 string  sql  =   " SELECT ParentName,ParentID,dateof FROM TreeParent tp  " ;
                SqlCommand cmd  =   new  SqlCommand(sql, conn);
                DataTable dt  =   new  DataTable();
                dt.Columns.Add( new  DataColumn( " ParentID " ,  typeof ( string )));
                dt.Columns.Add( new  DataColumn( " ChildID " ,  typeof ( string )));
                dt.Columns.Add( new  DataColumn( " Name " ,  typeof ( string )));
                dt.Columns.Add( new  DataColumn( " Dateof " ,  typeof ( string )));
                SqlDataReader sdr  =  cmd.ExecuteReader();
                 while  (sdr.Read())
                {
                    DataRow dr  =  dt.NewRow();
                     int  pID  =  Convert.ToInt32(sdr[ " ParentID " ]);
                    dr[ " ParentID " ]  =  (sdr[ " ParentID " ]);
                    dr[ " ChildID " ]  =   null ;
                    dr[ " Name " ]  =  sdr[ " ParentName " ];
                    dr[ " Dateof " ]  =  sdr[ " Dateof " ];
                    dt.Rows.Add(dr);
                    DataTable myDT  =  GenerateDT(pID.ToString());
                     foreach  (DataRow drChild  in  myDT.Rows)
                    {
                        DataRow drChildDT  =  dt.NewRow();
                        drChildDT[ " ChildID " ]  =  drChild[ " ChildID " ];
                        drChildDT[ " Name " ]  =  drChild[ " ChildName " ];
                        drChildDT[ " Dateof " ]  =  drChild[ " Dateof " ];
                        dt.Rows.Add(drChildDT);
                    }
                }
                sdr.Close();
                GridView1.DataSource  =  dt;
                GridView1.DataBind();
            }

        }
    }

     protected  DataTable GenerateDT( string  ParentID)
    {
         using  (SqlConnection conn  =   new  SqlConnection(connStr))
        {
            conn.Open();

            DataTable dt  =   new  DataTable();
            dt.Columns.Add( new  DataColumn( " ChildName " ,  typeof ( string )));
            dt.Columns.Add( new  DataColumn( " ChildID " ,  typeof ( string )));
            dt.Columns.Add( new  DataColumn( " Dateof " ,  typeof ( string )));
             string  sql  =   " SELECT childID,childName,dateof FROM TreeChild tc where tc.ParentID= "   +  ParentID;
            SqlCommand cmd  =   new  SqlCommand(sql, conn);
            SqlDataReader sdr  =  cmd.ExecuteReader();
             while  (sdr.Read())
            {
                DataRow dr  =  dt.NewRow();
                dr[ " ChildName " ]  =  sdr[ " childName " ];
                dr[ " ChildID " ]  =  sdr[ " ChildID " ];
                dr[ " Dateof " ]  =  sdr[ " Dateof " ];
                dt.Rows.Add(dr);
            }
            sdr.Close();
             return  dt;
        }
    }


     protected   void  GridView1_RowCreated( object  sender, GridViewRowEventArgs e)
    {
         if  (e.Row.RowType  ==  DataControlRowType.Header)
        {
            e.Row.Cells[ 1 ].Visible  =   false ;
            e.Row.Cells[ 2 ].Visible  =   false ;
        }
         if  (e.Row.RowType  ==  DataControlRowType.DataRow)
        {
            e.Row.Cells[ 1 ].Visible  =   false ;
            e.Row.Cells[ 2 ].Visible  =   false ;
            ImageButton btnMin  =  (ImageButton)e.Row.Cells[ 0 ].FindControl( " MinBT " );
            btnMin.CommandArgument  =  e.Row.RowIndex.ToString();
            ImageButton btnAdd  =  (ImageButton)e.Row.Cells[ 0 ].FindControl( " PluseBT " );
            btnAdd.CommandArgument  =  e.Row.RowIndex.ToString();
        }
    }
     protected   void  GridView1_RowDataBound( object  sender, GridViewRowEventArgs e)
    {
         if  (e.Row.RowType  ==  DataControlRowType.DataRow)
        {
             string  ShowHide  =  e.Row.Cells[ 1 ].Text;
            ShowHide  =  ShowHide.Replace( " &nbsp; " ,  "" );
            ShowHide  =  ShowHide.Replace( "   " , "" );
             if  (ShowHide.Trim().Length  ==   0 )
            {
                ImageButton btnMin  =  (ImageButton)e.Row.Cells[ 0 ].FindControl( " MinBT " );
                btnMin.Visible  =   false ;
                ImageButton btnAdd  =  (ImageButton)e.Row.Cells[ 0 ].FindControl( " PluseBT " );
                btnAdd.Visible  =   false ;
                HtmlImage Line  =  (HtmlImage)e.Row.Cells[ 0 ].FindControl( " Line " );
                Line.Visible  =   true ;
            }
             else
            {
                HtmlImage Line  =  (HtmlImage)e.Row.Cells[ 0 ].FindControl( " Line " );
                Line.Visible  =   false ;
            }
        }
    }
     protected   void  GridView1_RowCommand( object  sender, GridViewCommandEventArgs e)
    {
       
         if  (e.CommandName  ==   " _Show " )
        {
             int  index  =  Convert.ToInt32(e.CommandArgument);
            GridViewRow row  =  GridView1.Rows[index];
             int  G_Count  =  GridView1.Rows.Count;
             for  ( int  i  =  index  +   1 ; i  <  G_Count; i ++ )
            {
                 if  (GridView1.Rows[i].Cells[ 1 ].Text  ==   " &nbsp; " )
                {
                    GridView1.Rows[i].Visible  =   true ;
                }
                 else
                {
                    ImageButton Bt_Min  =  (ImageButton)row.Cells[ 0 ].FindControl( " MinBT " );
                    Bt_Min.Visible  =   true ;
                    ImageButton Bt_plus  =  (ImageButton)row.Cells[ 0 ].FindControl( " PluseBT " );
                    Bt_plus.Visible  =   false ;
                     break ;

                }
                ImageButton Bt_Min1  =  (ImageButton)row.Cells[ 0 ].FindControl( " MinBT " );
                Bt_Min1.Visible  =   true ;
                ImageButton Bt_plus1  =  (ImageButton)row.Cells[ 0 ].FindControl( " PluseBT " );
                Bt_plus1.Visible  =   false ;
            }

        }
         if  (e.CommandName  ==   " _Hide " )
        {
             int  index  =  Convert.ToInt32(e.CommandArgument);
            GridViewRow row  =  GridView1.Rows[index];
             int  G_Count  =  GridView1.Rows.Count;
             for  ( int  i  =  index  +   1 ; i  <  G_Count; i ++ )
            {
                 if  (GridView1.Rows[i].Cells[ 1 ].Text  ==   " &nbsp; " )
                {
                    GridView1.Rows[i].Visible  =   false ;
                }
                 else
                {
                    ImageButton Bt_Min  =  (ImageButton)row.Cells[ 0 ].FindControl( " MinBT " );
                    Bt_Min.Visible  =   false ;
                    ImageButton Bt_plus  =  (ImageButton)row.Cells[ 0 ].FindControl( " PluseBT " );
                    Bt_plus.Visible  =   true ;
                     break ;

                }
                ImageButton Bt_Min1  =  (ImageButton)row.Cells[ 0 ].FindControl( " MinBT " );
                Bt_Min1.Visible  =   false ;
                ImageButton Bt_plus1  =  (ImageButton)row.Cells[ 0 ].FindControl( " PluseBT " );
                Bt_plus1.Visible  =   true ;
            }

        }
        
    }
}

 

前台代码如下：

 

<% @ Page Language = " C# "  AutoEventWireup = " true "  CodeFile = " Default2.aspx.cs "  Inherits = " Default2 "   %>

<! DOCTYPE html PUBLIC  " -//W3C//DTD XHTML 1.0 Transitional//EN "   " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >

< html xmlns = " http://www.w3.org/1999/xhtml " >
< head runat = " server " >
     < title ></ title >
</ head >
< body >
     < form id = " form1 "  runat = " server " >
     < div >
    
         < asp:GridView ID = " GridView1 "  runat = " server "  AutoGenerateColumns = " False "  
            CellPadding = " 4 "  ForeColor = " #333333 "  GridLines = " None "  
            onrowcommand = " GridView1_RowCommand "  onrowcreated = " GridView1_RowCreated "  
            onrowdatabound = " GridView1_RowDataBound "  Width = " 456px " >
             < RowStyle BackColor = " #F7F6F3 "  ForeColor = " #333333 "   />
             < Columns >
                 < asp:TemplateField HeaderText = " 操作 " >
                     < ItemTemplate >
                         < asp:ImageButton ID = " PluseBT "  runat = " server "  Visible = " false "  CommandName = " _Show "  BackColor = " White "  BorderStyle = " none "  ImageUrl = " ~/plus.gif "   />
                         < asp:ImageButton ID = " MinBT "  runat = " server "  CommandName = " _Hide "  BackColor = " White "  BorderStyle = " none "  ImageUrl = " ~/minus.gif "   />
                         < img id = " Line "  runat = " server "  visible = " false "  src = " ~/line.gif " />
                     </ ItemTemplate >
                 </ asp:TemplateField >
                 < asp:BoundField DataField = " ParentID "  HeaderText = " Parent Id "   />
                 < asp:BoundField DataField = " ChildId "  HeaderText = " Child Id "   />
                 < asp:BoundField DataField = " Name "  HeaderText = " 名称 "   />
                 < asp:BoundField DataField = " Dateof "  HeaderText = " 时间 "   />
             </ Columns >

             < FooterStyle BackColor = " #5D7B9D "  Font - Bold = " True "  ForeColor = " White "   />
             < PagerStyle BackColor = " #284775 "  ForeColor = " White "  HorizontalAlign = " Center "   />
             < SelectedRowStyle BackColor = " #E2DED6 "  Font - Bold = " True "  ForeColor = " #333333 "   />
             < HeaderStyle BackColor = " #5D7B9D "  Font - Bold = " True "  ForeColor = " White "   />
             < EditRowStyle BackColor = " #999999 "   />
             < AlternatingRowStyle BackColor = " White "  ForeColor = " #284775 "   />
         </ asp:GridView >
    
     </ div >
     </ form >
</ body >
</ html >