9

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

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

我正在寻找生成这样的东西：

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

在单击其中一个字母的地方，您会将页面向下带到该字母的第一个项目。并非所有 26 个字母都必须使用。

4

5 回答 5

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>

（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>
于 2008-08-19T17:04:45.627 回答
3

您可以在查询记录时使用查询分组功能。您显然必须根据您的数据更改查询字段，并且 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>
于 2008-09-15T21:21:43.613 回答
1

我会首先让 SQL 结果集返回列表，您可以轻松地获取所需项目的第一个字母，然后进行计数。最快的方法是在 26 个字符的表上进行连接（这样可以减少字符串操作）。

在 CF 中使用计数值来确保如果没有结果，您要么只显示字母（作为标准文本），要么根本不显示它。

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

于 2008-08-19T16:59:39.413 回答
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>
于 2008-09-26T00:25:36.013 回答
0

这个问题是很久以前发布的，但是现在有一个开源的 vanilla JavaScript 插件可用，它可以按字母顺序过滤任何带有字母导航的 HTML 列表

它被称为AlphaListNav.js

只需输出您的 HTML 列表（在您的情况下，您的列表使用以下命令生成Coldfusion：

<ul id="myList">
  <li>Eggplant</li>
  <li>Apples</li>
  <li>Carrots</li>
  <li>Blueberries</li>  
</ul>

在页面中添加 CSS <head>：

<link rel="stylesheet" href="alphaListNav.css">
<!-- note: you can edit/overide the css to customize how you want it to look -->

</body>在结束标记之前添加 JavaScript 文件：

<script src="alphaListNav.js"></script>

然后通过将列表的 id 传递给列表中的 AlphaListNav 库来初始化它。像这样：

<script>
    new AlphaListNav('myList');
</script>

它有各种不同的选项来定制你可能想要的行为：

例如：

<script>
  new AlphaListNav('myList', {
    initLetter: 'A',
    includeAll: false,
    includeNums: false,
    removeDisabled: true,
    //and many other options available..
  });
</script>

GitHub 项目在这里

这里有一个 CodePen 示例

AlphaListNav.js 网站和文档在这里

于 2020-03-01T01:32:13.547 回答