2023年5月10日 星期三

[css]套色用在GridView  



 <style>

        .th {

            background-color: #7BBAA7;

            color: #674F28;

            width: 30%;

        }


        .sysBtn {

            margin: 2px 2px;

            width: 90px;

        }


        table.gvs {

            border: 1px solid #B7B4B5;

            width: 100%;

            text-align: center;

            border-collapse: collapse;

        }


        .hss {

            border-bottom: 2px outset #94614C;

            background-color: #7BBAA7;

            color: #674F28;

            font-weight: bold;

            line-height: 25px;

        }


        .rss:nth-child(odd) {

            background: #D7E6E3;

        }


        tr.pss td {

            background-color: #C8E6C9;

            

        }


        .pss table {

            

            float: right;

            margin: 2px 2px;

            padding: 0 0;

        }


        .pss table tr td { 

            width: 25px;

            height: 25px;

            background-color: #808080;

            color:red;

            vertical-align:middle;

        }


        .pss a {

            display: table-cell;

            width: 25px;

            height: 25px;

            background-color: #808080;

            color: #D7E6E3;

            vertical-align:middle;

            text-decoration:none;

        }


            .pss a:hover {

                display: table-cell;

                width: 25px;

                height: 25px;

                background-color: #b6ff00;

                color: #fff;

            }



        /*    tr.pss table  {

              font-size: 13px;

  font-weight: bold;

  color: #F0F0F0;

  background: #24943A;

  background: -moz-linear-gradient(top, #5baf6b 0%, #3a9e4d 66%, #24943A 100%);

  background: -webkit-linear-gradient(top, #5baf6b 0%, #3a9e4d 66%, #24943A 100%);

  background: linear-gradient(to bottom, #5baf6b 0%, #3a9e4d 66%, #24943A 100%);

  border-top: 1px solid #24943A;

            

        }


        .pss td {

            border:1px solid red;

            text-align:right

        }


        tr.pss table td  {

            background-color:#7BBAA7;

            color:#fff;

            text-decoration:none;

            width:20px;

            height:20px;


        }


        tr.pss a {

            text-decoration:none;

        }*/

    </style>

------------------------------------------

      <asp:GridView ID="gv_user" AutoGenerateColumns="false" AllowPaging="true" runat="server" PageSize="10" OnPageIndexChanging="gv_user_PageIndexChanging"

                    OnRowDataBound="gv_user_RowDataBound" HeaderStyle-CssClass="hss" PagerStyle-CssClass="pss" RowStyle-CssClass="rss" CssClass="gvs">

                    <Columns>

                        <asp:TemplateField HeaderText="選擇">

                            <ItemTemplate>


                                <input type="button" id="getUser" value="確認" onclick="return callback(<%# (Container.DataItemIndex % 10) +1 %>)" class="sysBtn" />

                            </ItemTemplate>

                        </asp:TemplateField>


                        <asp:BoundField HeaderText="部門" DataField="dept_nm" />

                        <asp:BoundField HeaderText="帳號" DataField="logonid" />

                        <asp:BoundField HeaderText="姓名" DataField="name" />

                        <asp:BoundField HeaderText="mail" DataField="email" />

                        <asp:BoundField HeaderText="guid" DataField="id" />

                        <asp:BoundField HeaderText="dept_no" DataField="dept_no" />


                    </Columns>

                </asp:GridView>


------------------------------------------

主要在PagerStyle-CssClass="pss" 做page 數的設定

tr.pss td {主要是設定 floot的顏色} 

.pss table  {設定floot 內的框線格式} 

.pss table tr td{被選定頁數的顯示格式 }

.pss a {尚未被選擇的頁數顯示格式

display: table-cell;  是重點,讓link變成一個區塊block

            width: 25px; //block的大小

            height: 25px;//block的大小

}


.pss a:hover {被滑過的頁籤格式

display: table-cell;  是重點,讓link變成一個區塊block

            width: 25px; //block的大小

            height: 25px;//block的大小

}


沒有留言:

張貼留言