Navegación alfabética dinámica

Question

Estoy usando ColdFusion para devolver un conjunto de resultados de una base de datos SQL y convertirlo en una lista.

Necesito alguna forma de generar una barra de navegación alfabética para esa lista. Tengo ColdFusion y la biblioteca jQuery disponible.

Busco para generar algo como esto:

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

Dónde hacer clic en una de las letras que cae abajo la página para el primer elemento de esa carta. No todas las 26 letras del alfabeto están necesariamente en uso.

Answer 1

Por lo tanto, hubo muchas buenas sugerencias, pero ninguna hizo exactamente lo que yo quería. Afortunadamente pude usarlos para descubrir lo que realmente quería hacer. Lo único que no se puede hacer a continuación es imprimir las últimas letras sin usar (si las hay). Por eso tengo esa declaración cfif la comprobación de 'W' ya que es la última carta que uso, de lo contrario, debe comprobar si hay 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> 

Answer 2

Me gustaría obtener el conjunto de resultados SQL para devolver la lista en primer lugar, puede simplemente tomar la primera letra del artículo requerido y un conteo. La manera más rápida sería hacer una combinación en una tabla de 26 caracteres (menos manipulación de cadenas de esa manera).

En CF use el valor de conteo para asegurarse de que si no hay resultados, solo muestra la letra (como texto estándar) o no la muestra.

¿Cuántas filas va a trabajar ya que puede haber mejores formas de hacerlo? Por ejemplo, almacenar la primera letra de su campo de enlace requerido en una columna separada en la inserción reduciría la sobrecarga al seleccionar.

Answer 3

Para generar la barra de navegación, se podría hacer algo como esto:

<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 no funciona en los personajes, así que hay que convertir a los códigos ASCII y viceversa)

---

Para mostrar los elementos en su consulta puede hacer algo como esto.

<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

Puede utilizar la función de agrupación de consultas en su consulta de registros. Obviamente tendrá que cambiar los campos de consulta de acuerdo con sus datos y la función left() puede ser de sintaxis diferente dependiendo de su motor de base de datos. La siguiente consulta funciona en 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>