ASP.NET GirdView实现折叠式效果

我们线看图的效果：



但是有个非常不爽的地方，就是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 == " ")  //如果遇见是子类
{
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 == " ")
{
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(" ", "");
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 == " ")
{
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 == " ")
{
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>