关于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>

 Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1342969