понедельник, 16 декабря 2013 г.

Фильтр по первой букве

Если список упорядочен по алфавиту в каком-то столбце и количество элементов в списке более 100, целесообразно применить фильтр по первой букве для ускорения навигации.

Для этого необходимо

  1. Добавить в список вычисляемый столбец (с названием, например, firstletter) и с формулой =ЛЕВСИМВ([Имя];1).
  2. Добавить веб-часть редактора содержимого со следующим кодом:

<style>
.lettersfilter
{
    margin-bottom: -10px;
}
.lettersfilter .letter
{
    background-color: #f0f0f0;
    display: inline-block;
    width: 40px;
    padding-bottom: 5px;
    text-align: center;
    vertical-align: middle;
    font-size: 2em;
    margin-right: 6px;
    margin-bottom: 10px;
}
.lettersfilter .letter.all
{
    width: 90px;
}
</style>
<div class="lettersfilter">
    <a class="letter all" href="Справочник%20сотрудников.aspx">Все</a>
    <a class="letter" href="Справочник%20сотрудников.aspx?FilterField1=firstletter&FilterValue1=%D0%B0">А</a>
    <a class="letter" href="Справочник%20сотрудников.aspx?FilterField1=firstletter&FilterValue1=%D0%B1">Б</a>
    <a class="letter" href="Справочник%20сотрудников.aspx?FilterField1=firstletter&FilterValue1=%D0%B2">В</a>
    <a class="letter" href="Справочник%20сотрудников.aspx?FilterField1=firstletter&FilterValue1=%D0%B3">Г</a>
    <a class="letter" href="Справочник%20сотрудников.aspx?FilterField1=firstletter&FilterValue1=%D0%B4">Д</a>
    <a class="letter" href="Справочник%20сотрудников.aspx?FilterField1=firstletter&FilterValue1=%D0%B5">Е</a>
    <a class="letter" href="Справочник%20сотрудников.aspx?FilterField1=firstletter&FilterValue1=%D1%91">Ё</a>
    <a class="letter" href="Справочник%20сотрудников.aspx?FilterField1=firstletter&FilterValue1=%D0%B6">Ж</a>
    <a class="letter" href="Справочник%20сотрудников.aspx?FilterField1=firstletter&FilterValue1=%D0%B7">З</a>
    <a class="letter" href="Справочник%20сотрудников.aspx?FilterField1=firstletter&FilterValue1=%D0%B8">И</a>
    <a class="letter" href="Справочник%20сотрудников.aspx?FilterField1=firstletter&FilterValue1=%D0%B9">Й</a>
    <a class="letter" href="Справочник%20сотрудников.aspx?FilterField1=firstletter&FilterValue1=%D0%BA">К</a>
    <a class="letter" href="Справочник%20сотрудников.aspx?FilterField1=firstletter&FilterValue1=%D0%BB">Л</a>
    <a class="letter" href="Справочник%20сотрудников.aspx?FilterField1=firstletter&FilterValue1=%D0%BC">М</a>
    <a class="letter" href="Справочник%20сотрудников.aspx?FilterField1=firstletter&FilterValue1=%D0%BD">Н</a>
    <a class="letter" href="Справочник%20сотрудников.aspx?FilterField1=firstletter&FilterValue1=%D0%BE">О</a>
    <a class="letter" href="Справочник%20сотрудников.aspx?FilterField1=firstletter&FilterValue1=%D0%BF">П</a>
    <a class="letter" href="Справочник%20сотрудников.aspx?FilterField1=firstletter&FilterValue1=%D1%80">Р</a>
    <a class="letter" href="Справочник%20сотрудников.aspx?FilterField1=firstletter&FilterValue1=%D1%81">С</a>
    <a class="letter" href="Справочник%20сотрудников.aspx?FilterField1=firstletter&FilterValue1=%D1%82">Т</a>
    <a class="letter" href="Справочник%20сотрудников.aspx?FilterField1=firstletter&FilterValue1=%D1%83">У</a>
    <a class="letter" href="Справочник%20сотрудников.aspx?FilterField1=firstletter&FilterValue1=%D1%84">Ф</a>
    <a class="letter" href="Справочник%20сотрудников.aspx?FilterField1=firstletter&FilterValue1=%D1%85">Х</a>
    <a class="letter" href="Справочник%20сотрудников.aspx?FilterField1=firstletter&FilterValue1=%D1%86">Ц</a>
    <a class="letter" href="Справочник%20сотрудников.aspx?FilterField1=firstletter&FilterValue1=%D1%87">Ч</a>
    <a class="letter" href="Справочник%20сотрудников.aspx?FilterField1=firstletter&FilterValue1=%D1%88">Ш</a>
    <a class="letter" href="Справочник%20сотрудников.aspx?FilterField1=firstletter&FilterValue1=%D1%89">Щ</a>
    <a class="letter" href="Справочник%20сотрудников.aspx?FilterField1=firstletter&FilterValue1=%D1%8D">Э</a>
    <a class="letter" href="Справочник%20сотрудников.aspx?FilterField1=firstletter&FilterValue1=%D1%8E">Ю</a>
    <a class="letter" href="Справочник%20сотрудников.aspx?FilterField1=firstletter&FilterValue1=%D1%8F">Я</a>
</div>

В коде заменить “Справочник%20сотрудников” на URL-страницы, где настроено представление.

Заменить “firstletter” на внутреннее название столбца, созданного на шаге 1.

Получается так:

image

4 комментария:

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

    ОтветитьУдалить
  2. Это кстати кастомный список или представление длч user profiles?

    ОтветитьУдалить
  3. Денис, это список сотрудников компонента Conteq оргструктура. Но такой фильтр можно сделать на любом списке.

    ОтветитьУдалить