代码之家  ›  专栏  ›  技术社区  ›  alexp206

动态字母导航

  •  7
  • alexp206  · 技术社区  · 16 年前

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

    我需要一些方法为那个列表生成一个按字母顺序排列的导航栏。我有ColdFusion和jQuery库。

    我想生成这样的结果:

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

    点击其中一个字母,你就可以进入该字母的第一个项目。并非所有26个字母都必须使用。

    4 回复  |  直到 7 年前
        1
  •  5
  •   Patrick McElhaney    16 年前

    要生成导航栏,可以这样做:

    <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>
    
        2
  •  2
  •   mjb    16 年前

    您可以在查询记录时使用查询分组功能。显然,您必须根据数据更改查询字段,而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>
    
        3
  •  1
  •   Mauro    16 年前

    我将得到SQL结果集,首先返回列表,您可以很容易地获取所需项的第一个字母和一个计数。最快的方法是在一个包含26个字符的表上进行连接(这样做的字符串操作更少)。

    在cf中,使用count值确保如果没有结果,您要么只显示字母(作为标准文本),要么根本不显示。

    你要处理多少行,因为有更好的方法可以做到这一点。例如,在插入时将所需链接字段的第一个字母存储在单独的列中可以减少选择时的开销。

        4
  •  0
  •   community wiki alexp206    16 年前

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