关于gridview的样式

正在做一个项目,其中用到了Gridview控件,内容如下

即每行里又包括两小行, 这个功能可以用两个嵌套的gridview实现,

第二个要实现的是每个大行之间用实现相隔, 每个小行之间用虚线

网上很多资料都是关于Gridview的,但是关于样式的就不多

后来发现可以在后台程序中动态改变CELL的式样

protected void GridView2_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        e.Row.Attributes.Add("onmouseover", "this.style.backgroundColor='#E6F5FA'");
        e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor='#ccccff'");
       
        for (int i = 0; i < e.Row.Cells.Count; i++)
        {
            e.Row.Cells[i].Attributes.Add("class", "linebottom");
        }
    }

在CSS中设置

.linebottom
{
 border-bottom-color:Black;border-bottom-style:dotted;border-bottom-width :1;
 border-right-color:Black;border-right-style:solid;border-right-width :1;
}

终于大功告成

原代码

 

using  System;
using  System.Data;
using  System.Configuration;
using  System.Collections;
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;

public   partial   class  HarboFuture : System.Web.UI.Page
... {
    protected void Page_Load(object sender, EventArgs e)
    ...{
        DataTable objDtInfo = new DataTable();
        objDtInfo.Columns.Add("NO", typeof(string));
        objDtInfo.Columns.Add("ターミナル", typeof(string));
        objDtInfo.Columns.Add("更新日時", typeof(string));
        objDtInfo.Columns.Add("月", typeof(string));
        objDtInfo.Columns.Add("火", typeof(string));
        objDtInfo.Columns.Add("水", typeof(string));
        objDtInfo.Columns.Add("木", typeof(string));
        objDtInfo.Columns.Add("金", typeof(string));
        objDtInfo.Columns.Add("土", typeof(string));
        objDtInfo.Columns.Add("日", typeof(string));

        DataRow objDrHeader = objDtInfo.NewRow();
        objDrHeader[0] = "NO";
        objDrHeader[1] = "ターミナル";
        objDrHeader[2] = "更新日時";

        objDtInfo.Rows.Add(objDrHeader); 

        for (int i = 0; i < 4; i++)
        ...{
            DataRow objDrItem = objDtInfo.NewRow();
            objDrItem[0] = (i + 1).ToString();
            objDrItem[1] = "大井1号／2号";
            objDrItem[2] = DateTime.Now.ToString();
            objDrItem[3] = "◎";
            objDrItem[4] = "☆";
            objDrItem[5] = "△";
            objDrItem[6] = "○";
            objDrItem[7] = "×";
            objDrItem[8] = "☆";
            objDrItem[9] = "☆";
            objDtInfo.Rows.Add(objDrItem); 
        }
        GridView1.DataSource = objDtInfo;
        GridView1.DataBind(); 
    }
    protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    ...{
        if (e.Row.RowIndex > -1)
        ...{
            AccessDataSource accessDS = e.Row.FindControl("AccessDataSource2") as AccessDataSource;
            accessDS.SelectParameters["id"].DefaultValue = (e.Row.RowIndex).ToString();
        }

    }

     protected void GridView2_RowDataBound(object sender, GridViewRowEventArgs e)
    ...{
        e.Row.Attributes.Add("onmouseover", "this.style.backgroundColor='#E6F5FA'");
        e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor='#ccccff'");
        
        for (int i = 0; i < e.Row.Cells.Count; i++)
        ...{
            e.Row.Cells[i].Attributes.Add("class", "linebottom");
        }
    }
}

 

ASPX

 

