9

ColdFusionSQL データベースから結果セットを返し、それをリストに変換するために使用しています。

そのリストのアルファベット順のナビゲーション バーを生成する方法が必要です。ColdFusion と jQuery ライブラリが利用可能です。

私はこのようなものを生成しようとしています:

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

文字の 1 つをクリックすると、ページがその文字の最初の項目にドロップダウンします。アルファベットの 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

この質問はかなり前に投稿されましたが、アルファベット順のナビゲーションで HTML リストをアルファベット順にフィルタリングするオープン ソースのバニラ JavaScript プラグインが利用可能になりました。

これは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 の Web サイトとドキュメントはこちら

于 2020-03-01T01:32:13.547 に答える