XML卷的结构树图
有2个文件:flow2.xml和flow2.xsl
效果:
浏览这里
讲解:
2叉树思路(1)
<htmlxmlns:v=\"urn:schemas-microsoft-com:vml\">
<STYLE>
v\\:*{BEHAVIOR:url(#default#VML)}
</STYLE>
<v:groupid=\"group1\"name=\"group1\"coordsize=\"100,100\">
…
</v:group>
以上这些都是VML
基本格式
我就不详细讲解了
XML是树型结构
我们读取每个数据就需要对这个 XML数据树进行遍历
而递归运算是XSL优势的
我也是在用其它多种思路方法进行遍历运算失败后才
决定使用XSL
<FlowRoot>
<VCTitle> 2叉树--结构图</vcTitle>
<Author>Sailflying</Author>
<Email>[email protected]</Email>
<FlowNode>
<iProcess>1</iProcess>
<vcCourse>第
个节点</vcCourse> <iNextYes>
<FlowNode>
<iProcess>2</iProcess>
<vcCourse>第 2个节点</vcCourse>
<iNextYes>…</iNextYes>
<iNextNo>…</iNextNo>
</FlowNode>
</iNextYes>
<iNextNo>
<FlowNode>
<iProcess>3</iProcess>
<vcCourse>第 3个节点</vcCourse>
<iNextYes>…</iNextYes>
<iNextNo>…</iNextNo>
</FlowNode>
</iNextNo>
</FlowNode>
</FlowRoot>
逻辑上很简单
当前节点(1)下面有两个子节点(23) 只需要将节点2和节点3定位在节点1
左下方和右下方就可以了 这里我将左右节点
连接线分别用了绿色和红色方便显示 前面我们说到了XSL
递归功能为了更清楚看到每个详细 显示步骤
只需要仿照下面代码加个alert语句就可以了 <xsl:templatematch=\"FlowNode\">
…
<SCRIPTlanguage=\"JavaScript1.2\">
…
alert(’逐步显示’);
…
</SCRIPT>
…
</xsl:template>
看了上面
慢动作是否能让大家了解到我思路 2叉树思路(2)
我
思路很简单: (1)读取当前节点
资料用VML生成个新对象 给对象赋
数值(如name,id,style样式等) (2)用脚本控制来给当前对象定位
(3)当前节点和它
父亲节点的间加箭头线条 (4)继续找当前节点
子节点直循环定位到结束 也就是所有节点都遍历完毕
已经生成好了树 <xsl:templatematch=\"FlowNode\">
…
<xsl:apply-templates/>
…
</xsl:template>
<xsl:templatematch=\"iNextYes\">
<xsl:apply-templatesselect=\"./FlowNode\"/>
</xsl:template>
<xsl:templatematch=\"iNextNo\">
<xsl:apply-templatesselect=\"./FlowNode\"/> [Page]
</xsl:template>
整个递归过程就是靠上面这 3个模块(template)来完成
第
个template在匹配当前节点中每个子节点模板时候 
了后面两个template；而后面两个template又在具体执行 时候了第个template这就相当于个递归
语法:
要依次匹配当前节点中
每个子节点模板应使用该元 素
基本形式<xsl:apply-templates/> 否则
匹配节点由select参数中XPath表达式值决 定
如<xsl:apply-templatesselect=\"./FlowNode\"/> (1)和(2)
作用都是返回由select参数给出表达式
串值 他们
搜索条件相同所以返回值也样 只不过是使用
场合区别他们书写形式也就不样 (1)<xsl:value-ofselect=\"./iProcess/text
\"/> (2){./iProcess/text
} 这里定义了
些变量节点定位就是根据这些变量来运算公式 root_left//根
左边距=所有叶子分配宽度(y*10)+所有叶子宽度(y*50)+左边距基本值(10) root_top//根
上边距=上边距基本值(10) objOval//当前对象
是个object objOval_iProcess//当前对象
步骤值 objParentOval//当前对象
父节点是个object objParentOval_iProcess//当前对象父节点
步骤值 objParent_name//当前对象父节点
名称 Leaf_left//当前对象
所有子节点中左边叶子数 Leaf_right//当前对象
所有子节点中右边叶子数 Leaf_sum//当前对象
所有子节点中叶子数 叶子:是指当前节点没有子节点
节点
定位公式: (1)当前节点是根节点
//根
位置 SobjOval.style.left=parseInt(root_left);
SobjOval.style.top=parseInt(root_top);
//parseInt
作用是取整数值如果不是则为NAN //isNaN
作用是判断parseInt取得是否为整数 (2)当前节点是父节点
左边子节点 1)判断
条件是:当前对象父节点名称=’iNextYes’ …
2)如果存在右边子叶子
则公式为: 当前节点
left=父节点left-当前节点右边子叶子总宽度-当前节点宽度 3)如果不存在右边子叶子
但存在左边子叶子则公式为:
当前节点
left=父节点left-当前节点左边子叶子总宽度 4)如果当前节点本身就是叶子
则公式为: 当前节点
left=父节点left-当前节点宽度 …
(3)当前节点是父节点
右边子节点 1)判断
条件是:当前对象父节点名称=’iNextNo’ …
2)如果存在左边子叶子
则公式为: 当前节点
left=父节点left+当前节点左边子叶子总宽度+当前节点宽度 3)如果不存在左边子叶子
但存在右边子叶子则公式为: 当前节点
left=父节点left+当前节点右边子叶子总宽度 [Page]4)如果当前节点本身就是叶子
则公式为: 当前节点
left=父节点left+当前节点宽度 …
(2)和(3)
公式都是得到当前节点left我们还需要得到当前节点top 很简单
公式:当前节点top=父节点top+偏移量(80) 2叉树思路(3)
连接线条
定位思路: (1)找到当前节点和父节点
位置 (2)判断当前节点是父节点
左边子节点还是右边子节点 (3)画线条
这里定义了
些变量 objOval//当前节点
是个object objParentOval//当前对象
父节点是个object objLine//当前线条
是个object 线条
定位公式: from=\"x1,y1\"to=\"x2,y2\"是VML里定位线条
方式 当前节点是父节点
左边子节点则公式为: from=父节点
left+偏移量(15),父节点top+偏移量(32) to=父节点
left+偏移量(30),父节点top-偏移量(2) 当前节点是父节点
右边子节点则公式为: from=父节点
left+偏移量(35),父节点top+偏移量(32) to=父节点
left+偏移量(20),父节点top-偏移量(2) 
最新评论