首頁 > 開發者 > CSS

在GridView中使用CSS固定上、左表頭(似Excel凍結視窗)(限IE)

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

承接上篇透過CSS設定，達到類似Excel凍結視窗的效果(固定上面、左邊表頭)

小喵這次想在ASP.NET中達到相同的效果。但是中間遇到了幾個狀況，要一一排除掉，小喵將排除的方式記錄如下：

1.首先這樣的方式並非標準的CSS語法，然而開WebForm的時候，aspx裡面都會加入一行來檢查是否是標準的格式，有這行會失敗，必須將此行刪除

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2.其次，由於GridView所產生的HTML裡面，自動會加入一個DIV，這會導致CSS中的this.parentElement.offsetParent.parentElement.scrollLeft

取錯，要修正為

this.parentElement.offsetParent.offsetParent.scrollLeft

 

以下為範例：

首先在樣式表中加入CSS設定

.FixedTitleRow   {       position: relative;        table-layout:fixed;    top: expression(this.offsetParent.scrollTop-2);    background-color:White;    z-index: 10;   }   .FixedTitleRow th{    text-overflow:ellipsis;    overflow:hidden;    white-space: nowrap;    padding:2px;}   .FixedTitleColumn   {       position: relative;        left: expression(this.parentElement.offsetParent.scrollLeft-2);   }      .FixedDataColumn   {       position: relative;       left: expression(this.parentElement.offsetParent.offsetParent.scrollLeft-2);   }

接著新增aspx檔案，記得去除

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

