Основы ASP.NET 2.0



         

Внешние файлы стиля - часть 3


Иногда удобно не переходить со страницы на страницу, а прокручивать записи. Вспомним, что элемент управления Panel позволял это делать. Поэтому попробуем использовать GridView и Panel совместно:

<style type="text/css"> .TableHeader { border-width: 2px; border-color: Black; background-color: #990000; color: white; font-weight: bold; position: relative; top: expression(this.parentNode.parentNode.parentNode.scrollTop-1);

} </style>

Вставьте в форму следующий код:

<br /> <asp:Panel ID="Panel1" runat="server" Height="327px" Width="566px" ScrollBars="Auto"> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="True" DataSourceID="SqlDataSource1" EmptyDataText="There are no data records to display." Height="165px" Width="548px"> <HeaderStyle CssClass="TableHeader" /> </asp:GridView> </asp:Panel> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:pubsConnectionString1 %>" ProviderName="<%$ ConnectionStrings:pubsConnectionString1.ProviderName %>" SelectCommand="SELECT * FROM [authors]"> </asp:SqlDataSource>

У элемента Panel1 устанавливается свойство ScrollBars="Auto" и в него помещается GridView. Стиль, который применен для заголовка, задает относительное положение данного класса у верхней границы панели.При генерации HTML-кода для заголовка GridView генерируются теги <th>, которые вложены в <tr>, вложенные свою очередь в <table>. <table> находится в <div>, в который отображается Panel1. Следовательно, чтобы добраться до этого тега, надо 3 раза обратиться к родителю.




Содержание  Назад  Вперед