Практическое руководство. Применение стиля CSS к отсортированным столбцам в серверном веб-элементе управления GridView

В элементе управления GridView можно указать правила стилей CSS для применения к столбцу и заголовку, по которым сортируются данные. Например, можно изменить представление столбца и заголовка в зависимости от направления сортировки.

Чтобы указать правила CSS для столбца, по которому отсортированы данные, задайте свойства TableItemStyle столбцов GridView. Можно задать следующие свойства TableItemStyle для применения правил стиля к столбцам GridView:

Применение стиля CSS к столбцам, по которым отсортированы данные

  1. Откройте веб-страницу ASP.NET, содержащую элемент управления GridView, который требуется настроить.

  2. В окне Свойства разверните узел для свойства SortedAscendingCellStyle.

  3. Задайте стили CSS для применения к столбцу сортировки.

    Выбранный стиль CSS будет применен ко всем ячейкам в столбце, по которому сортируются данные, если сортировка выполняется по возрастанию.

  4. Повторите предыдущий этап для следующих свойств:

    В следующем примере показана разметка стиля CSS, который будет применен к ячейкам и заголовку столбца, по которому сортируются данные, если сортировка выполняется по возрастанию.

    <SortedAscendingCellStyle BackColor="LightBlue" />
    <SortedAscendingHeaderStyle BackColor="Blue" ForeColor="White" CssClass="AscHeader"/>
    

В следующем примере показано, каким образом настроить цвет фона ячеек и заголовка столбца, по которому сортируются данные. Стиль CSS ячеек и заголовка изменяется при изменении направления сортировки.

<asp:GridView runat="server" AllowSorting="True"  
    AutoGenerateColumns="True"
    DataKeyNames="ProductID"
    DataSourceID="SqlDataSource1"
    AutoGenerateDeleteButton="True"    
    AutoGenerateEditButton="True" 
    AutoGenerateSelectButton="True">
  <HeaderStyle BackColor="#eeeeee" />
  <SelectedRowStyle  BackColor="Yellow"  />
  <SortedAscendingHeaderStyle BackColor="Blue" ForeColor="White"   
      ssClass="AscHeader"/>
  <SortedAscendingCellStyle BackColor="LightBlue" />
  <SortedDescendingHeaderStyle BackColor="Green" ForeColor="White"  
      CssClass="DescHeader" />
  <SortedDescendingCellStyle BackColor="LightGreen"/>
</asp:GridView>

Для компиляции кода в примере потребуется следующее:

  • Visual Studio 2010 или Visual Web Developer 2010, экспресс-выпуск. 

Показ: