none
【ASP.NET】gridview自定义表头为什么会换行呢? RRS feed

  • 问题

  • GridView合并表头多重表头无错完美版(以合并3列3行举例)


    效果图:



    后台代码:
    using System;
    using System.Data;
    using System.Configuration;
    using System.Web;
    using System.Web.Security;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Web.UI.WebControls.WebParts;
    using System.Web.UI.HtmlControls;
    using System.Data.SqlClient;
    using System.Drawing;
    public partial class _Default : System.Web.UI.Page
    {
        SqlConnection sqlcon;
        SqlCommand sqlcom;
        string strCon = "Data Source=(local);Database=北风贸易;Uid=sa;Pwd=sa";
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                bind();
               
            }
        }
        protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e)
        {
            GridView1.EditIndex = e.NewEditIndex;
            bind();
        }
        protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e)
        {
            sqlcon = new SqlConnection(strCon);
            string sqlstr = "update 飞狐工作室 set 姓名='"
                + ((TextBox)(GridView1.Rows[e.RowIndex].Cells[1].Controls[0])).Text.ToString().Trim() + "',家庭住址='"
                + ((TextBox)(GridView1.Rows[e.RowIndex].Cells[3].Controls[0])).Text.ToString().Trim() + "' where 身份证号码='"
                + GridView1.DataKeys[e.RowIndex].Value.ToString() + "'";
            sqlcom=new SqlCommand(sqlstr,sqlcon);
            sqlcon.Open();
            sqlcom.ExecuteNonQuery();
            sqlcon.Close();
            GridView1.EditIndex = -1;
            bind();
        }
        protected void GridView1_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
        {
            GridView1.EditIndex = -1;
            bind();
        }
        public void bind()
        {
            string sqlstr = "select top 10 * from 飞狐工作室";
            sqlcon = new SqlConnection(strCon);
            SqlDataAdapter myda = new SqlDataAdapter(sqlstr, sqlcon);
            DataSet myds = new DataSet();
            sqlcon.Open();
            myda.Fill(myds, "飞狐工作室");
            GridView1.DataSource = myds;
            GridView1.DataKeyNames = new string[] { "身份证号码" };
            GridView1.DataBind();
            sqlcon.Close();
        }

    //这里就是解决方案
        protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
        {
            switch (e.Row.RowType)
            {
                case DataControlRowType.Header:
                    //第一行表头
                    TableCellCollection tcHeader = e.Row.Cells;
                    tcHeader.Clear();
                    tcHeader.Add(new TableHeaderCell());
                    tcHeader[0].Attributes.Add("rowspan", "3"); //跨Row
                    tcHeader[0].Attributes.Add("bgcolor", "white");
                    tcHeader[0].Text = "";
                    tcHeader.Add(new TableHeaderCell());
                    //tcHeader[1].Attributes.Add("bgcolor", "Red");
                    tcHeader[1].Attributes.Add("colspan", "6"); //跨Column
                    tcHeader[1].Text = "全部信息</th></tr><tr>";

                    //第二行表头
                    tcHeader.Add(new TableHeaderCell());
                    tcHeader[2].Attributes.Add("bgcolor", "DarkSeaGreen");
                    tcHeader[2].Text = "身份证号码";
                    tcHeader.Add(new TableHeaderCell());
                    tcHeader[3].Attributes.Add("bgcolor", "LightSteelBlue");
                    tcHeader[3].Attributes.Add("colspan", "2");
                    tcHeader[3].Text = "基本信息";
                    tcHeader.Add(new TableHeaderCell());
                    tcHeader[4].Attributes.Add("bgcolor", "DarkSeaGreen");
                    tcHeader[4].Text = "福利";
                    tcHeader.Add(new TableHeaderCell());
                    tcHeader[5].Attributes.Add("bgcolor", "LightSteelBlue");
                    tcHeader[5].Attributes.Add("colspan", "2");
                    tcHeader[5].Text = "联系方式</th></tr><tr>";

                    //第三行表头
                    tcHeader.Add(new TableHeaderCell());
                    tcHeader[6].Attributes.Add("bgcolor", "Khaki");
                    tcHeader[6].Text = "身份证号码";
                    tcHeader.Add(new TableHeaderCell());
                    tcHeader[7].Attributes.Add("bgcolor", "Khaki");
                    tcHeader[7].Text = "姓名";
                    tcHeader.Add(new TableHeaderCell());
                    tcHeader[8].Attributes.Add("bgcolor", "Khaki");
                    tcHeader[8].Text = "出生日期";
                    tcHeader.Add(new TableHeaderCell());
                    tcHeader[9].Attributes.Add("bgcolor", "Khaki");
                    tcHeader[9].Text = "薪水";
                    tcHeader.Add(new TableHeaderCell());
                    tcHeader[10].Attributes.Add("bgcolor", "Khaki");
                    tcHeader[10].Text = "家庭住址";
                    tcHeader.Add(new TableHeaderCell());
                    tcHeader[11].Attributes.Add("bgcolor", "Khaki");
                    tcHeader[11].Text = "邮政编码";
                    break;
            }
        }
    }

    前台:
    <!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>GridView合并多重表头表头 清清月儿http://blog.csdn.net/21aspnet </title>
    </head>
    <body >
        <form id="form1" runat="server">
        <div  >
                       <asp:GridView ID="GridView1" runat="server"    AutoGenerateColumns="False" CellPadding="3"  OnRowEditing="GridView1_RowEditing"
                            OnRowUpdating="GridView1_RowUpdating" OnRowCancelingEdit="GridView1_RowCancelingEdit" BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" Font-Size="12px" OnRowCreated="GridView1_RowCreated"  >
                            <FooterStyle BackColor="White" ForeColor="#000066" />
                            <Columns>
                                <asp:CommandField HeaderText="编辑" ShowEditButton="True" />
                                <asp:BoundField DataField="身份证号码" HeaderText="编号" ReadOnly="True" />
                                <asp:BoundField DataField="姓名" HeaderText="姓名"  />
                                <asp:BoundField DataField="出生日期" HeaderText="邮政编码"  />
                                 <asp:BoundField DataField="起薪" HeaderText="起薪"  />
                                <asp:BoundField DataField="家庭住址" HeaderText="家庭住址"  />
                                <asp:BoundField DataField="邮政编码" HeaderText="邮政编码" />
                              
                            </Columns>
                            <RowStyle ForeColor="#000066" />
                            <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
                            <PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left"  CssClass="ms-formlabel DataGridFixedHeader"/>
                            <HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" />
                        </asp:GridView>
            </div>

        </form>
    </body>
    </html>



    以上摘自网上流传GridView72般绝技,我想不明白的是,为什么其中的“身份证号码” 会在第二行呢?

    从代码上看 tcHeader.Add(new TableHeaderCell());
                    tcHeader[2].Attributes.Add("bgcolor", "DarkSeaGreen");
                    tcHeader[2].Text = "身份证号码";

    根本看不出为什么要再第二行显示,而我再本机做的列子却是把“身份证号码”添加在了“全部信息”的后面,一样的代码,效果怎么不一样呢?请高手指教


    煜诚海参专卖 淘宝店铺:http://jinweb.taobao.com
    2011年1月11日 16:30