<% @ Page Language = " C# "  MasterPageFile = " ~/MasterTop.master "  AutoEventWireup = " true "  CodeFile = " HarboFuture.aspx.cs "  Inherits = " HarboFuture "  Title = " Untitled Page "   %>
< asp:Content ID = " Content1 "  ContentPlaceHolderID = " ContentPlaceHolder1 "  Runat = " Server " >
   < table id  =   " all "   class = " tableAll "   >
   < tr >  
    < td align  =   " center "   >
     < table id  =   " content "  width  =   " 80% "   >
        
         < tr >
             < td  >
                 < table id  =   " line1 "   width  =   " 100% "    >
                     < tr >
                         < td >
                             < asp:Label ID = " lblLine1 "  runat = " server "  Text = " 大井ふ頭　混雑予想情報 "  Font - Size  =   " Large "   ></ asp:Label ></ td >  
                     </ tr >
                 </ table >
             </ td >
         </ tr >
         < tr >
             < td >
                 < table id  =   " line2 "   width  =   " 100% " >
                     < tr >
                         < td style  = "  width: 33% "  align  =   " center "   >  
                             < asp:LinkButton ID = " lnkbtnLastWeek "  runat = " server "  Font - Size  =   " Medium " > 前週＜＜ </ asp:LinkButton ></ td >  
                         < td style  = "  width: 34% " >
                             < asp:Label ID = " lblThisWeek "  runat = " server "  Font - Size  =   " Medium "  Text = " 11/6（月）～11/12（日） " ></ asp:Label ></ td >  
                         < td style  = "  width: 33% " >
                             < asp:LinkButton ID = " lnkbtnNextWeek "  Font - Size  =   " Medium "  runat = " server " > ＞＞翌週 </ asp:LinkButton ></ td >  
                     </ tr >
                 </ table >
             </ td >
         </ tr >
         < tr >
             < td style = " height: 32px "    >
                 < table id  =   " line3 "  width  =   " 100% " >
                     < tr >
                         < td >
                             < asp:GridView ID = " GridView1 "  runat = " server "  RowStyle - Font - Size  =   " Medium "  RowStyle - HorizontalAlign  =   " Center "  ShowHeader  =   " False "  
                            AutoGenerateColumns = " False "  OnRowDataBound = " GridView1_RowDataBound "  BorderColor  =   " Black "  BorderStyle  = " Solid "  BorderWidth  =   " 2 "   >
                             < Columns  >
                                 < asp:TemplateField ItemStyle - BorderColor  =   " Black "  ItemStyle - BorderWidth  =   " 1 "  ItemStyle - BorderStyle  = " Solid "   >
                                     < ItemTemplate  >
                                         < asp:Label ID = " lblNo "  Width  =   " 50 "   runat = " server "  Text = ' <%#DataBinder.Eval(Container.DataItem,"NO") %> '   />
                                     </ ItemTemplate >
                                 </ asp:TemplateField  >
                                 < asp:TemplateField ItemStyle - BorderColor  =   " Black "  ItemStyle - BorderWidth  =   " 1 "  ItemStyle - BorderStyle  = " Solid " >
                                     < ItemTemplate >
                                         < asp:Label ID = " lblColumns2 "  Width  =   " 120 "  runat = " server "  Text = ' <%#DataBinder.Eval(Container.DataItem,"ターミナル") %> '   />
                                     </ ItemTemplate >
                                     < ItemStyle BackColor = " Transparent "  BorderColor = " Transparent "   />
                                 </ asp:TemplateField >
                                 < asp:TemplateField ItemStyle - BorderColor  =   " Black "  ItemStyle - BorderWidth  =   " 1 "  ItemStyle - BorderStyle  = " Solid " >
                                     < ItemTemplate >
                                         < asp:Label ID = " lblColumns3 "  Width  =   " 120 "  runat = " server "  Text = ' <%#DataBinder.Eval(Container.DataItem,"更新日時") %> '   />
                                     </ ItemTemplate >
                                 </ asp:TemplateField >
                                 < asp:TemplateField ItemStyle - BorderColor  =   " Black "  ItemStyle - BorderWidth  =   " 1 "  ItemStyle - BorderStyle  = " Solid " >
                                     < ItemTemplate >
                                          < asp:GridView ID = " GridView2 "  runat = " server "  DataKeyNames = " id "   RowStyle - HorizontalAlign  =   " Center "
                                            AutoGenerateColumns = " False "  DataSourceID = " AccessDataSource2 "  RowStyle - Font - Size  =   " Medium "   RowStyle - BackColor  =   " #ccccff "  
                                            ShowHeader  =   " false "  OnRowDataBound  =   " GridView2_RowDataBound "  CellPadding  =   " 0 " >                      
                                             < Columns >
                                             < asp:BoundField DataField = " Monday "  ItemStyle - Width  =   " 55 "     ItemStyle - BackColor  = " #C0FFFF "   ReadOnly = " True " />
                                             < asp:BoundField DataField = " Tuesday "   ItemStyle - Width  =   " 55 "  ReadOnly = " True " />
                                             < asp:BoundField DataField = " Wednesday "   ItemStyle - Width  =   " 55 "  ReadOnly = " True " />
                                             < asp:BoundField DataField = " Thursday "  ItemStyle - Width  =   " 55 "   ReadOnly = " True " />
                                             < asp:BoundField DataField = " Friday "   ItemStyle - Width  =   " 55 "   ReadOnly = " True " />
                                             < asp:BoundField DataField = " Saturday "    ItemStyle - Width  =   " 55 "  ReadOnly = " True " />
                                             < asp:BoundField DataField = " Sunday "    ItemStyle - Width  =   " 55 "  ReadOnly = " True " />
                                             </ Columns >
                                          </ asp:GridView >  
                                          < asp:AccessDataSource ID = " AccessDataSource2 "  runat = " server "  DataFile = " ~/App_Data/test.mdb "
                                            SelectCommand = " SELECT * FROM [stu] WHERE ([id] = ?) " >
                                             < SelectParameters >
                                                 < asp:Parameter Name = " id "  Type = " string "   />
                                             </ SelectParameters >
                                         </ asp:AccessDataSource >
                                     </ ItemTemplate >                                    
                                     < ControlStyle BackColor = " White "   />
                                 </ asp:TemplateField >
                                
                             </ Columns >
                                 < RowStyle Font - Size = " Medium "  HorizontalAlign = " Center "   />
                             </ asp:GridView >
                         </ td >  
                     </ tr >
                 </ table >
             </ td >
         </ tr >
         < tr >
             < td style = " height: 32px " >
                 < table id  =   " line4 "   width  =   " 100% " >
                     < tr >
                         < td align  =   " center "   >
                             < asp:Label ID = " lblMark "  runat = " server "  Font - Size  =   " Medium "  Text = " 上段：混雑予想（×：大混雑、△：混雑、○：普通、◎：空き）　下段：搬出催促（☆） " ></ asp:Label ></ td >  
                     </ tr >
                 </ table >
             </ td >
         </ tr >
         < tr >
             < td >
                 < table id  =   " line5 "   width  =   " 100% " >
                     < tr >
                         < td >
                             < asp:Label ID = " lblExcelOutput "  runat = " server "  Font - Size  =   " Medium "  Text = " 搬出入作業週間予報ダウンロード（Excelファイル） " ></ asp:Label ></ td >  
                     </ tr >
                 </ table >
             </ td >
         </ tr >
         < tr >
             < td >
                 < table id  =   " line6 "   width  =   " 100% " >
                     < tr >
                         < td style = " width: 20% " >
                             < asp:LinkButton ID = " lnkbtnExcel1 "  Font - Size  =   " Medium "  runat = " server " > 今週（11月第2週） </ asp:LinkButton ></ td >  
                         < td style = " width: 20% " >
                             < asp:LinkButton ID = " lnkbtnExcel2 "  Font - Size  =   " Medium "  runat = " server " > 11月第3週 </ asp:LinkButton ></ td >  
                         < td style = " width: 20% " >
                             < asp:LinkButton ID = " lnkbtnExcel3 "  Font - Size  =   " Medium "  runat = " server " > 11月第4週 </ asp:LinkButton ></ td >  
                         < td style = " width: 20% " >
                             < asp:LinkButton ID = " lnkbtnExcel4 "  Font - Size  =   " Medium "  runat = " server " > 11月第5週 </ asp:LinkButton ></ td >  
                         < td style = " width: 20% " >
                             < asp:LinkButton ID = " lnkbtnExcel5 "  Font - Size  =   " Medium "  runat = " server " > 12月第1週 </ asp:LinkButton ></ td >  
                     </ tr >
                 </ table >
             </ td >
         </ tr >
       
     </ table >
     </ td >  
     </ tr >
</ table >     
</ asp:Content >