Dynamische alphabetische Navigation

Question

Ich verwende ColdFusion, um eine Ergebnismenge aus einer SQL-Datenbank zurückzugeben und sie in eine Liste umzuwandeln.

Ich brauche einen Weg, um eine alphabetische Navigationsleiste für diese Liste zu generieren. Ich habe ColdFusion und die jQuery-Bibliothek verfügbar.

Ich suche so etwas zu erzeugen:

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

Wo Klick auf einen der Buchstaben fällt Sie unten auf der Seite auf das erste Element für diesen Brief. Nicht alle 26 Buchstaben des Alphabets werden notwendigerweise verwendet.

Answer 1

Also, es gab viele gute Vorschläge, aber keiner hat genau das gemacht, was ich wollte. Glücklicherweise konnte ich sie nutzen, um herauszufinden, was ich wirklich machen wollte. Das einzige, was das Folgende nicht tut, ist die letzten unbenutzten Buchstaben zu drucken (falls es welche gibt). Deshalb habe ich diese cfifAnweisung haben Überprüfung für ‚W‘ wie das ist der letzte Brief, den ich verwenden, sonst sollte es für Z. überprüfen

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

Answer 2

Ich würde die SQL-Ergebnismenge erhalten, um die Liste an erster Stelle zurückzugeben, können Sie einfach den ersten Buchstaben des erforderlichen Elements und eine Anzahl zu nehmen. Der schnellste Weg wäre ein Join auf einer Tabelle mit 26 Zeichen (weniger String-Manipulation auf diese Weise).

Verwenden Sie in CF den Zählwert, um sicherzustellen, dass bei einem Ergebnis entweder nur der Buchstabe angezeigt wird (als Standardtext) oder gar nicht angezeigt wird.

Wie viele Zeilen werden Sie arbeiten, da es bessere Möglichkeiten gibt, dies zu tun. Wenn Sie beispielsweise den ersten Buchstaben des benötigten Verknüpfungsfelds in einer separaten Spalte beim Einfügen speichern, wird der Overhead bei der Auswahl reduziert.

Answer 3

die Navigationsleiste zu generieren, könnten Sie so etwas tun:

<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 auf Zeichen nicht funktioniert, so dass Sie ASCII-Codes konvertieren und zurück)

---

Um die Elemente in Ihrer Abfrage anzuzeigen, können Sie so etwas tun.

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

Sie könnten die Abfragegruppierungsfunktion für Ihre Abfrage von Datensätzen verwenden. Sie müssen die Abfragefelder natürlich entsprechend Ihren Daten ändern, und die Funktion left() kann je nach Datenbankmodul eine andere Syntax haben. Die folgende Abfrage funktioniert auf 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>