Динамическая Алфавитная Навигация

Я использую, ColdFusionчтобы вернуть набор результатов из базы данных SQL и превратить его в список.

Мне нужен какой-то способ создать алфавитную панель навигации для этого списка. У меня есть ColdFusion и библиотека jQuery.

Я ищу генерировать что-то вроде этого:

A | B | C | ...      
- A
- A
- B
- B
- B
- C
- D

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

19.08.2008 15:57:33
5 ОТВЕТОВ

Я хотел бы получить набор результатов SQL для возврата списка в первую очередь, вы можете просто взять первую букву требуемого элемента и счет. Самым быстрым способом было бы объединение таблицы из 26 символов (таким образом меньше манипуляций со строками).

В CF используйте значение счетчика, чтобы гарантировать, что если результата нет, вы либо только отображаете букву (как стандартный текст), либо не отображаете ее вообще.

Сколько строк вы собираетесь работать, возможно, есть лучшие способы сделать это. Например, сохранение первой буквы требуемого поля ссылки в отдельном столбце при вставке уменьшит накладные расходы при выборе.

1
19.08.2008 16:59:39

Чтобы сгенерировать панель навигации, вы можете сделать что-то вроде этого:

<cfoutput>
<cfloop from="#asc('A')#" to="#asc('Z')#" index="i">
    <a href="###chr(i)#">#chr(i)#</a>
    <cfif asc('Z') neq i>|</cfif>
</cfloop>
</cfoutput>

(CFLOOP не работает с символами, поэтому вы должны конвертировать в коды ascii и обратно.)


Чтобы отобразить элементы в вашем запросе, вы можете сделать что-то вроде этого.

<cfset currentLetter = "">
<cfoutput query="data">
<cfif currentLetter neq left(data.name, 1)>
    <h3><a name="#ucase(left(data.name, 1))#">#ucase(left(data.name, 1))#</a></h3>
</cfif>
<cfset currentLetter = left(data.name, 1)>
#name#<br>
</cfoutput>
5
19.08.2008 17:04:45
Это очень помогло найти окончательный ответ, к сожалению, оно не деактивировало неиспользуемые письма. Я опубликовал свое окончательное решение, но не могу понять, как сделать так, чтобы ответ сообщества.
alexp206 16.09.2008 19:00:18

Вы можете использовать функцию группировки запросов в запросе записей. Вам, очевидно, придется изменить поля запроса в соответствии с вашими данными, а функция left () может иметь разный синтаксис в зависимости от вашего механизма базы данных. Запрос ниже работает на MSSQL.

<cfquery datasource="#application.dsn#" name="qMembers">
SELECT firstname,lastname, left(lastname,1) as indexLetter
FROM member
ORDER BY indexLetter,lastName
</cfquery>


<p id="indexLetter">
<cfoutput query="qMembers" group="indexLetter">
    <a href="###qMembers.indexLetter#">#UCase(qMembers.indexLetter)#</a>
</cfoutput>
</p>




<cfif qMembers.recordCount>

    <table>

    <cfoutput query="qMembers" group="indexLetter">
        <tr>
            <th colspan="99" style="background-color:##324E7C;">
                <a name="#qMembers.indexLetter#" style="float:left;">#UCase(qMembers.indexLetter)#</a> 
                <a href="##indexLetter" style="color:##fff;float:right;">index</a>
            </th>
        </tr>

        <cfoutput>
        <tr>
            <td><strong>#qMembers.lastName#</strong> #qMembers.firstName#</td>
        </tr>
        </cfoutput>
    </cfoutput>

    </table>

<cfelse>
    <p>No Members were found</p>
</cfif>
3
15.09.2008 21:21:43
Единственная проблема в том, что он не печатает неиспользованные буквы. Он печатает только те буквы, которые используются, что является другой крайностью, с которой я начал.
alexp206 16.09.2008 18:43:32
РЕШЕНИЕ

Итак, было много хороших предложений, но ни один не сделал именно то, что я хотел. К счастью, я смог использовать их, чтобы понять, что я действительно хотел сделать. Единственное, что не делает следующее - это распечатать последние несколько неиспользованных букв (если они есть). Вот почему у меня есть оператор cfif, проверяющий «W», так как это последняя буква, которую я использую, в противном случае она должна проверять Z.

<cfquery datasource="#application.dsn#" name="qTitles">
SELECT title, url, substr(titles,1,1) as indexLetter
FROM list
ORDER BY indexLetter,title
</cfquery>

<cfset linkLetter = "#asc('A')#">
<cfoutput query="titles" group="indexletter">
    <cfif chr(linkLetter) eq #qTitles.indexletter#>
        <a href="###ucase(qTitles.indexletter)#">#ucase(qTitles.indexletter)#</a>
        <cfif asc('W') neq linkLetter>|</cfif>
        <cfset linkLetter = ++LinkLetter>
    <cfelse>
        <cfscript>
        while(chr(linkLetter) != qTitles.indexletter)
                {
                        WriteOutput(" " & chr(linkLetter) & " ");
                        IF(linkLetter != asc('W')){WriteOutput("|");};
                        ++LinkLetter;
                }
        </cfscript>

        <a href="###ucase(qTitles.indexletter)#">#ucase(qTitles.indexletter)#</a>
        <cfif asc('W') neq linkLetter>|</cfif>
        <cfset linkLetter = ++LinkLetter>
    </cfif>
</cfoutput>

<ul>
<cfset currentLetter = "">
<cfoutput query="qTitles" group="title">
<cfif currentLetter neq #qTitles.indexletter#>
    <li><a name="#ucase(qTitles.indexletter)#">#ucase(qTitles.indexletter)#</a></li>
</cfif>
<cfset currentLetter = #qTitles.indexletter#>
<li><a href="#url#">#title#</a></li>
</cfoutput>
</ul>
0
26.09.2008 00:25:36

Этот вопрос был опубликован довольно давно, но теперь доступен ванильный плагин JavaScript с открытым исходным кодом, который будет фильтровать по алфавиту любой список HTML с алфавитной навигацией.

Это называется AlphaListNav.js

Просто выведите свой список HTML (в вашем случае ваш список создается с помощью Coldfusion:

<ul id="myList">
  <li>Eggplant</li>
  <li>Apples</li>
  <li>Carrots</li>
  <li>Blueberries</li>  
</ul>

Добавьте CSS на <head>своей странице:

<link rel="stylesheet" href="alphaListNav.css">
<!-- note: you can edit/overide the css to customize how you want it to look -->

Добавьте файл JavaScript непосредственно перед закрывающим </body>тегом:

<script src="alphaListNav.js"></script>

И затем инициализируйте библиотеку AlphaListNav в вашем списке, передав ей идентификатор вашего списка. Вот так:

<script>
    new AlphaListNav('myList');
</script>

У него есть различные варианты настройки поведения, которые вы можете захотеть:

Например:

<script>
  new AlphaListNav('myList', {
    initLetter: 'A',
    includeAll: false,
    includeNums: false,
    removeDisabled: true,
    //and many other options available..
  });
</script>

Проект GitHub здесь

И пример CodePen здесь

Сайт и документация AlphaListNav.js находится здесь

0
1.03.2020 01:32:13