Navegação Alfabética Dinâmica
-
08-06-2019 - |
Pergunta
estou a usar ColdFusion
para retornar um conjunto de resultados de um banco de dados SQL e transformá-lo em uma lista.
Preciso de alguma forma de gerar uma barra de navegação em ordem alfabética para essa lista.Tenho ColdFusion e a biblioteca jQuery disponíveis.
Estou procurando gerar algo assim:
A | B | C | ...
- A
- A
- B
- B
- B
- C
- D
Onde clicar em uma das letras leva você para o primeiro item dessa carta.Nem todas as 26 letras do alfabeto estão necessariamente em uso.
Solução 4
Então, houve muitas sugestões boas, mas nenhuma fez exatamente o que eu queria.Felizmente consegui usá-los para descobrir o que realmente queria fazer.A única coisa que o seguinte não faz é imprimir as últimas letras não utilizadas (se houver).É por isso que tenho aquela instrução cfif verificando 'W', pois é a última letra que uso, caso contrário, ela deve verificar 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>
Outras dicas
Para gerar a barra de navegação, você poderia fazer algo assim:
<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 não funciona em caracteres, então você precisa converter para códigos ASCII e vice-versa.)
Para exibir os itens da sua consulta, você poderia fazer algo assim.
<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>
Você pode usar a função de agrupamento de consultas em sua consulta de registros.Obviamente, você terá que alterar os campos de consulta de acordo com seus dados e a função left() pode ter sintaxe diferente dependendo do mecanismo de banco de dados.A consulta abaixo funciona em 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>
Eu obteria o conjunto de resultados SQL para retornar a lista em primeiro lugar, você pode facilmente pegar a primeira letra do item necessário e uma contagem.A maneira mais rápida seria fazer uma junção em uma tabela de 26 caracteres (menos manipulação de strings dessa forma).
No CF, use o valor de contagem para garantir que, se não houver resultado, você exibirá apenas a letra (como texto padrão) ou não a exibirá.
Em quantas linhas você trabalhará, pois pode haver maneiras melhores de fazer isso.Por exemplo, armazenar a primeira letra do campo de link obrigatório em uma coluna separada na inserção reduziria a sobrecarga ao selecionar.