DataGrid multidimensional table header, header cross row Cross column design and binding data _ practical Tips

The DataGrid is actually an HTML table
When you think about it, it's a good idea to set up a multidimensional table header.
HTML code

Copy Code code as follows:

<asp:datagrid id= "DATAGRID1" runat= "Server"
onitemdatabound= "Datagrid1_itemdatabound" >
</asp:DataGrid>

And then bind the data

Copy Code code as follows:

protected void Page_Load (object sender, EventArgs e)
{
String strSQL = "Select EmpID, Name, Branchid, loginID, PWD, Sex, Empcode, Email, Officetel from Mrbaseinf";
SqlConnection con = new SqlConnection ("server=.; Database=ioffice2009;uid=sa;pwd=sa ");
DataSet ds = new DataSet ();
SqlDataAdapter ter = new SqlDataAdapter (strSQL, con);
Con. Open ();
ter. Fill (DS);
Con. Close ();
This. DataGrid1.DataSource = ds;
Datagrid1.databind ();
}

Next Add Datagrid1_itemdataboun Event

Copy Code code as follows:

protected void Datagrid1_itemdatabound (object sender, DataGridItemEventArgs e)
{
if (E.item.itemtype==listitemtype.header)
{
E.item.cells[0]. RowSpan = 2;
E.ITEM.CELLS[1]. RowSpan = 2;
E.ITEM.CELLS[2]. RowSpan = 2;
E.ITEM.CELLS[3]. RowSpan = 2;
E.ITEM.CELLS[4]. RowSpan = 2;
E.ITEM.CELLS[5]. ColumnSpan = 4;
E.ITEM.CELLS[5]. HorizontalAlign = Horizontalalign.center;
E.ITEM.CELLS[5]. Text = "Test </td></tr><tr><td> column 1</td><td> column 2</td><td> column 3</td> <td> column 4</td></tr> ";
E.ITEM.CELLS[6]. Visible = false;
E.ITEM.CELLS[7]. Visible = false;
E.ITEM.CELLS[8]. Visible = false;
}
}

Effect chart