承接上篇透過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>
產生的結果畫面如下:
使用方式很簡單
- 固定左邊的資料行中,設定HeadStyle的CssClass=FixedTitleColumn,以及ItemStyle的CssClass=FixedDataColumn
- 整個GridView的HeadStyle設定CssClass=FixedTitleRow
這樣就完成了!!
![]() Microsoft MVP ASP/ASP.NET |
![]() topcat |