Home > Developer > Web Develop
ASP.NET-014: Gridview composite header, 014 gridview
Continue to look at a simple ASP. NET application.
Gridview is believed to be widely used. This control is generally used for displaying and operating multi-row data. The header is also an important part. It is responsible for classifying data. How do I display the composite headers? This is also quite simple.
Display the composite header, which can be implemented by code in the background. The Header is composed of multiple Header controls. Generally, one Header displays one column by default. For the composite Header, the Header is set to occupy multiple columns or rows. You can also add multiple headers, and each Header occupies multiple columns or multiple rows.
Let's look at a composite header.
If only one header is displayed, the sequence number indicates the age, gender, and Industry Occupation experience,
Now the basic personal information and work information are added. In fact, this Header is added with two Header controls, which occupy three columns respectively, so the compound Header is achieved. Let's look at the Code:
Front-end code:
<Html xmlns = "http://www.w3.org/1999/xhtml"> Although the header set at the front end is not displayed, you still need to write it, because you do not have to remember it, and you need to bind data to the column items.
You must add an OnRowCreated event to the 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 able (); 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 <10; 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: // The row is the title line TableCellCollection personHeader = e. row. cells; // The set of Cells in the header row. clear (); // Clear // Add a header. For example, if the header has three columns, the serial number is 0 1 2 personHeader. add (new TableHeaderCell (); personHeader [0]. attributes. add ("rowspan", "2"); // cross-line personHeader [0]. attributes. add ("colspan", "1"); // cross-column personHeader [0]. attributes. add ("bgcolor", "DarkGreen"); personHeader [0]. text = "no."; personHeader. add (new TableHeaderCell (); personHeader [1]. attributes. add ("colspan", "3"); // contains three columns of personHeader [1]. attributes. add ("bgcolor", "DarkYellow"); personHeader [1]. text = "personal basic information"; personHeader. add (new TableHeaderCell (); personHeader [2]. attributes. add ("colspan", "3"); // contains three columns of personHeader [2]. attributes. add ("bgcolor", "DarkBlue"); personHeader [2]. text = "Work Information </th> </tr> <tr>"; // Add a 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 add more rows. // remember that no matter how many rows are headers, the sequence numbers of each column are incremented at a time, and newline-</th> </tr> <tr> break ;}}
The preceding methods are used to load data. The main method is: DgPersons_RowCreated of the OnRowCreated event.
Remember that no matter how many headers are added, the sequence number is incremental. If the Header has multiple rows, you need to add a line feed sign after the end of the line. Then, the results of multi-row headers can be displayed.
The results of the multi-row composite header loaded with data:
Is it very simple...
Code download: http://download.csdn.net/detail/yysyangyangyangshan/7812499
In aspnet, how does the GridView fix the header?How do you add a scroll bar to the GridView? Is it nested in the div?
In ASPnet, how does one fix that the GridView header does not scroll along with the vertical and horizontal scroll bars ~~<Div> header </div>
<Div> the content of the GridView </div>, and the header of the GridView is hidden.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
