熱點推薦：
您现在的位置： 電腦知識網 >> 編程 >> .NET編程 >> 正文

DataGrid與GridView通用的樣式文件

2022-06-13   來源: .NET編程 

　　在ASPNET開發過程中DataGrid使用的頻率是非常高的對於DataGrid的樣式來說大家普遍使用的是自定義不同的顏色來應用於DataGrid的Header Footer EditItem SelectItem Item Page然而如果在每個頁面都要對上述樣式逐個設置工作效率可想而知了估計一天也出不了幾個頁面而且在VSNET中一個最大的BUG就是當我們對已經定義好的DataGrid重新布置頁面布局時發覺其所有的事件會莫名其妙丟失或許有時候我們只好使用VSNET已經提供好的自動套用格式模板但有時候我們必須而且不由我們使用套用模板怎麼辦（比如客戶的要求）下面我就講解一下在DataGrid中應用樣式文件來定義動態樣式這樣就解決了當客戶對一套顏色配套方案不滿意時可以花費幾分鐘的時間重新定義一套是不是效率會提高很多廢話少說看看下面的csscss文件是怎麼定義的

　　csscss文件內容

　　          dg_header
        { fontweight :bold ;
        color:#FFFFCC;
        backgroundcolor :#;
        borderwidth: px;
        bordercolor :#CC;
        borderstyle :solid;
        }
        dg_alter
        {
         backgroundcolor :#FFEC;
         borderleftcolor:Green;
         borderwidth: px;
         bordercolor :#CC;
         borderstyle :solid;
        }
        dg_item
        {
        color :#;
        backgroundcolor:White ;
        borderwidth:px;
        bordercolor :#CC;
        borderstyle :solid;
        }
         dg_page
         {
         borderwidth: px;
         bordercolor :#CC;
         borderstyle :solid;
         }
        dg_item td dg_alter td /*Common Styles*/
        {
        padding: px;
        border: solid px #ccc;
        }
        dg_header td
        {
        borderbottom: solid px #ccc;
        }
        dg_lb
        {
        color:#A;
        /*backgroundcolor:#BDF;
        */ background:url(/images/headergif) repeatx center center;
        fontweight:bold;
        }
        /* 底部的樣式 */
        dg_page table
        {
        textalign:center;
        margin:auto;
        }
        dg_page table td
        {
        border:px;
        padding:px;/*padding around pager numbers */
        }
        dg_page td
        {
        bordertop: #ddd px solid;/*top border of pager*/
        height:px;
        }
        dg_page a
        {
        color:#A;
        textdecoration:none;
        padding:px px px px;
        /*border around pager numbers*/
        bordertop:solid px #EFFFC;
        borderright:solid px #cccccc;
        borderbottom:solid px #cccccc;
        borderleft:solid px #EFFFC;
        } dg_page a:hover { color: #BB; bordertop:solid px #FFFFF;
        borderright:solid px #;
        borderbottom:solid px #;
        borderleft:solid px #FFFFFF; }
        dg_page span
        {
        fontweight:bold;
        color:#;
        textdecoration:none;
        padding:px px px px;
        }

　　接下來的工作就是要應用此樣式文件到頁面的DataGrid中了

　　首先在頁面<HEAD></HEAD>之間插入下面的語句

　　<link type=text/css rel=stylesheet>

　　然後選擇頁面上的DataGrid改變需要應用樣式屬性值的CssClass

　　例如點擊HeaderStyle屬性左邊的十字打開選項給CssClass應用樣式dg_header

　　最後綁定DataGrid看看是不是樣式已經應用上了如果沒有應用上有兩種可能

　　去掉系統自動套用樣式

　　察看csscss文件是否定義正確

　　DataGrid 的 示例代碼:          <asp:DataGrid ID=gridView_CIQCompPar runat=server AllowPaging=True AutoGenerateColumns=False DataKeyField=Id FooterStyleHeight=px Height=px OnPageIndexChanged=gridView_CIQCompPar_PageIndexChanged PageSize= Width=% CssClass=dg_perant>
        <Columns>
        </Columns>
        <FooterStyle CssClass=Height:px Height=px />
        <PagerStyle CssClass=dg_page Height=px HorizontalAlign=Center NextPageText=下一頁 PrevPageText=上一頁 />
        <AlternatingItemStyle CssClass=dg_alter />
        <ItemStyle CssClass=dg_item Height=px />
        <HeaderStyle CssClass=dg_header Height=px />
        </asp:DataGrid>

　　GridView 的 示例代碼:

　　<asp:GridView ID=GridView runat=server AllowPaging=True AutoGenerateColumns=False CssClass=dg_perant DataSourceID=ObjectDataSource Width=% OnDataBound=GridView_DataBound>
        <PagerStyle CssClass=dg_page />
        <HeaderStyle CssClass=dg_header />
        <RowStyle CssClass=dg_item />
        <AlternatingRowStyle CssClass=dg_alter />
        <PagerSettings FirstPageText=首頁 LastPageText=最後 頁 NextPageText=下 頁 PreviousPageText=上 頁 Mode=NumericFirstLast />
        <Columns>
        </Columns>
        </asp:GridView>


From:http://tw.wingwit.com/Article/program/net/201311/13732.html
    《DataGrid與GridView通用的樣式文件》本文是由.NET編程免費提供，內容來源於互聯網,本文歸原作者所有。
  • 上一篇文章：

  • 下一篇文章：
    • 相關文章
    主板 CPU 硬盤 內存 顯卡 聲卡 顯示器 光驅 死機
    推薦文章
    Copyright © 2005-2022 電腦知識網 Computer Knowledge   All rights reserved.