GridView作为强大的数据显示控件,对于大量的数据可以很好的集中展示,但是常常我们有需要看到每一行数据的详细信息,这个功能我们可以使用超链接进行实现,但是这个样的结果需要花费一定的开发成本,而且效果也不一样好,一个新颖的做法是弹出一个层来实现,即点击后弹出一个层,该层显示我们需要的详细信息,对于这个弹出曾德实现,网上也介绍了很多的方法,最多的还是使用JS进行实现,但是效果有好有坏,且不说JS的难易程度,博主最反对在页面上使用JS进行一些功能的处理,JS是客户端来进行处理,把所有的东西抛给客户端来做说明我们的开发人员不是一个优秀的开发人员,我们的目标是尽可能多的任务交给服务来实现。
本文介绍的是在GridView显示总体数据以后,使用AspxPopupControl控件来实现弹出层,显示我们单个的详细信息,效果图如下:
后台代码如下:
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using Oracle.DataAccess.Client;
using DevExpress.Web.ASPxPopupControl;
public partial class NiaoSuReport : System.Web.UI.Page
{
public OracleConnection conn = null;
public DataSet ds = new DataSet();
public string sdate = "2011-08-01 00:00:00";
public string edate = "2011-12-31 23:59:59";
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
getReport();
}
}
public void getReport()
{
conn = getConnection();
ds = getDataSet(conn);
GridView1.DataSource = ds;
GridView1.DataBind();
GridView1.Attributes.Add("BorderColor", "#000000");
loopGroupCol();
closeConnection(conn);
}
public OracleConnection getConnection()
{
try
{
string str = "Data Source=orcl;user id=jde;password=jde;";
conn = new OracleConnection(str);
conn.Open();
}
catch (Exception e)
{
Response.Write("数据库连接失败!"+e.Message);
}
return conn;
}
public void closeConnection(OracleConnection conn )
{
try
{
conn.Close();
}
catch (Exception e)
{
Response.Write("关闭数据库失败!"+e.Message);
}
}
public DataSet getDataSet(OracleConnection conn)
{
try
{
string sql = "select getkhname(htd.htkhbm) khmc,htd.htzzbm zzbm,htby2 htbm,jssl sl,jsdj dj,hmxsl,hmxdj ,htd.htlxid chara from htd,(select * from hcjs a where jsby7!='手工结算' and jsby1 is not null),htmx where jsby1=htby2 and htmx.hhtid=htd.htby2 and to_date(htjlrq,'yyyy-mm-dd hh24:mi:ss') between to_date('" + sdate + "','yyyy-mm-dd hh24:mi:ss') and to_date('" + edate + "','yyyy-mm-dd hh24:mi:ss') order by khmc,htbm,dj,chara";
OracleDataAdapter oda = new OracleDataAdapter(sql,conn);
oda.Fill(ds);
}
catch (Exception e)
{
Response.Write("获取结果集失败"+e.Message); ;
}
return ds;
}
public void GroupCol(GridView gd,int cols,int srows,int erows)
{
if (gd.Rows.Count<1||cols>gd.Columns.Count-1)
{
return;
}
TableCell oldtc=gd.Rows[srows].Cells[cols];
for (int i = 1; i < erows-srows; i++)
{
TableCell tc=gd.Rows[srows+i].Cells[cols];
tc.Visible = false;
if (oldtc.RowSpan==0)
{
oldtc.RowSpan = 1;
}
oldtc.RowSpan++;
oldtc.VerticalAlign = VerticalAlign.Middle;
}
}
public void loopGroupCol()
{
try
{
int khmcsumrows = 0;
int htbmsumrows = 0;
int djsumrows = 0;
int zzbmsumrows = 0;
DataSet ds2 = new DataSet();
string str = "select distinct khmc from (select getkhname(htd.htkhbm) khmc,htd.htzzbm zzbm,htby2 htbm,jssl sl,jsdj dj,hmxsl,hmxdj ,htd.htlxid chara from htd,(select * from hcjs a where jsby7!='手工结算' and jsby1 is not null),htmx where jsby1=htby2 and htmx.hhtid=htby2 and to_date(htjlrq,'yyyy-mm-dd hh24:mi:ss') between to_date('" + sdate + "','yyyy-mm-dd hh24:mi:ss') and to_date('" + edate + "','yyyy-mm-dd hh24:mi:ss') order by khmc,htbm,dj,chara)";
OracleDataAdapter oda2 = new OracleDataAdapter(str,conn);
oda2.Fill(ds2);
for (int i = 0; i < ds2.Tables[0].Rows.Count; i++)//第一层循环为单位名称
{
string sql = "select count(*) from (select getkhname(htd.htkhbm) khmc,htd.htzzbm zzbm,htby2 htbm ,jssl sl,jsdj dj,hmxsl,hmxdj ,htd.htlxid chara from htd,(select * from hcjs a where jsby7!='手工结算' and jsby1 is not null),htmx where jsby1=htby2 and htmx.hhtid=htby2 and to_date(htjlrq,'yyyy-mm-dd hh24:mi:ss') between to_date('" + sdate + "','yyyy-mm-dd hh24:mi:ss') and to_date('" + edate + "','yyyy-mm-dd hh24:mi:ss') order by khmc,htbm,dj,chara) where khmc='" + ds2.Tables[0].Rows[i][0] + "'";
OracleDataAdapter oda = new OracleDataAdapter(sql,conn);
DataSet ds1 = new DataSet();
oda.Fill(ds1);
int count = int.Parse(ds1.Tables[0].Rows[0][0].ToString());
GroupCol(GridView1,0,khmcsumrows,khmcsumrows+count);
khmcsumrows += count;
string sql2 = "select distinct htbm from(select getkhname(htd.htkhbm) khmc,htd.htzzbm zzbm,htby2 htbm ,jssl sl,jsdj dj,hmxsl,hmxdj ,htd.htlxid chara from htd,(select * from hcjs a where jsby7!='手工结算' and jsby1 is not null),htmx where jsby1=htby2 and htmx.hhtid=htby2 and to_date(htjlrq,'yyyy-mm-dd hh24:mi:ss') between to_date('" + sdate + "','yyyy-mm-dd hh24:mi:ss') and to_date('" + edate + "','yyyy-mm-dd hh24:mi:ss') order by khmc,htbm,dj,chara) where khmc='" + ds2.Tables[0].Rows[i][0] + "'";
OracleDataAdapter oda3 = new OracleDataAdapter(sql2,conn);
DataSet ds3 = new DataSet();
oda3.Fill(ds3);
for (int j = 0; j < ds3.Tables[0].Rows.Count; j++)//第二层循环为合同编码
{
string sql3 = "select count(*) from (select getkhname(htd.htkhbm) khmc,htd.htzzbm zzbm,htby2 htbm ,jssl sl,jsdj dj,hmxsl,hmxdj ,htd.htlxid chara from htd,(select * from hcjs a where jsby7!='手工结算' and jsby1 is not null),htmx where jsby1=htby2 and htmx.hhtid=htby2 and to_date(htjlrq,'yyyy-mm-dd hh24:mi:ss') between to_date('" + sdate + "','yyyy-mm-dd hh24:mi:ss') and to_date('" + edate + "','yyyy-mm-dd hh24:mi:ss') order by khmc,htbm,dj,chara) where khmc='" + ds2.Tables[0].Rows[i][0] + "' and htbm='" + ds3.Tables[0].Rows[j][0] + "'";
OracleDataAdapter oda4 = new OracleDataAdapter(sql3,conn);
DataSet ds4 = new DataSet();
oda4.Fill(ds4);
int count2 = int.Parse(ds4.Tables[0].Rows[0][0].ToString());
GroupCol(GridView1, 2, htbmsumrows, htbmsumrows + count2);
GroupCol(GridView1, 3, htbmsumrows, htbmsumrows + count2);
GroupCol(GridView1, 4, htbmsumrows, htbmsumrows + count2);
GroupCol(GridView1, 7, htbmsumrows, htbmsumrows + count2);
GroupCol(GridView1, 8, htbmsumrows, htbmsumrows + count2);
htbmsumrows += count2;
string sql4 = "select distinct dj from (select getkhname(htd.htkhbm) khmc,htd.htzzbm zzbm,htby2 htbm ,jssl sl,jsdj dj,hmxsl,hmxdj ,htd.htlxid chara from htd,(select * from hcjs a where jsby7!='手工结算' and jsby1 is not null),htmx where jsby1=htby2 and htmx.hhtid=htby2 and to_date(htjlrq,'yyyy-mm-dd hh24:mi:ss') between to_date('" + sdate + "','yyyy-mm-dd hh24:mi:ss') and to_date('" + edate + "','yyyy-mm-dd hh24:mi:ss') order by khmc,htbm,dj,chara) where khmc='" + ds2.Tables[0].Rows[i][0] + "' and htbm='" + ds3.Tables[0].Rows[j][0] + "'";
OracleDataAdapter oda5 = new OracleDataAdapter(sql4,conn);
DataSet ds5 = new DataSet();
oda5.Fill(ds5);
for (int k = 0; k < ds5.Tables[0].Rows.Count; k++)//第三层循环为单价
{
string sql5 = "select count(*) from (select getkhname(htd.htkhbm) khmc,htd.htzzbm zzbm,htby2 htbm ,jssl sl,jsdj dj,hmxsl,hmxdj ,htd.htlxid chara from htd,(select * from hcjs a where jsby7!='手工结算' and jsby1 is not null),htmx where jsby1=htby2 and htmx.hhtid=htby2 and to_date(htjlrq,'yyyy-mm-dd hh24:mi:ss') between to_date('" + sdate + "','yyyy-mm-dd hh24:mi:ss') and to_date('" + edate + "','yyyy-mm-dd hh24:mi:ss') order by khmc,htbm,dj,chara) where khmc='" + ds2.Tables[0].Rows[i][0] + "' and htbm='" + ds3.Tables[0].Rows[j][0] + "' and dj='" + ds5.Tables[0].Rows[k][0] + "'";
OracleDataAdapter oda6 = new OracleDataAdapter(sql5,conn);
DataSet ds6 = new DataSet();
oda6.Fill(ds6);
int count3 = int.Parse(ds6.Tables[0].Rows[0][0].ToString());
GroupCol(GridView1, 6, djsumrows, djsumrows + count3);
djsumrows += count3;
}
string sql6 = "select distinct zzbm from (select getkhname(htd.htkhbm) khmc,htd.htzzbm zzbm,htby2 htbm ,jssl sl,jsdj dj,hmxsl,hmxdj ,htd.htlxid chara from htd,(select * from hcjs a where jsby7!='手工结算' and jsby1 is not null),htmx where jsby1=htby2 and htmx.hhtid=htby2 and to_date(htjlrq,'yyyy-mm-dd hh24:mi:ss') between to_date('" + sdate + "','yyyy-mm-dd hh24:mi:ss') and to_date('" + edate + "','yyyy-mm-dd hh24:mi:ss') order by khmc,htbm,dj,chara) where khmc='" + ds2.Tables[0].Rows[i][0] + "' and htbm='" + ds3.Tables[0].Rows[j][0] + "'";
OracleDataAdapter oda7 = new OracleDataAdapter(sql6,conn);
DataSet ds7 = new DataSet();
oda7.Fill(ds7);
for (int l = 0; l <ds7.Tables[0].Rows.Count ; l++)
{
string sql7 = "select count(*) from (select getkhname(htd.htkhbm) khmc,htd.htzzbm zzbm,htby2 htbm ,jssl sl,jsdj dj,hmxsl,hmxdj ,htd.htlxid chara from htd,(select * from hcjs a where jsby7!='手工结算' and jsby1 is not null),htmx where jsby1=htby2 and htmx.hhtid=htby2 and to_date(htjlrq,'yyyy-mm-dd hh24:mi:ss') between to_date('" + sdate + "','yyyy-mm-dd hh24:mi:ss') and to_date('" + edate + "','yyyy-mm-dd hh24:mi:ss') order by khmc,htbm,dj,chara) where khmc='" + ds2.Tables[0].Rows[i][0] + "' and htbm='" + ds3.Tables[0].Rows[j][0] + "' and zzbm='" + ds7.Tables[0].Rows[l][0] + "'";
OracleDataAdapter oda8 = new OracleDataAdapter(sql7,conn);
DataSet ds8 = new DataSet();
oda8.Fill(ds8);
int count4 = int.Parse(ds8.Tables[0].Rows[0][0].ToString());
GroupCol(GridView1, 1, zzbmsumrows, zzbmsumrows + count4);
zzbmsumrows += count4;
}
}
}
}
catch (Exception e)
{
Response.Write("循环合并单元格失败!"+e.Message);
}
}
public void popushow(object sender,EventArgs e)
{
conn = getConnection();
LinkButton lb = (LinkButton)sender;
string htid=lb.CommandArgument.ToString();
string sql = "";
if (lb.CommandName=="haveTicket")
{
sql = "select getkhname(jsby5) jsdw,jsby1 hth,getwzname(cpbm,'WZMC') cpmc,jssl,jsdj,jsze je,ysfs,jsby4 zdrq,jskkrq kprq,jszxf zxf from hcjs where isprint='已打印送审' and jsby1='" + htid + "' and jsby7!='手工结算' and jsby1 is not null";
ASPxPopupControl1.HeaderText = "已开票合同明细";
}
else
{
sql = "select getkhname(jsby5) jsdw,jsby1 hth,getwzname(cpbm,'WZMC') cpmc,jssl,jsdj,jsze je,ysfs,jsby4 zdrq,jskkrq kprq,jszxf zxf from hcjs where (isprint!='已打印送审' or isprint is null) and jsby1='" + htid + "' and jsby7!='手工结算' and jsby1 is not null";
ASPxPopupControl1.HeaderText = "未开票合同明细";
}
//string sql = "select getkhname(jsby5) jsdw,jsby1 hth,getwzname(cpbm,'WZMC') cpmc,jssl,jsdj,jsze je,ysfs,jsby4 zdrq,jskkrq kprq,jszxf zxf from hcjs where (isprint!='已打印送审' or isprint is null) and jsby1='"+htid+"' and jsby7!='手工结算' and jsby1 is not null";
OracleDataAdapter oda = new OracleDataAdapter(sql,conn);
DataSet ds9 = new DataSet();
oda.Fill(ds9);
GridView2.DataSource = ds9;
GridView2.DataBind();
GridView2.Attributes.Add("BorderColor", "#000000");
ASPxPopupControl1.ShowOnPageLoad = true;
closeConnection(conn);
}
public void exportToExcel(object sender, EventArgs e)
{
Response.Clear();
Response.AddHeader("content-disposition", "attachment;filename=ExportResult.xls");
Response.Charset = "gb2312";
Response.ContentType = "application/vnd.xls";
System.IO.StringWriter stringWrite = new System.IO.StringWriter();
System.Web.UI.HtmlTextWriter htmlWrite = new HtmlTextWriter(stringWrite);
//GridView1.AllowPaging = false;
//BindData();
GridView1.RenderControl(htmlWrite);
Response.Write(stringWrite.ToString());
Response.End();
//GridView1.AllowPaging = true;
//BindData();
}
}
前台代码如下:
<%@ Page Language="C#" CodeFile="NiaoSuReport.aspx.cs" Inherits="NiaoSuReport" %>
<%@ Register Assembly="DevExpress.Web.v9.2, Version=9.2.2.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
Namespace="DevExpress.Web.ASPxPager" TagPrefix="dxpg" %>
<%@ Register Assembly="DevExpress.Web.v9.2, Version=9.2.2.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
Namespace="DevExpress.Web.ASPxPopupControl" TagPrefix="dxpc" %>
<!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>
< style >
a:visited { COLOR: blue;TEXT-DECORATION:none;}
< /style>
< /head>
< body>
< form id="form1" runat="server">
< div align="center">
< asp:Button ID="button2" runat="server" Text="导出结果到Excel" OnClick="exportToExcel" />
< /div>
< br />
< div align="center">
< asp:gridview runat="server" ID="GridView1" CellPadding="4"
ForeColor="#333333" GridLines="Both">
< FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
< RowStyle BackColor="#EFF3FB" />
< PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
< SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
< HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
< EditRowStyle BackColor="#2461BF" />
< AlternatingRowStyle BackColor="White" />
< Columns>
< asp:BoundField DataField="khmc" HeaderText="客户名称" />
< asp:BoundField DataField="zzbm" HeaderText="纸质合同号" />
< asp:BoundField DataField="htbm" HeaderText="系统合同号" />
< asp:BoundField DataField="hmxsl" HeaderText="合同数量(吨)" />
< asp:BoundField DataField="hmxdj" HeaderText="合同价格(元/吨)" />
< asp:BoundField DataField="sl" HeaderText="结算数量(吨)" />
< asp:BoundField DataField="dj" HeaderText="结算价格(元/吨)" />
< asp:BoundField DataField="chara" HeaderText="合同性质" />
< asp:TemplateField>
< HeaderTemplate>
操作
< /HeaderTemplate>
< ItemTemplate>
< asp:LinkButton ID="LinkButton1" runat="server" CommandArgument='<%# eval_r("htbm") %>' CommandName="haveTicket" Text="已开票" OnClick="popushow"></asp:LinkButton>
< asp:LinkButton ID="LinkButton2" runat="server" CommandArgument='<%# eval_r("htbm") %>' CommandName="noTicket" Text="未开票" OnClick="popushow"></asp:LinkButton>
< /ItemTemplate>
< /asp:TemplateField>
< /Columns>
< /asp:gridview>
< /div>
< %-- < div align="center">
< asp:HiddenField ID="currentpage" runat="server" Value="0" />
< asp:LinkButton ID="LinkButton3" CommandArgument="first" runat="server" Text="首页" OnClick="click_pagechanged"></asp:LinkButton>
< asp:LinkButton ID="LinkButton4" CommandArgument="pre" runat="server" Text="上一页" OnClick="click_pagechanged"></asp:LinkButton>
< asp:LinkButton ID="LinkButton5" CommandArgument="next" runat="server" Text="下一页" OnClick="click_pagechanged"></asp:LinkButton>
< asp:LinkButton ID="LinkButton6" CommandArgument="last" runat="server" Text="尾页" OnClick="click_pagechanged"></asp:LinkButton>
< /div>--%>
< div align="center">
< dxpc:ASPxPopupControl ID="ASPxPopupControl1" runat="server"
CssFilePath="~/App_Themes/Aqua/{0}/styles.css" CssPostfix="Aqua"
ImageFolder="~/App_Themes/Aqua/{0}/"
ShowFooter="false"
AllowDragging="True"
AllowResize="True"
DragElement="Window"
PopupHorizontalAlign="WindowCenter"
PopupVerticalAlign="WindowCenter"
Width="850px">
< ContentStyle VerticalAlign="Top">
< /ContentStyle>
< SizeGripImage Height="12px" Width="12px" />
< ContentCollection>
< dxpc:PopupControlContentControl ID="PopupControlContentControl1" runat="server">
< asp:GridView ID="GridView2" runat="server"
CellPadding="4" ForeColor="#333333" GridLines="Both">
< FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
< AlternatingRowStyle BackColor="White" />
< EditRowStyle BackColor="#2461BF" />
< HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
< PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
< RowStyle BackColor="#EFF3FB" />
< SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
< Columns>
< asp:BoundField DataField="jsdw" HeaderText="结算单位" />
< asp:BoundField DataField="hth" HeaderText="合同号" />
< asp:BoundField DataField="cpmc" HeaderText="产品名称" />
< asp:BoundField DataField="jssl" HeaderText="结算数量" />
< asp:BoundField DataField="jsdj" HeaderText="结算单价" />
< asp:BoundField DataField="je" HeaderText="结算金额" />
< asp:BoundField DataField="ysfs" HeaderText="运输方式" />
< asp:BoundField DataField="zdrq" HeaderText="制定日期" />
< asp:BoundField DataField="kprq" HeaderText="开票日期" />
< asp:BoundField DataField="zxf" HeaderText="装卸费(元)" />
< /Columns>
< /asp:GridView>
< /dxpc:PopupControlContentControl>
< /ContentCollection>
< CloseButtonImage Height="16px" Width="17px" />
< /dxpc:ASPxPopupControl>
< /div>
< /form>
< /body>
< /html>
上面的例子可能需要有固定的数据库,不方便与大家进行联系,博主特意实现了一个说明性的简单的实例,方便大家学习这个控件,这个小例子不需要后台代码支持,只用前台代码就可以了:
前台代码如下:
<%@ Page Language="C#" CodeFile="AspxPopupControlTest.aspx.cs" Inherits="AspxPopupControlTest" %>
<%@ Register assembly="DevExpress.Web.v9.2, Version=9.2.2.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web.ASPxPopupControl" tagprefix="dxpc" %>
<!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>
< dxpc:ASPxPopupControl ID="ASPxPopupControl1" runat="server"
CssFilePath="~/App_Themes/Aqua/{0}/styles.css" CssPostfix="Aqua"
FooterNavigateUrl="http://www.xjtu.edu.cn" FooterText="王荣喜制作 版权所有"
Height="250px" ImageFolder="~/App_Themes/Aqua/{0}/" ShowFooter="True"
Text="弹出层测试" Width="200px" PopupElementID="span1" AllowDragging="True"
AllowResize="True" DragElement="Window" PopupHorizontalAlign="WindowCenter"
PopupVerticalAlign="WindowCenter">
< ContentStyle VerticalAlign="Top">
< /ContentStyle>
< SizeGripImage Height="12px" Width="12px" />
< ContentCollection>
< dxpc:PopupControlContentControl runat="server">这是弹出来的<br />
呵呵,成功了</dxpc:PopupControlContentControl>
< /ContentCollection>
< CloseButtonImage Height="16px" Width="17px" />
< /dxpc:ASPxPopupControl>
< /div>
<span id="span1">show popu window</span>
< /form>
< /body>
< /html>
标红的部分就是触发点和弹出层的对应关系,需要注意的是,对于asp。net控件触发弹出层,必须通过相应的按钮动作来完成,在动作时间相应里边只用加上一句话:
ASPxPopupControl1.ShowOnPageLoad = true;
即可ASPxPopupControl1是你的弹出层的ID