🚎 🚅 🧛🏿 XSLTの階層化メニュー 👡 🚫 🏺

親愛なるハブロフチャン。マルチレベルメニューを表示するためのテンプレートを導入したいのですが、少し変更して、通常のツリーを表示するために機能します。お気に入りのサイトではそのようなものは見ませんでした。インターネットでは探しませんでした。一部の人にとっては簡単すぎるように見えるかもしれませんが、他の人がそれを必要としていることを願っています。

ここでは、ツリーの構築のトピックについてはすでに取り上げました。この例では、別のXMLファイル構造と他のタスクのシャープニング。

XMLファイルから始めましょう。構造は複雑ではありません。各要素は、識別子、親要素の識別子、リンク、および名前で構成されます。

menu.xml

<?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/xsl" href="menu.xsl"?> <root> <item id="1" idParent="0" link="#" title=" 1"/> <item id="2" idParent="1" link="#" title=" 2"/> <item id="3" idParent="1" link="#" title=" 3"/> <item id="4" idParent="2" link="#" title=" 4"/> <item id="5" idParent="2" link="#" title=" 5"/> <item id="6" idParent="1" link="#" title=" 6"/> <item id="7" idParent="6" link="#" title=" 7"/> <item id="8" idParent="6" link="#" title=" 8"/> <item id="9" idParent="0" link="#" title=" 9"/> </root>

ためらうことなく、変換テンプレートを推測します

menu.xsl

 <?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <!--   --> <xsl:output method="html" encoding="utf-8" omit-xml-declaration="yes" doctype-system="about:legacy-compat"/> <!--   --> <xsl:template match="/"> <html lang="ru"> <head> <title> </title> </head> <body> <h1> </h1> <ul> <xsl:apply-templates select="/root/item[@idParent=0]"/> </ul> </body> </html> </xsl:template> <!--    --> <xsl:template match="/root/item"> <xsl:variable name="id" select="@id"/> <!--    --> <li> <a href="{@link}"> <xsl:value-of select="@title"/> </a> <!--    --> <xsl:if test="/root/item[@idParent=$id]"> <ul> <xsl:apply-templates select="/root/item[@idParent=$id]"/> </ul> </xsl:if> </li> </xsl:template> </xsl:stylesheet>

変換テンプレートは2つの部分で構成されています。最初のものは基本的なHTMLタグを表示するもので、特に興味深いものではありません。親の識別子がゼロに等しい要素の呼び出しを開始するテンプレートの呼び出しに注意するだけです。

2番目の部分はメニュー項目を表示し、現在の識別子と等しい親識別子を持つ要素があるかどうかを確認します。存在する場合、同じテンプレートを再帰的に呼び出します。

当然、存在しない親を参照するアイテムは表示されません。

menu.xmlとmenu.xslを1つのフォルダーに保存し、ブラウザーで最初に起動します。この写真が表示されます。

メニュー出力

PS見つかったエラーについてDartに感謝します。

XSLTの階層化メニュー

More articles: