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

Question

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

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

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

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

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

Answer 1

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

<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>

Answer 2

Вы можете использовать функцию группировки запросов для вашего запроса записей. Вам, очевидно, придется изменить поля запроса в соответствии с вашими данными, и функция 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>

Answer 3

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

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

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

Answer 4

Итак, было много хороших предложений, но ни одно не сделало именно то, что я хотел. К счастью, я смог использовать их, чтобы понять, что я действительно хотел сделать. Единственное, что не делает следующее - это распечатать последние несколько неиспользованных букв (если они есть). Вот почему у меня есть оператор 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>