答案

  • 你好,我试过上面代码没有问题,请检查你的代码

     

    代码中,设置第一行的表头的代码块的最后一行

    tcHeader[1].Text = "全部信息</th></tr><tr>";

    在HTML里</tr>是表格table当前行结束的标签,而<tr>是新行开始的标签

    在返回到客户端的HTML代码中是没有GridView的,GridView以HTML表格的形式呈现,上面的实现就是基于这一点

    • 已标记为答案 jinwb1982 2011年1月12日 6:32
    2011年1月12日 2:12

全部回复

  • 你不是添加了2次吗
    【孟子E章】
    2011年1月12日 0:32
    版主
  •  添加了两次?在哪啊?
    煜诚海参专卖 淘宝店铺:http://jinweb.taobao.com
    2011年1月12日 0:42
  • 你好,我试过上面代码没有问题,请检查你的代码

     

    代码中,设置第一行的表头的代码块的最后一行

    tcHeader[1].Text = "全部信息</th></tr><tr>";

    在HTML里</tr>是表格table当前行结束的标签,而<tr>是新行开始的标签

    在返回到客户端的HTML代码中是没有GridView的,GridView以HTML表格的形式呈现,上面的实现就是基于这一点

    • 已标记为答案 jinwb1982 2011年1月12日 6:32
    2011年1月12日 2:12
  • <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
    
    <!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" AutoGenerateColumns="False" 
          CellPadding="3" BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" 
          BorderWidth="1px" Font-Size="12px" OnRowCreated="GridView1_RowCreated" >
                <FooterStyle BackColor="White" ForeColor="#000066" />
                <Columns>
                  <asp:CommandField HeaderText="编辑" ShowEditButton="True" />
                  <asp:BoundField DataField="身份证号码" HeaderText="编号" ReadOnly="True" />
                  <asp:BoundField DataField="姓名" HeaderText="姓名" />
                  <asp:BoundField DataField="出生日期" HeaderText="邮政编码" />
                   <asp:BoundField DataField="起薪" HeaderText="起薪" />
                  <asp:BoundField DataField="家庭住址" HeaderText="家庭住址" />
                  <asp:BoundField DataField="邮政编码" HeaderText="邮政编码" />
                  
                </Columns>
                <RowStyle ForeColor="#000066" />
                <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
                <PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" CssClass="ms-formlabel DataGridFixedHeader"/>
                <HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" />
              </asp:GridView>
    
      </div>
      </form>
    </body>
    </html>
    
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Data;
    
    public partial class _Default : System.Web.UI.Page
    {
      protected void Page_Load(object sender, EventArgs e)
      {
        if (!IsPostBack)
        {
          DataTable dt = new DataTable();
          dt.Columns.Add(new DataColumn("身份证号码"));
          dt.Columns.Add(new DataColumn("姓名"));
          dt.Columns.Add(new DataColumn("出生日期"));
          dt.Columns.Add(new DataColumn("起薪"));
          dt.Columns.Add(new DataColumn("家庭住址"));
          dt.Columns.Add(new DataColumn("邮政编码"));
          dt.Rows.Add(new object[] { "1", "2", "3", "4", "5", "6" });
          GridView1.DataSource = dt;
          GridView1.DataBind();
        }
      }
      protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
      {
        switch (e.Row.RowType)
        {
          case DataControlRowType.Header:
            //第一行表头
            TableCellCollection tcHeader = e.Row.Cells;
            tcHeader.Clear();
            tcHeader.Add(new TableHeaderCell());
            tcHeader[0].Attributes.Add("rowspan", "3"); //跨Row
            tcHeader[0].Attributes.Add("bgcolor", "white");
            tcHeader[0].Text = "";
            tcHeader.Add(new TableHeaderCell());
            //tcHeader[1].Attributes.Add("bgcolor", "Red");
            tcHeader[1].Attributes.Add("colspan", "6"); //跨Column
            tcHeader[1].Text = "全部信息</th></tr><tr>";
    
            //第二行表头
            tcHeader.Add(new TableHeaderCell());
            tcHeader[2].Attributes.Add("bgcolor", "DarkSeaGreen");
            tcHeader[2].Text = "身份证号码";
            tcHeader.Add(new TableHeaderCell());
            tcHeader[3].Attributes.Add("bgcolor", "LightSteelBlue");
            tcHeader[3].Attributes.Add("colspan", "2");
            tcHeader[3].Text = "基本信息";
            tcHeader.Add(new TableHeaderCell());
            tcHeader[4].Attributes.Add("bgcolor", "DarkSeaGreen");
            tcHeader[4].Text = "福利";
            tcHeader.Add(new TableHeaderCell());
            tcHeader[5].Attributes.Add("bgcolor", "LightSteelBlue");
            tcHeader[5].Attributes.Add("colspan", "2");
            tcHeader[5].Text = "联系方式</th></tr><tr>";
    
            //第三行表头
            tcHeader.Add(new TableHeaderCell());
            tcHeader[6].Attributes.Add("bgcolor", "Khaki");
            tcHeader[6].Text = "身份证号码";
            tcHeader.Add(new TableHeaderCell());
            tcHeader[7].Attributes.Add("bgcolor", "Khaki");
            tcHeader[7].Text = "姓名";
            tcHeader.Add(new TableHeaderCell());
            tcHeader[8].Attributes.Add("bgcolor", "Khaki");
            tcHeader[8].Text = "出生日期";
            tcHeader.Add(new TableHeaderCell());
            tcHeader[9].Attributes.Add("bgcolor", "Khaki");
            tcHeader[9].Text = "薪水";
            tcHeader.Add(new TableHeaderCell());
            tcHeader[10].Attributes.Add("bgcolor", "Khaki");
            tcHeader[10].Text = "家庭住址";
            tcHeader.Add(new TableHeaderCell());
            tcHeader[11].Attributes.Add("bgcolor", "Khaki");
            tcHeader[11].Text = "邮政编码";
            break;
        }
    
      }
    }
    
    
    2011年1月12日 2:14