Asp.net-014:gridview Composite Table Header

Source: Internet
Author: User

Keep looking at a simple ASP.
The GridView believes that we use a lot more, generally for multi-line data display and operation will use this control. And for the table header, is also a very important part, it is responsible for classifying the data. And how to show the composite table header? It's pretty simple, too.
Displays composite headers, which can typically be implemented in the background through code. For a table header is made up of multiple header controls, a column is displayed in the general default header. For a composite header, you set the header to occupy more than one column or multiple rows. Or add a lot of headers, and then each header will occupy more than one column or more rows.
Look at a composite table header.


If only one table header is displayed: Ordinal name age gender industry professional experience,
Now added personal basic information and work information, in fact, the new header is two header control, they occupy 3 columns, so the effect of such a composite header. Look at the code:
Front Code:
Although the table header set by the foreground is not displayed at the end of the display, it is still to be written, because in order to avoid the memory, there are also columns to bind the data.
Need to add onrowcreated event to GridView.
Background code:
 protected void Page_Load (object sender, EventArgs e) {if (!                IsPostBack) {DataTable dt = InitData ();                This.dgPersons.DataSource = DT;            This.dgPersons.DataBind ();            }} private DataTable InitData () {datatable personcollect = new DataTable ();            Personcollect = new DataTable ();            PERSONCOLLECT.COLUMNS.ADD ("p_id");            PERSONCOLLECT.COLUMNS.ADD ("P_name");            PERSONCOLLECT.COLUMNS.ADD ("P_age");            PERSONCOLLECT.COLUMNS.ADD ("P_sex");            PERSONCOLLECT.COLUMNS.ADD ("P_industry");            PERSONCOLLECT.COLUMNS.ADD ("P_job");            PERSONCOLLECT.COLUMNS.ADD ("P_experience");                    if (PersonCollect.Rows.Count < 1) {for (int i = 0; i < ten; i++) {                    DataRow nrow = Personcollect.newrow (); nrow["p_id"] = System.Guid.NewGuid ().         ToString ();           nrow["p_name"] = "Northwest poplar";                    nrow["P_age"] = 27;                    nrow["p_sex"] = "male";                    nrow["p_industry"] = "SOFTWARE";                    nrow["p_job"] = "Senior Engineer";                    nrow["p_experience"] = "several years";                PERSONCOLLECT.ROWS.ADD (Nrow);        }} return personcollect;        } protected void dgpersons_rowcreated (object sender, GridViewRowEventArgs e) {switch (E.row.rowtype) {Case datacontrolrowtype.header://line is header row Tablecellcollection Personheader = e.ro                     w.cells;//the header row of the cell collection personheader.clear ();//empty//Add a header for example, and the header has three columns so the sequence number is 0 1 2                    Personheader.add (New Tableheadercell ()); Personheader[0]. Attributes.Add ("RowSpan", "2"); Across 2 lines personheader[0]. Attributes.Add ("colspan", "1"); Across 1 columns personheader[0].                    Attributes.Add ("bgcolor", "darkgreen"); Personheader[0].                    Text = "serial number";                    Personheader.add (New Tableheadercell ()); PERSONHEADER[1]. Attributes.Add ("colspan", "3"); Across 3 columns personheader[1].                    Attributes.Add ("bgcolor", "darkyellow"); PERSONHEADER[1].                    Text = "Personal basic information"; Personheader.add (New TableheadErcell ()); PERSONHEADER[2]. Attributes.Add ("colspan", "3"); Across 3 columns personheader[2].                    Attributes.Add ("bgcolor", "darkblue"); PERSONHEADER[2].                    Text = "Job Information </th></tr><tr>";                    Add a table header Personheader.add (new Tableheadercell ()); PERSONHEADER[3].                    Attributes.Add ("bgcolor", "khaki"); PERSONHEADER[3].                    Text = "name";                    Personheader.add (New Tableheadercell ()); PERSONHEADER[4].                    Attributes.Add ("bgcolor", "khaki"); PERSONHEADER[4].                    Text = "Age";                    Personheader.add (New Tableheadercell ()); PERSONHEADER[5].                    Attributes.Add ("bgcolor", "khaki"); PERSONHEADER[5].                    Text = "gender";                    Personheader.add (New Tableheadercell ()); PERSONHEADER[6].                    Attributes.Add ("bgcolor", "khaki"); PERSONHEADER[6].                Text = "Industry";    Personheader.add (New Tableheadercell ()); PERSONHEADER[7].                    Attributes.Add ("bgcolor", "khaki"); PERSONHEADER[7].                    Text = "occupation";                    Personheader.add (New Tableheadercell ()); PERSONHEADER[8].                    Attributes.Add ("bgcolor", "khaki"); PERSONHEADER[8].                    Text = "experience";            You can also continue to add//remember that no matter how many row headers, the ordinal of each column is incremented once, and a newline-</th></tr><tr> break is required; }}

The first few methods are to load the data, the Main method is: Onrowcreated event of the dgpersons_rowcreated.
Keep in mind that no matter how many headers it adds, its ordinal number is incremented, and if the header has more than one row, you need to add a newline flag after the head at the end of the line. You can then display the effect of the multiline header.
The effect of multiple rows of composite headers loaded with data:


is not particularly simple ...
Code Download: http://download.csdn.net/detail/yysyangyangyangshan/7812499

Asp.net-014:gridview Composite Table Header

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.