动态字母导航

ale*_*206 8 html javascript sql coldfusion jquery

我正在使用ColdFusion从SQL数据库返回结果集并将其转换为列表.

我需要一些方法来为该列表生成一个字母导航栏.我有ColdFusion和jQuery库可用.

我想生成这样的东西:

A | B | C | ...      
- A
- A
- B
- B
- B
- C
- D
Run Code Online (Sandbox Code Playgroud)

点击其中一个字母会将页面下移到该字母的第一个项目.并非所有26个字母都必须使用.

Pat*_*ney 5

要生成导航栏,您可以执行以下操作:

<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>
Run Code Online (Sandbox Code Playgroud)

(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>
Run Code Online (Sandbox Code Playgroud)


ale*_*206 0

所以,有很多好的建议,但没有一个完全符合我的要求。幸运的是,我能够利用它们来弄清楚我真正想做的事情。以下唯一不做的事情是打印最后几个未使用的字母(如果有的话)。这就是为什么我有 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>
Run Code Online (Sandbox Code Playgroud)