小喵用北風的資料庫來當範例，GridView的內容如下

        <div style="width:600px; height:400px; overflow:scroll; z-index:100;">        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"             DataKeyNames="OrderID" DataSourceID="SqlDataSource1" EmptyDataText="沒有資料錄可顯示。"                 CellPadding="4" ForeColor="#333333" GridLines="None">            <RowStyle BackColor="#E3EAEB" />            <Columns>                <asp:BoundField DataField="OrderID" HeaderText="OrderID" ReadOnly="True"                     SortExpression="OrderID" >                <HeaderStyle CssClass="FixedTitleColumn" />                <ItemStyle CssClass="FixedDataColumn" />                </asp:BoundField>                <asp:BoundField DataField="CustomerID" HeaderText="CustomerID"                     SortExpression="CustomerID" >                <HeaderStyle CssClass="FixedTitleColumn" />                <ItemStyle CssClass="FixedDataColumn" />                </asp:BoundField>                <asp:BoundField DataField="EmployeeID" HeaderText="EmployeeID"                     SortExpression="EmployeeID" >                <HeaderStyle CssClass="FixedTitleColumn" />                <ItemStyle CssClass="FixedDataColumn" />                </asp:BoundField>                <asp:BoundField DataField="OrderDate" HeaderText="OrderDate"                     SortExpression="OrderDate" />                <asp:BoundField DataField="RequiredDate" HeaderText="RequiredDate"                     SortExpression="RequiredDate" />                <asp:BoundField DataField="ShippedDate" HeaderText="ShippedDate"                     SortExpression="ShippedDate" />                <asp:BoundField DataField="ShipVia" HeaderText="ShipVia"                     SortExpression="ShipVia" />                <asp:BoundField DataField="Freight" HeaderText="Freight"                     SortExpression="Freight" />                <asp:BoundField DataField="ShipName" HeaderText="ShipName"                     SortExpression="ShipName" />                <asp:BoundField DataField="ShipAddress" HeaderText="ShipAddress"                     SortExpression="ShipAddress" />                <asp:BoundField DataField="ShipCity" HeaderText="ShipCity"                     SortExpression="ShipCity" />                <asp:BoundField DataField="ShipRegion" HeaderText="ShipRegion"                     SortExpression="ShipRegion" />                <asp:BoundField DataField="ShipPostalCode" HeaderText="ShipPostalCode"                     SortExpression="ShipPostalCode" />                <asp:BoundField DataField="ShipCountry" HeaderText="ShipCountry"                     SortExpression="ShipCountry" />            </Columns>            <FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />            <PagerStyle BackColor="#666666" ForeColor="White" HorizontalAlign="Center" />            <SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" />            <HeaderStyle CssClass="FixedTitleRow" BackColor="#1C5E55" Font-Bold="True"                 ForeColor="White" />            <EditRowStyle BackColor="#7C6F57" />            <AlternatingRowStyle BackColor="White" />        </asp:GridView>        </div>        <asp:SqlDataSource ID="SqlDataSource1" runat="server"             ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString1 %>"             DeleteCommand="DELETE FROM [Orders] WHERE [OrderID] = @OrderID"             InsertCommand="INSERT INTO [Orders] ([CustomerID], [EmployeeID], [OrderDate], [RequiredDate], [ShippedDate], [ShipVia], [Freight], [ShipName], [ShipAddress], [ShipCity], [ShipRegion], [ShipPostalCode], [ShipCountry]) VALUES (@CustomerID, @EmployeeID, @OrderDate, @RequiredDate, @ShippedDate, @ShipVia, @Freight, @ShipName, @ShipAddress, @ShipCity, @ShipRegion, @ShipPostalCode, @ShipCountry)"             ProviderName="<%$ ConnectionStrings:NorthwindConnectionString1.ProviderName %>"             SelectCommand="SELECT TOP 30 [OrderID], [CustomerID], [EmployeeID], [OrderDate], [RequiredDate], [ShippedDate], [ShipVia], [Freight], [ShipName], [ShipAddress], [ShipCity], [ShipRegion], [ShipPostalCode], [ShipCountry] FROM [Orders]"             UpdateCommand="UPDATE [Orders] SET [CustomerID] = @CustomerID, [EmployeeID] = @EmployeeID, [OrderDate] = @OrderDate, [RequiredDate] = @RequiredDate, [ShippedDate] = @ShippedDate, [ShipVia] = @ShipVia, [Freight] = @Freight, [ShipName] = @ShipName, [ShipAddress] = @ShipAddress, [ShipCity] = @ShipCity, [ShipRegion] = @ShipRegion, [ShipPostalCode] = @ShipPostalCode, [ShipCountry] = @ShipCountry WHERE [OrderID] = @OrderID">            <DeleteParameters>                <asp:Parameter Name="OrderID" Type="Int32" />            </DeleteParameters>            <InsertParameters>                <asp:Parameter Name="CustomerID" Type="String" />                <asp:Parameter Name="EmployeeID" Type="Int32" />                <asp:Parameter Name="OrderDate" Type="DateTime" />                <asp:Parameter Name="RequiredDate" Type="DateTime" />                <asp:Parameter Name="ShippedDate" Type="DateTime" />                <asp:Parameter Name="ShipVia" Type="Int32" />                <asp:Parameter Name="Freight" Type="Decimal" />                <asp:Parameter Name="ShipName" Type="String" />                <asp:Parameter Name="ShipAddress" Type="String" />                <asp:Parameter Name="ShipCity" Type="String" />                <asp:Parameter Name="ShipRegion" Type="String" />                <asp:Parameter Name="ShipPostalCode" Type="String" />                <asp:Parameter Name="ShipCountry" Type="String" />            </InsertParameters>            <UpdateParameters>                <asp:Parameter Name="CustomerID" Type="String" />                <asp:Parameter Name="EmployeeID" Type="Int32" />                <asp:Parameter Name="OrderDate" Type="DateTime" />                <asp:Parameter Name="RequiredDate" Type="DateTime" />                <asp:Parameter Name="ShippedDate" Type="DateTime" />                <asp:Parameter Name="ShipVia" Type="Int32" />                <asp:Parameter Name="Freight" Type="Decimal" />                <asp:Parameter Name="ShipName" Type="String" />                <asp:Parameter Name="ShipAddress" Type="String" />                <asp:Parameter Name="ShipCity" Type="String" />                <asp:Parameter Name="ShipRegion" Type="String" />                <asp:Parameter Name="ShipPostalCode" Type="String" />                <asp:Parameter Name="ShipCountry" Type="String" />                <asp:Parameter Name="OrderID" Type="Int32" />            </UpdateParameters>        </asp:SqlDataSource>

產生的結果畫面如下：

使用方式很簡單

  1. 固定左邊的資料行中，設定HeadStyle的CssClass=FixedTitleColumn，以及ItemStyle的CssClass=FixedDataColumn
  2. 整個GridView的HeadStyle設定CssClass=FixedTitleRow

這樣就完成了!!

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
php gridview gridview templatefield c# gridview example c# gridview example xamarin forms gridview asp net gridview example asp gridview example
相關文章
css實現滑鼠滑過改變文字(中文變英文)
selenium使用Xpath+CSS+JavaScript+jQuery的定位方法（治療selenium各種定位不到，點...
使用CSS巧妙地製作背景色漸層動畫執行個體
詳解css display屬性中常見的四個屬性值用法（代碼執行個體）
CSS修改iframe內的樣式問題
如何用CSS改變上劃線、底線以及刪除線的顏色呢？

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More