ASP.NET GridView 实现课程表显示(动态合并单元格)实现步骤
程序员文章站
2024-03-05 12:50:42
gridview，asp.net中很常用的数据显示控件，这里，我将用这个控件来实现课程表的显示。首先说说课程表的显示与普通记录的显示有何不同？这里所说的普通记录是指直接从数...
gridview，asp.net中很常用的数据显示控件，这里，我将用这个控件来实现课程表的显示。首先说说课程表的显示与普通记录的显示有何不同？这里所说的普通记录是指直接从数据库中查询出来的、没有经过任何处理的记录。通常，我们用gridview显示这些普通记录，只需直接将这些记录表绑定到gridview中即可。但是，课程表的显示可不是这么简单，它需要将普通记录继续加工，需要根据记录中具体的数据来确定数据需要显示在哪一行、哪一列，而且需要根据课程开始时间和结束时间动态合并单元格，最后才是数据的显示。这就是课程表显示的难点之所在。好了，下面就看看我是如何实现的吧。
.aspx文件中代码：
<%@ page language="c#" autoeventwireup="true" codebehind="test.aspx.cs" inherits="databind.test" %>
<%@ register assembly="microsoft.reportviewer.webforms, version=10.0.0.0, culture=neutral, publickeytoken=b03f5f7f11d50a3a" namespace="microsoft.reporting.webforms" tagprefix="rsweb" %>
<!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"
onrowdatabound="gridview1_rowdatabound1" borderwidth="1">
<headerstyle wrap="false" />
<rowstyle horizontalalign="center" verticalalign="middle" />
</asp:gridview>
</div>
</form>
</body>
</html>
.aspx.cs文件中代码：
using system;
using system.collections.generic;
using system.linq;
using system.web;
using system.web.ui;
using system.web.ui.webcontrols;
using system.data.sqlclient;
using system.data;
using system.text.regularexpressions;
namespace databind
{
public partial class test : system.web.ui.page
{
protected void page_load(object sender, eventargs e)
{
sqlconnection con = db.createcon();//创建连接对象
sqldataadapter sda = new sqldataadapter();
sda.selectcommand = new sqlcommand("select * from schedule ", con);
dataset ds = new dataset();
sda.fill(ds);
datatable table = new datatable();
table = ds.tables[0];
datatable dtschedule = new datatable();//此表用于存放转换后的课程表（格式与日常见到的一样）
//添加八列
dtschedule.columns.add("课程表");
for (int i = 1; i < 8; i++)
{
dtschedule.columns.add("星期" + weekconverttochinese(i));
}
//添加八行
for (int i = 0; i < 8; i++)
{
dtschedule.rows.add();
}
//添加左侧固定信息（第几节课）
for (int i = 0; i < 8; i++)
{
dtschedule.rows[i][0] = "第" + converttochinese(i+1) + "节";
}
//此数组用于存放需要合并的单元格信息。如：需要合并第一列的一、二单元格
//那么，数组中一行的三个数分别为1,1,2
int[][] temparray = new int[table.rows.count][];
//数组初始化
for (int i = 0; i < table.rows.count; i++)
{
temparray[i] = new int[3];
for (int j = 0; j < 3; j++)
{
temparray[i][j] = 0;
}
}
//遍历table，将每条课表信息填在tab中适当的位置。
for (int i = 0; i < table.rows.count; i++)
{
//课是周几的课
string week = convert.tostring(table.rows[i]["week"]);
//课开始时间
string starttime =convert.tostring( table.rows[i]["starttime"]);
//课结束时间
string endtime = convert.tostring(table.rows[i]["endtime"]);
for (int weekcount = 1; weekcount < 8; weekcount++)//确定本条数据将来显示在哪一列
{
if (week == convert.tostring(dtschedule.columns[weekcount].columnname))//跟星期做比较，确定数据应该写在那一列
{
temparray[i][0] = weekcount;//记录星期（确定将来的数据显示在哪一列）
break;
}
}
for (int j = 0; j < dtschedule.rows.count; j++)//确定课程的开始时间和结束时间，并填写数据
{
string section =convert.tostring( dtschedule.rows[j][0]);//当前行是第几节课
if (section == starttime)//判断课程开始时间，确定位置，填写数据
{
temparray[i][1] = j;//记录上课开始时间（确定数据数据显示在哪一行）
dtschedule.rows[j][temparray[i][0]] = convert.tostring(table.rows[i]["coursename"]) + "<br />" +
convert.tostring(table.rows[i]["teachername"]);
}
if (section == endtime)//判断课程结束时间，记录位置
{
temparray[i][2] = j;//记录课结束时间
break;
}
}
}
gridview1.datasource = dtschedule;
gridview1.databind();
//合并单元格
for (int i = 0; i < table.rows.count; i++)
groupcol(gridview1, temparray[i][0], temparray[i][1], temparray[i][2]);
}
/// <summary>
/// 合并某列中的多个单元格
/// </summary>
/// <param name="gridview1"></param>
/// <param name="cols">要合并的那一列</param>
/// <param name="srow">开始行</param>
/// <param name="erow">结束行</param>
public static void groupcol(gridview gridview1, int cols, int srow, int erow)
{
//if (gridview1.rows.count < 1 || cols > gridview1.columns.count - 1)
//{
// return;
//}
//if (gridview1.rows.count < 1 || cols > gridview1.rows[0].cells.count - 1)
//{
// return;
//}
tablecell oldtc = gridview1.rows[srow].cells[cols];
for (int i = 1; i <= erow - srow; i++)
{
tablecell tc = gridview1.rows[srow + i].cells[cols];
tc.visible = false;
if (oldtc.rowspan == 0)
{
oldtc.rowspan = 1;
}
oldtc.rowspan++;
oldtc.verticalalign = verticalalign.middle;
}
}
string converttochinese(int x)
{
string cstr = "";
switch (x)
{
case 0: cstr = "零"; break;
case 1: cstr = "一"; break;
case 2: cstr = "二"; break;
case 3: cstr = "三"; break;
case 4: cstr = "四"; break;
case 5: cstr = "五"; break;
case 6: cstr = "六"; break;
case 7: cstr = "七"; break;
case 8: cstr = "八"; break;
case 9: cstr = "九"; break;
}
return (cstr);
}
//转换星期几
string weekconverttochinese(int x)
{
string cstr = "";
switch (x)
{
case 1: cstr = "一"; break;
case 2: cstr = "二"; break;
case 3: cstr = "三"; break;
case 4: cstr = "四"; break;
case 5: cstr = "五"; break;
case 6: cstr = "六"; break;
case 7: cstr = "日"; break;
}
return (cstr);
}
/// <summary>
/// 使得gridview中的内容可以换行
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void gridview1_rowdatabound1(object sender, gridviewroweventargs e)
{
if (e.row.rowtype == datacontrolrowtype.datarow)
{
tablecellcollection cells = e.row.cells;
foreach (tablecell cell in cells)
{
cell.text = server.htmldecode(cell.text); //注意：此处所有的列所有的html代码都会按照html格式输出，如果只需要其中的哪一列的数据需要转换，此处需要小的修改即可。
}
}
}
}
}
最终显示效果：
.aspx文件中代码：
复制代码 代码如下:
<%@ page language="c#" autoeventwireup="true" codebehind="test.aspx.cs" inherits="databind.test" %>
<%@ register assembly="microsoft.reportviewer.webforms, version=10.0.0.0, culture=neutral, publickeytoken=b03f5f7f11d50a3a" namespace="microsoft.reporting.webforms" tagprefix="rsweb" %>
<!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"
onrowdatabound="gridview1_rowdatabound1" borderwidth="1">
<headerstyle wrap="false" />
<rowstyle horizontalalign="center" verticalalign="middle" />
</asp:gridview>
</div>
</form>
</body>
</html>
.aspx.cs文件中代码：
复制代码 代码如下:
using system;
using system.collections.generic;
using system.linq;
using system.web;
using system.web.ui;
using system.web.ui.webcontrols;
using system.data.sqlclient;
using system.data;
using system.text.regularexpressions;
namespace databind
{
public partial class test : system.web.ui.page
{
protected void page_load(object sender, eventargs e)
{
sqlconnection con = db.createcon();//创建连接对象
sqldataadapter sda = new sqldataadapter();
sda.selectcommand = new sqlcommand("select * from schedule ", con);
dataset ds = new dataset();
sda.fill(ds);
datatable table = new datatable();
table = ds.tables[0];
datatable dtschedule = new datatable();//此表用于存放转换后的课程表（格式与日常见到的一样）
//添加八列
dtschedule.columns.add("课程表");
for (int i = 1; i < 8; i++)
{
dtschedule.columns.add("星期" + weekconverttochinese(i));
}
//添加八行
for (int i = 0; i < 8; i++)
{
dtschedule.rows.add();
}
//添加左侧固定信息（第几节课）
for (int i = 0; i < 8; i++)
{
dtschedule.rows[i][0] = "第" + converttochinese(i+1) + "节";
}
//此数组用于存放需要合并的单元格信息。如：需要合并第一列的一、二单元格
//那么，数组中一行的三个数分别为1,1,2
int[][] temparray = new int[table.rows.count][];
//数组初始化
for (int i = 0; i < table.rows.count; i++)
{
temparray[i] = new int[3];
for (int j = 0; j < 3; j++)
{
temparray[i][j] = 0;
}
}
//遍历table，将每条课表信息填在tab中适当的位置。
for (int i = 0; i < table.rows.count; i++)
{
//课是周几的课
string week = convert.tostring(table.rows[i]["week"]);
//课开始时间
string starttime =convert.tostring( table.rows[i]["starttime"]);
//课结束时间
string endtime = convert.tostring(table.rows[i]["endtime"]);
for (int weekcount = 1; weekcount < 8; weekcount++)//确定本条数据将来显示在哪一列
{
if (week == convert.tostring(dtschedule.columns[weekcount].columnname))//跟星期做比较，确定数据应该写在那一列
{
temparray[i][0] = weekcount;//记录星期（确定将来的数据显示在哪一列）
break;
}
}
for (int j = 0; j < dtschedule.rows.count; j++)//确定课程的开始时间和结束时间，并填写数据
{
string section =convert.tostring( dtschedule.rows[j][0]);//当前行是第几节课
if (section == starttime)//判断课程开始时间，确定位置，填写数据
{
temparray[i][1] = j;//记录上课开始时间（确定数据数据显示在哪一行）
dtschedule.rows[j][temparray[i][0]] = convert.tostring(table.rows[i]["coursename"]) + "<br />" +
convert.tostring(table.rows[i]["teachername"]);
}
if (section == endtime)//判断课程结束时间，记录位置
{
temparray[i][2] = j;//记录课结束时间
break;
}
}
}
gridview1.datasource = dtschedule;
gridview1.databind();
//合并单元格
for (int i = 0; i < table.rows.count; i++)
groupcol(gridview1, temparray[i][0], temparray[i][1], temparray[i][2]);
}
/// <summary>
/// 合并某列中的多个单元格
/// </summary>
/// <param name="gridview1"></param>
/// <param name="cols">要合并的那一列</param>
/// <param name="srow">开始行</param>
/// <param name="erow">结束行</param>
public static void groupcol(gridview gridview1, int cols, int srow, int erow)
{
//if (gridview1.rows.count < 1 || cols > gridview1.columns.count - 1)
//{
// return;
//}
//if (gridview1.rows.count < 1 || cols > gridview1.rows[0].cells.count - 1)
//{
// return;
//}
tablecell oldtc = gridview1.rows[srow].cells[cols];
for (int i = 1; i <= erow - srow; i++)
{
tablecell tc = gridview1.rows[srow + i].cells[cols];
tc.visible = false;
if (oldtc.rowspan == 0)
{
oldtc.rowspan = 1;
}
oldtc.rowspan++;
oldtc.verticalalign = verticalalign.middle;
}
}
string converttochinese(int x)
{
string cstr = "";
switch (x)
{
case 0: cstr = "零"; break;
case 1: cstr = "一"; break;
case 2: cstr = "二"; break;
case 3: cstr = "三"; break;
case 4: cstr = "四"; break;
case 5: cstr = "五"; break;
case 6: cstr = "六"; break;
case 7: cstr = "七"; break;
case 8: cstr = "八"; break;
case 9: cstr = "九"; break;
}
return (cstr);
}
//转换星期几
string weekconverttochinese(int x)
{
string cstr = "";
switch (x)
{
case 1: cstr = "一"; break;
case 2: cstr = "二"; break;
case 3: cstr = "三"; break;
case 4: cstr = "四"; break;
case 5: cstr = "五"; break;
case 6: cstr = "六"; break;
case 7: cstr = "日"; break;
}
return (cstr);
}
/// <summary>
/// 使得gridview中的内容可以换行
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void gridview1_rowdatabound1(object sender, gridviewroweventargs e)
{
if (e.row.rowtype == datacontrolrowtype.datarow)
{
tablecellcollection cells = e.row.cells;
foreach (tablecell cell in cells)
{
cell.text = server.htmldecode(cell.text); //注意：此处所有的列所有的html代码都会按照html格式输出，如果只需要其中的哪一列的数据需要转换，此处需要小的修改即可。
}
}
}
}
}
最终显示效果：