ASP. NET GridView implementation steps for curriculum display (Dynamic merging of cells)

Source: Internet
Author: User

A commonly used data display control in GridView and ASP. NET. Here, I will use this control to display the curriculum. First, what is the difference between the display of the curriculum and the display of common records? The general record here refers to the record that is directly queried from the database and has not been processed. Normally, you only need to bind these record tables to the GridView to display these normal records using the GridView. However, the display of the curriculum is not that simple. It needs to process general records and determine the row and column of data to be displayed based on the specific data in the records, in addition, you need to dynamically merge cells based on the course start time and end time, and finally display the data. This is the difficulty of the Curriculum display. Well, let's see how I implement it.
Code in the. aspx File:
Copy codeThe Code is as follows:
<% @ 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>

Code in. aspx. cs File:
Copy codeThe Code is as follows:
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 (); // create a connection object
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 (); // This table is used to store the converted curriculum (the format is the same as that seen in daily life)
// Add eight columns
DtSchedule. Columns. Add ("curriculum ");
For (int I = 1; I <8; I ++)
{
DtSchedule. Columns. Add ("Week" + WeekConvertToChinese (I ));
}
// Add eight rows
For (int I = 0; I <8; I ++)
{
DtSchedule. Rows. Add ();
}
// Add the fixed information on the left side (course number)
For (int I = 0; I <8; I ++)
{
DtSchedule. Rows [I] [0] = "section" + ConvertToChinese (I + 1) + ";
}
// This array is used to store the information of cells to be merged. For example, you need to merge the first and second cells in the first column.
// The numbers of three rows in the array are and 2, respectively.
Int [] [] tempArray = new int [table. Rows. Count] [];
// Array Initialization
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;
}
}
// Traverse the table and enter the information of each course table in the appropriate position on the tab.
For (int I = 0; I <table. Rows. Count; I ++)
{
// The number of weeks
String week = Convert. ToString (table. Rows [I] ["Week"]);
// Course start time
String startTime = Convert. ToString (table. Rows [I] ["StartTime"]);
// End time of the course
String endTime = Convert. ToString (table. Rows [I] ["EndTime"]);
For (int weekCount = 1; weekCount <8; weekCount ++) // determines the columns in which the data is displayed in the future.
{
If (week = Convert. ToString (dtSchedule. Columns [weekCount]. ColumnName) // compare with the week, and confirm that the data should be written in that column
{
TempArray [I] [0] = weekCount; // records the week (determines which column of future data is displayed)
Break;
}
}
For (int j = 0; j <dtSchedule. Rows. Count; j ++) // determine the course start time and End Time, and enter the data
{
String section = Convert. ToString (dtSchedule. Rows [j] [0]); // the class number of the current row
If (section = startTime) // determine the course start time, locate the course, and enter data
{
TempArray [I] [1] = j; // record the start time of the course (determine which row of data is displayed)
DtSchedule. Rows [j] [tempArray [I] [0] = Convert. ToString (table. Rows [I] ["CourseName"]) + "<br/>" +
Convert. ToString (table. Rows [I] ["TeacherName"]);
}
If (section = endTime) // judge the course end time and record the location
{
TempArray [I] [2] = j; // records the end time of the course.
Break;
}
}
}
GridView1.DataSource = dtSchedule;
GridView1.DataBind ();
// Merge Cells
For (int I = 0; I <table. Rows. Count; I ++)
GroupCol (GridView1, tempArray [I] [0], tempArray [I] [1], tempArray [I] [2]);
}
/// <Summary>
/// Merge multiple cells in a column
/// </Summary>
/// <Param name = "GridView1"> </param>
/// <Param name = "cols"> the column to be merged </param>
/// <Param name = "sRow"> Start row </param>
/// <Param name = "eRow"> end row </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 = "0"; break;
Case 1: cstr = "1"; break;
Case 2: cstr = "2"; break;
Case 3: cstr = "3"; break;
Case 4: cstr = "4"; break;
Case 5: cstr = "5"; break;
Case 6: cstr = "6"; break;
Case 7: cstr = "7"; break;
Case 8: cstr = "8"; break;
Case 9: cstr = "9"; break;
}
Return (cstr );
}
// Change the day of the week
String WeekConvertToChinese (int x)
{
String cstr = "";
Switch (x)
{
Case 1: cstr = "1"; break;
Case 2: cstr = "2"; break;
Case 3: cstr = "3"; break;
Case 4: cstr = "4"; break;
Case 5: cstr = "5"; break;
Case 6: cstr = "6"; break;
Case 7: cstr = "day"; break;
}
Return (cstr );
}
/// <Summary>
/// Make the content in the GridView wrap
/// </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); // Note: All the html code of all columns here will be output in html format. If you only need to convert the data of which column, A small modification is required here.
}
}
}
}
}

Final display effect:

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.