如何通過動態生成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;
}
}
}
