ホームページ >バックエンド開発 >XML/RSS チュートリアル >XML ボリュームの実践ヒント (5): 構造ツリー図
XML ボリュームの実践ヒント (5): 構造ツリー図
- 黄舟オリジナル
- 2017-02-10 16:22:171668ブラウズ
動機:
初めてバイナリーツリーを作ろうと思ったのは、会社の構造図を作る必要があったからです。 以前のアプローチは、グラフィック ソフトウェアを使用して直接絵を描くことでした。見た目は素晴らしいですが、変更があるたびに新しいものをペイントする必要があります。 一方、Web ページ上の行の表示とレイアウトはかなり制限されています。動的に生成されたデータに基づいて植字や配置を行うのは非常に難しく、美観も満足のいくものではありません。 いろいろ試した結果、データ操作にはXML+XSLを使用し、行の美化にはVMLを使用し、オブジェクトの配置にはJAVASCRIPTを使用することにしました。
資料:
XML ボリューム構造ツリー図
2 つのファイルがあります: flow2.xml と flow2.xsl
効果:
ここを参照
説明:
バイナリ ツリーのアイデア (1)
<html xmlns:v="urn:schemas-microsoft-com:vml">
<STYLE>
v\:* { BEHAVIOR: url(#default#VML) }
</STYLE>
<v:group id="group1" name="group1" coordsize = "100,100">
…
</v:group>これらは VML の基本形式です。詳しくは説明しません。
XML はツリー構造です。各データを読み取るには、この
XML データ ツリーをたどる必要があります。再帰操作は XSL の利点の 1 つです。
また、トラバーサル操作を実行するために他のさまざまな方法を使用して失敗した後、XSL を使用することにしました。
<FlowRoot> <vcTitle>二叉树--结构图</vcTitle> <Author>Sailflying</Author> <Email>sailflying@163.net</Email> <FlowNode> <iProcess>1</iProcess> <vcCourse>第一个节点</vcCourse> <iNextYes> <FlowNode> <iProcess>2</iProcess> <vcCourse>第二个节点</vcCourse> <iNextYes>…</iNextYes> <iNextNo>…</iNextNo> </FlowNode> </iNextYes> <iNextNo> <FlowNode> <iProcess>3</iProcess> <vcCourse>第三个节点</vcCourse> <iNextYes>…</iNextYes> <iNextNo>…</iNextNo> </FlowNode> </iNextNo> </FlowNode> </FlowRoot>
ロジックは非常に単純です。現在のノード (1) の下に 2 つの子ノード (2、3) があります。
ノード 2 とノード 3 をノード 1 の左下と右下に配置するだけです。
ここでは、表示しやすいように、左側と右側のノードの接続線にそれぞれ緑と赤を使用しています。
XSL の再帰関数については前に説明しましたが、各詳細な
表示ステップをより明確に確認するには、次のコードを模倣してアラート ステートメントを追加するだけです。
<xsl:template match="FlowNode">…<SCRIPT language="JavaScript1.2">…alert('逐步显示');…</SCRIPT>…</xsl:template>上のスローモーションを見て、私の考えが理解できますか?
二分木のアイデア (2)
私のアイデアは非常に単純です:
(1) 現在のノードのデータを読み取り、VML を使用して新しいオブジェクトを生成します。
オブジェクトに初期値を割り当てます(名前、ID、スタイルなど)
(2) スクリプトコントロールを使用して現在のオブジェクトを配置します
(3) 現在のノードとその親ノードの間に矢印と線を追加します。
(4) 現在のノードの子ノードを探し続け、最後までループします。
つまり、すべてのノードが走査され、ツリーが生成されました。
<xsl:template match="FlowNode">…<xsl:apply-templates />…</xsl:template> <xsl:template match="iNextYes"><xsl:apply-templates select="./FlowNode" /></xsl:template> <xsl:template match="iNextNo"><xsl:apply-templates select="./FlowNode" /></xsl:template>上記の 3 つのモジュール (テンプレート) によって、再帰的なプロセス全体が完了します。
最初のテンプレート
は、現在のノードの各サブノードのテンプレートと一致するときに次の 2 つのテンプレートを呼び出します。後の 2 つのテンプレートは、特定の実行中に最初のテンプレート
を呼び出します。これは再帰関数と同等です。
それ以外の場合、一致するノードは、a4ff84829f0c6689de63321b743d97eb などの選択パラメーターの XPath 式の値によって決定されます
検索条件が同じなので、戻り値も同じになります。
ただ、使われる場面によって書き方が違うだけです。
(1) 85b8912b4e06e271d47441541e29cb2a内容94b3e26ee717c64999d7867364b1b4a3
我们假设名称为“name”,参数值为XML数据中当前节点下面的子节点book的值
第一种写法是先加属性名称，再加参数值
<p> <xsl:attribute name="name"> <xsl:value-of select="./book/text()"/> </xsl:attribute> 内容 </p>
第二种写法是直接加属性名称和参数值
<p name="{./book/text()}">内容</p>具体的使用你可以看我写的代码中的例子。
XSL在正式的 xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 的标准里
<xsl:value-of select="./book/text()"/>
作用是：只是把他的文本值写出来，而
<xsl:value-of select="./book"/>
是把他的文本值和他的所有子节点的内容显示出来。
大家可以试验一下，输出一个有子节点的，一个无子节点的
看看显示的结果是否相同。
（2）需要注意：
IE5 不支持 c55c83ef8ee979923031582b93a38c44
要用
<tag><xsl:attribute name="att"><xsl:value-of select="xpath"></xsl:attribute>
命名空间要用
xmlns:xsl="http://www.w3.org/TR/WD-xsl" <?xml version="1.0" encoding="gb2312" ?>
另外说一点：
在大多的XML教科书中所显示的代码中很少会加上encoding="gb2312" ，
因此我们在XML中用到中文的时候会报错，原因就是没有写这个申明。
后记：
这里说的是一种思路。如果触类旁通，自然能够派上用场。
以上就是XML卷之实战锦囊（5）：结构树图的内容，更多相关内容请关注PHP中文网（www.php.cn）！