如何通过动态生成Html灵活实现DataGrid分类统计的界面显示功能
2024-08-26 00:15:34
供稿：网友
步入it业已经有几年的时间了,从最早接触pb6.0到现在.net技术,计算机技术不论是从硬件还是软件都有巨大的进步.而中国程序员总体水平在世界上也是远远落后，其中缺乏完善的体系、必要的交流和程序员个人英雄主义的思想是主要原因.前不久在工作中遇到一个关于用datagrid分类显示数据的问题，显示的样式入下图所示: 希望能为遇到类似问题的朋友提供一个解决方案,并掌握类似问题的解决方法.
问题剖析:
以上为例,每门课程属于不同的类别,需要将显示数据的第一项类别进行汇总显示.用标准的datagrid是难于实现上述功能的.显然需要依靠自身来解决.
思路:
归根到底,不论何种样式的表格显示,表现到前台都是html的table元素,因此如果能够在读取数据时动态确定html样式,并通过div将html生成到前台显示的话,就可以控制复杂的显示.这里面其实包含了从已有显示的html反推到动态html生成的过程.
源代码及注释:
定义类保存类别名字和数据条数
public class keyval
{
private string m_skey;
private string m_sval;
public string strkey
{
get
{
return m_skey;
}
set
{
m_skey=value;
}
}
public string strval
{
get
{
return m_sval;
}
set
{
m_sval=value;
}
}
public keyval()
{}
public keyval(string skey,string sval)
{
strkey=skey;
strval=sval;
}
}
测试页代码和相关函数
using system;
using system.collections;
using system.componentmodel;
using system.data;
using system.drawing;
using system.web;
using system.web.sessionstate;
using system.web.ui;
using system.web.ui.webcontrols;
using system.web.ui.htmlcontrols;
using system.security.principal;
using microsoft.web.ui.webcontrols;
using system.text;
namespace eiswebsite.webinternet
{
/// <summary>
/// classcourse 的摘要说明。
/// </summary>
public class classcourse : system.web.ui.page
{
protected system.web.ui.webcontrols.dropdownlist specialtyid;
protected system.web.ui.htmlcontrols.htmlgenericcontrol maindiv;
//
#region 页面初始化
private void page_load(object sender, system.eventargs e)
{
if (!page.ispostback)
{
appglobal.cboxfillspecialtydata(ref this.specialtyid,true);
}
}
#endregion
#region web 窗体设计器生成的代码
override protected void oninit(eventargs e)
{
//
// codegen: 该调用是 asp.net web 窗体设计器所必需的。
//
initializecomponent();
base.oninit(e);
}
/// <summary>
/// 设计器支持所需的方法 - 不要使用代码编辑器修改
/// 此方法的内容。
/// </summary>
private void initializecomponent()
{
this.specialtyid.selectedindexchanged += new system.eventhandler(this.specialtyid_selectedindexchanged);
this.load += new system.eventhandler(this.page_load);
}
#endregion
private string createouthtml()
{
//取出类型数目以及名称
dataset dset=new dataset();
dset=添加自己的获取数据集的函数(灵活设计sql语句)结果为类型、数目
//appglobal.appsyswebservice.classcourseteachermainfilters(item);
arraylist mlist=new arraylist();
foreach(datarow drow in dset.tables[0].rows)
{
keyval mobj=new keyval();
mobj.strkey=drow[0].tostring();
mobj.strval=drow[1].tostring();
mlist.add(mobj);
}
stringbuilder outhtml=new stringbuilder();
dset=添加自己的数据集函数.注意数据的排序方式与上同
//appglobal.appsyswebservice.classcourseteacherfilters(item);
//添加固定表头
outhtml.append("<table cellspacing='0' cellpadding='0' align='center' rules='all' bordercolor='black' border='1'"
+"id='grid'"+
" style='word-break:break-all; border-right:black 1px solid; border-top:black 1px solid; border-left:black 1px solid; width:100%; border-bottom:black 1px solid; border-collapse:collapse'>"
);
outhtml.append("<table cellspacing='0' cellpadding='0' align='center' rules='all' bordercolor='black' border='1'"
+"id='agrid'"+
" style='word-break:break-all;border-right:black 1px solid; border-top:black 1px solid; border-left:black 1px solid; width:100%; border-bottom:black 1px solid; border-collapse:collapse'>");
outhtml.append("<tr align='center'>"+
"<td width='87' style='width: 87px; height: 34px'>类别</td>"+
"<td style='width: 253px; height: 34px'>课程编号</td>"+
"<td style='width: 280px; height: 34px'>课程名称</td>"+
"<td style='width: 86px; height: 34px'>学分</td>"+
"<td style='width: 140px; height: 34px' >"+
"<table width='100%' height='100%' cellpadding='0' cellspacing='0'>"+
"<tr>"+
"<td align='center'width='33%' ></td>"+
"<td align='center'width='33%'>学期</td>"+
"<td align='center'width='33%' ></td>"+
"</tr>"+
"<tr>"+
"<td align='center' width='33%'>i</td>"+
"<td align='center' width='33%'>ii</td>"+
"<td align='center' width='33%'>iii</td>"+
"</tr>"+
"</table>"+
"</td>"+
"<td style='width: 86px; height: 34px'>教师名称</td>"+
"</tr>");
outhtml.append("</table><table cellspacing='0' cellpadding='0' align='center' rules='all' bordercolor='black' border='1'"
+"id='bgrid'"+
" style='word-break:break-all;border-right:black 1px solid; border-top:black 1px solid; border-left:black 1px solid; width:775px; border-bottom:black 1px solid; border-collapse:collapse'>");
string srctype="";
string newtype="";
foreach(datarow drow in dset.tables[0].rows)
{
outhtml.append("<tr align='center' height='24px' style='word-break:break-all;'> ");
newtype=drow["keyvalue"].tostring();
if (srctype!=newtype)
outhtml.append("<td width='80' style='width: 80px; height: 34px' rowspan="+seachobj(drow["keyvalue"].tostring(),mlist).strval+">"+seachobj(drow["keyvalue"].tostring(),mlist).strkey+"</td>");
srctype=newtype;
outhtml.append("<td width=231px >"+drow["courseid"].tostring()+"</td>");
outhtml.append("<td width=255px>"+drow["coursename"].tostring()+"</td>");
outhtml.append("<td width=80px>"+drow["credit"].tostring()+"</td>");
// outhtml.append("<td width=100px>");
// outhtml.append("<table width='110' height='100%' cellpadding='0' cellspacing='0' bordercolor='black' border='1'>"+
// "<tr>");
switch (convert.toint16(drow["coursetime"].tostring(),10))
{
case 1:
outhtml.append("<td width=43px>√"+"</td>");
outhtml.append("<td width=43px></td>");
outhtml.append("<td width=43px></td>");
break;
case 2:
outhtml.append("<td width=43px></td>");
outhtml.append("<td width=43px>√"+"</td>");
outhtml.append("<td width=43px></td>");
break;
case 3:
outhtml.append("<td width=43px></td>");
outhtml.append("<td width=43px></td>");
outhtml.append("<td width=3px>√"+"</td>");
break;
default:
outhtml.append("<td width=43px></td>");
outhtml.append("<td width=43px></td>");
outhtml.append("<td width=43px></td>");
break;
}
// outhtml.append("</tr></table>");
// outhtml.append("</td>");
outhtml.append("<td width=79px style='word-break:break-all;'>"+drow["tname"].tostring()+"</td>");
outhtml.append("</tr>");
}
//添加固定表尾部
outhtml.append("</table>");
outhtml.append("</table>");
//
// dgrid.datasource=dset;
// dgrid.databind();
return outhtml.tostring();
}
private keyval seachobj(string strkey, arraylist mlist)
{
for (int i=0;i<=mlist.count-1;i++)
{
if (((keyval)mlist[i]).strkey==strkey)
return (keyval)mlist[i];
}
return null;
}
}
}
