How to realize the interface display function of DataGrid classification statistic flexibly by dynamically generating HTML

Datagrid| News | Generate html| Statistics | It has been a few years since the first contact with pb6.0 to now. NET technology, Computer technology, whether from hardware or software, has made great progress. And the overall level of Chinese programmers in the world is also far behind, which lacks a sound system, The necessary communication and programmer's idea of individual heroism is the main reason. Not long ago in the work encountered a question about using the DataGrid category to display data, the style shown in the following image: I hope to be able to meet similar problems with a friend to provide a solution, and grasp the solution of similar problems.

Problem Analysis:

For example, each course belongs to a different category, and the first category that displays the data needs to be summarized. Using a standard DataGrid is difficult to achieve. It is clear that you need to solve it on your own.

Ideas:

In the final analysis, regardless of the style of the table display, the foreground is a TABLE element of HTML, so if you can read the data dynamically determine the HTML style, and through the div HTML generated to the foreground display, You can control the complex display. This actually contains the process of pushing back from the HTML that is already displayed to the Dynamic HTML generation.

Source Code and comments:

Define class name and number of data bars

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;
}
}

Test page code and related functions

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>
Summary description of the classcourse.
</summary>
public class ClassCourse:System.Web.UI.Page
{
protected System.Web.UI.WebControls.DropDownList Specialtyid;
protected System.Web.UI.HtmlControls.HtmlGenericControl Maindiv;

//
#region Page Initialization
private void Page_Load (object sender, System.EventArgs e)
{

if (! Page.IsPostBack)
{
Appglobal.cboxfillspecialtydata (ref this.) Specialtyid,true);
}
}

#endregion

Code generated #region the Web forms Designer
Override protected void OnInit (EventArgs e)
{
//
CodeGen: This call is required for the ASP.net Web forms Designer.
//
InitializeComponent ();
Base. OnInit (e);
}

<summary>
Designer supports required methods-do not use the Code editor to modify
The contents of this method.
</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 ()
{


Number of out types and name
DataSet dset=new DataSet ();

dset= add your own function to get data set (Flexible design SQL statement) result is type, number

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= Add your own dataset function. Note that the data is sorted in the same way as the

AppGlobal.AppSysWebService.ClassCourseTeacherFilters (Item);
Add a fixed table header
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= ' style= ' width:87px; Height:34px ' > Category </td> ' +
"<td style= ' width:253px; Height:34px ' > Course number </td> ' +
"<td style= ' width:280px; Height:34px ' > Course name </td> ' +
"<td style= ' width:86px; Height:34px ' > Credits </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% ' > Semester </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 ' > Teacher name </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= ') > ");

newtype=drow["KeyValue"]. ToString ();

if (Srctype!=newtype)
Outhtml.append ("<td width= ' 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= ' 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>");
}
Add a fixed table tail
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;
}



}

}