计算机科学论坛--显示贴子

以文本方式查看主题

-  计算机科学论坛  (http://bbs.xml.org.cn/index.asp)
--  『 XML源码及示例(仅原创和转载) 』  (http://bbs.xml.org.cn/list.asp?boardid=32)
----  XML卷之实战锦囊  (http://bbs.xml.org.cn/dispbbs.asp?boardid=32&rootid=&id=13793)

--  作者：Coral
--  发布时间：1/19/2005 8:59:00 AM

--  XML卷之实战锦囊
(1)动态排序
文章类别：XML教程   发表日期：2003-9-29  星期一
转自：动态网制作指南 www.knowsky.com

动机：
排序功能让我们页面上的数据显的更人性化，是我们在网站上见过的很普遍的一个功能效果了。以往的自动排序都是用大量的脚本代码来完成的，对一般的爱好者来说这是件困难的事情。然而用XML来处理的话就简单多了。让自己的页面更加绚丽，哈哈，您是不是也心动了呢！

材料：
XML卷之动态排序
有2个文件：paixu.xml 和 paixu.xsl

作用：
在不刷新页面的情况下更据用户自己的需要对数据重新进行排序显示，有效的提高数据互动功能，让自己的页面更加绚丽多彩。
效果：
浏览这里
代码：
paixu.xml
<?xml version="1.0" encoding="gb2312" ?>
<?xml-stylesheet type="text/xsl" href="paixu.xsl" ?>
<BlueIdea>
  <team>
    <blue_ID>1</blue_ID>
    <blue_name>Sailflying</blue_name>
    <blue_text>一个简单的排序</blue_text>
    <blue_time>2002-1-11 17:35:33</blue_time>
    <blue_class>XML专题</blue_class>
  </team>
  <team>
    <blue_ID>2</blue_ID>
    <blue_name>flyingbird</blue_name>
    <blue_text>嫁给你，是要你疼的</blue_text>
    <blue_time>2001-09-06 12:45:51</blue_time>
    <blue_class>灌水精华</blue_class>
  </team>
  <team>
    <blue_ID>3</blue_ID>
    <blue_name>苛子</blue_name>
    <blue_text>正则表达式在ＵＢＢ论坛中的应用</blue_text>
    <blue_time>2001-11-23 21:02:16</blue_time>
    <blue_class>Web 编程精华</blue_class>
  </team>
  <team>
    <blue_ID>4</blue_ID>
    <blue_name>太乙郎</blue_name>
    <blue_text>年末经典分舵聚会完全手册 v0.1</blue_text>
    <blue_time>2000-12-08 10:22:48</blue_time>
    <blue_class>论坛灌水区</blue_class>
  </team>
  <team>
    <blue_ID>5</blue_ID>
    <blue_name>mmkk</blue_name>
    <blue_text>Asp错误信息总汇</blue_text>
    <blue_time>2001-10-13 16:39:05</blue_time>
    <blue_class>javascript脚本</blue_class>
  </team>
</BlueIdea>

paixu.xsl
<?xml version="1.0" encoding="gb2312" ?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
<html>
<head>
<title> XML卷之实战锦囊（1）：动态排序</title>
<style>
body,BlueIdea,team,blue_ID,blue_name,blue_text,blue_time,blue_class{ font: 12px "宋体", "Arial", "Times New Roman"; }
table { font-size: 12px; border: 0px double; border-color: #99CC99 #99CC99 #CCCCCC #CCCCCC; cellpadding:3;cellspacing:3; bgcolor:#eeeeee; text-decoration: blink}
span { font-size: 12px; color: red; }
</style>
<script>
function taxis(x)
{
stylesheet=document.XSLDocument;
source=document.XMLDocument;
sortField=document.XSLDocument.selectSingleNode("//@order-by");
sortField.value=x;
Layer1.innerHTML=source.documentElement.transformNode(stylesheet);
}
</script>
</head>
<body>
<p align="center"><span>XML卷之实战锦囊（1）：动态排序</span></p>
<div id="Layer1" name="Layer1">
<xsl:apply-templates select="BlueIdea" />
</div>
</body>
</html>
</xsl:template>
<xsl:template match="BlueIdea">
<table width="500" border="1" align="center" cellpadding="1" cellspacing="1" bordercolordark="#ffffff" bordercolorlight="#ADAAAD">
<tr bgcolor="#FFCC99" align="center">
<td style="cursor:s-resize" onClick="taxis('blue_ID')">编号</td>
<td style="cursor:s-resize" onClick="taxis('blue_name')">姓名</td>
<td style="cursor:s-resize" onClick="taxis('blue_text')">主题</td>
<td style="cursor:s-resize" onClick="taxis('blue_time')">发表时间</td>
<td style="cursor:s-resize" onClick="taxis('blue_class')">归类</td>
</tr>
<xsl:apply-templates select="team" order-by="blue_ID"/>
</table>
</xsl:template>
<xsl:template match="team">
<tr align="center">
<xsl:apply-templates select="blue_ID" />
<xsl:apply-templates select="blue_name" />
<xsl:apply-templates select="blue_text" />
<xsl:apply-templates select="blue_time" />
<xsl:apply-templates select="blue_class" />
</tr>
</xsl:template>
<xsl:template match="blue_ID">
<td bgcolor="#eeeeee">
<xsl:value-of />
</td>
</xsl:template>
<xsl:template match="blue_name">
<td>
<xsl:value-of />
</td>
</xsl:template>
<xsl:template match="blue_text">
<td>
<xsl:value-of />
</td>
</xsl:template>
<xsl:template match="blue_time">
<td>
<xsl:value-of />
</td>
</xsl:template>
<xsl:template match="blue_class">
<td>
<xsl:value-of />
</td>
</xsl:template>
</xsl:stylesheet>

讲解：
1）paixu.xml 是数据文件，相信大家都不会有问题。
2）paixu.xsl 是格式文件，有几个地方要注意。
（1）脚本中：

sortField=document.XSLDocument.selectSingleNode("//@order-by");
作用是：找到有属性为order-by的第一个节点，因此它对应的节点就是
<xsl:apply-templates select="team" order-by="blue_ID"/>
因此在初次onLoad的时候order-by的value值是blue_ID。
而我们就是通过重新定义order-by的value值来达到排序的目的。

Layer1.innerHTML=source.documentElement.transformNode(stylesheet);
作用是：转化XML数据后更改Layer1，因此在传出参数'blue_name'后，
<td style="cursor:s-resize" onClick="taxis('blue_name)">姓名</td>
我们将order-by的value值修改为是'blue_name'，即以'blue_name'为排序方式。
继而通过重新显示Layer1的innerHTML值来显示新的排序内容。

（2）文本中：

order-by
这个可不能少哦，不然就找不到了，效果嘛，你瞧瞧看吧！！

<?xml version="1.0" encoding="gb2312" ?>
另外说一点：
在大多的XML教科书中所显示的代码中很少会加上encoding="gb2312" ，
因此我们在XML中用到中文的时候会报错，原因就是没有写这个申明。

后记：
大家熟悉动态排序完成思路后会发现，其实我们的实现手法很简单。
就是修改order-by的数值，然后重新显示。
在动态查询和动态分页的功能中我们依然是按照这个思路去完成的。

--  作者：Coral
--  发布时间：1/19/2005 9:01:00 AM

--  XML卷之实战锦囊--------动态查询
文章类别：XML教程   发表日期：2003-9-29  星期一
转自：动态网制作指南 www.knowsky.com

动机：
查询功能是我们在网站上见过的最普遍也是最常用的一个功能模块了。以往的信息查询都是连接到数据库的，每一次点击都必须要后台数据库的支持。然而很多情况下用户往往只针对某一部分的数据进行操作，这样不但服务器的负担加重，而且严重的影响用户浏览的速度。

针对这种情况我们需要将用户需要的某一部分数据以XML的方式传递到客户端，用户对这些数据可以很方便的进行操作。既方便了用户，又减轻了服务器数据库的负担。何乐而不为呢！而且这项功能可以通用到其他众多模块，因此添加了这个动态查询功能。

材料：
XML卷之动态查询
有2个文件：search.xml 和 search.xsl

作用：
在不刷新页面的情况下对数据进行过滤筛选，有效的提高数据查询的功能。
效果：
浏览这里
代码：
search.xml
<?xml version="1.0" encoding="gb2312" ?>
<?xml-stylesheet type="text/xsl" href="search.xsl" ?>
<BlueIdea>
  <team>
    <blue_ID>1</blue_ID>
    <blue_name>Sailflying</blue_name>
    <blue_text>一个简单的查询</blue_text>
    <blue_time>2002-1-11 17:35:33</blue_time>
    <blue_class>XML专题</blue_class>
  </team>
  <team>
    <blue_ID>2</blue_ID>
    <blue_name>flyingbird</blue_name>
    <blue_text>嫁给你，是要你疼的</blue_text>
    <blue_time>2001-09-06 12:45:51</blue_time>
    <blue_class>灌水精华</blue_class>
  </team>
  <team>
    <blue_ID>3</blue_ID>
    <blue_name>苛子</blue_name>
    <blue_text>正则表达式在ＵＢＢ论坛中的应用</blue_text>
    <blue_time>2001-11-23 21:02:16</blue_time>
    <blue_class>Web 编程精华</blue_class>
  </team>
  <team>
    <blue_ID>4</blue_ID>
    <blue_name>太乙郎</blue_name>
    <blue_text>年末经典分舵聚会完全手册 v0.1</blue_text>
    <blue_time>2000-12-08 10:22:48</blue_time>
    <blue_class>论坛灌水区</blue_class>
  </team>
  <team>
    <blue_ID>5</blue_ID>
    <blue_name>mmkk</blue_name>
    <blue_text>Asp错误信息总汇</blue_text>
    <blue_time>2001-10-13 16:39:05</blue_time>
    <blue_class>javascript脚本</blue_class>
  </team>
</BlueIdea>

search.xsl
<?xml version="1.0" encoding="gb2312" ?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
<html>
<head>
<title> XML卷之实战锦囊（2）：动态查询</title>
<style>
body,BlueIdea,team,blue_ID,blue_name,blue_text,blue_time,blue_class{ font: 12px "宋体", "Arial", "Times New Roman"; }
table { font-size: 12px; border: 0px double; border-color: #99CC99 #99CC99 #CCCCCC #CCCCCC; cellpadding:3;cellspacing:3; bgcolor:#eeeeee; text-decoration: blink}
span { font-size: 12px; color: red; }
</style>
<script>
function searchtext(x)
{
stylesheet=document.XSLDocument;
source=document.XMLDocument;
sortField=document.XSLDocument.selectNodes("//@select");
if (x!="")
{
sortField[1].value="team[blue_ID='"+x+"']";
Layer1.innerHTML=source.documentElement.transformNode(stylesheet);
}
else {alert("请输入筛选条件！");}
}
</script>
</head>
<body>
<p align="center"><span>XML卷之实战锦囊（2）：动态查询</span></p>
<div id="Layer1" name="Layer1">
<xsl:apply-templates select="BlueIdea" />
</div>
<hr size="1" width="500" />
<table align="center" cellpadding="0" cellspacing="0" border="0" >
<tr>
<td>
<span >请输入筛选条件 : </span>
blue_ID= <input type="text" name="searchtext" size="1" maxlength="1" />
<input type="button" class="button" onClick="searchtext(document.all.searchtext.value)" value="Search" name="button" />
</td>
</tr>
</table>
</body>
</html>
</xsl:template>
<xsl:template match="BlueIdea">
<table width="500" border="1" align="center" cellpadding="1" cellspacing="1" bordercolordark="#ffffff" bordercolorlight="#ADAAAD">
<tr bgcolor="#FFCC99" align="center">
<td>编号</td>
<td>姓名</td>
<td>主题</td>
<td>发表时间</td>
<td>归类</td>
</tr>
<xsl:apply-templates select="team" order-by="blue_ID"/>
</table>
</xsl:template>
<xsl:template match="team">
<tr align="center">
<xsl:apply-templates select="blue_ID" />
<xsl:apply-templates select="blue_name" />
<xsl:apply-templates select="blue_text" />
<xsl:apply-templates select="blue_time" />
<xsl:apply-templates select="blue_class" />
</tr>
</xsl:template>
<xsl:template match="blue_ID">
<td bgcolor="#eeeeee">
<xsl:value-of />
</td>
</xsl:template>
<xsl:template match="blue_name">
<td>
<xsl:value-of />
</td>
</xsl:template>
<xsl:template match="blue_text">
<td>
<xsl:value-of />
</td>
</xsl:template>
<xsl:template match="blue_time">
<td>
<xsl:value-of />
</td>
</xsl:template>
<xsl:template match="blue_class">
<td>
<xsl:value-of />
</td>
</xsl:template>
</xsl:stylesheet>

讲解：
1）search.xml 是数据文件，相信大家都不会有问题。
2）search.xsl 是格式文件，有几个地方要注意。
（1）脚本中：
sortField=document.XSLDocument.selectNodes("//@select");
作用是：找到所有属性为select的节点。这个和我在动态排序中说到的
sortField=document.XSLDocument.selectSingleNode("//@order-by");
有些不一样了。大家注意这个小小的区别以及各自的功能。

sortField[1].value="team[blue_ID='"+x+"']";
因此sortField[1]就是找到的第二个节点，它对应的节点就是
<xsl:apply-templates select="team" order-by="blue_ID"/>

参数 x 是文本框中输入的数值。
我们将select="team" 的搜索条件修改为select="team[blue_ID='x']"
作用是：增加判断条件，只有blue_ID的数值等于 x 的XML数据才显示出来。
当然大家可以丰富判断的条件，我在这里做的简单判断是为了让大家更容易理解。
最后通过重新显示Layer1的innerHTML值来显示新的排序内容。

（2）文本中：

select="team"
在我这里它是 sortField[1]，但你在做的时候可能就会更改。
那么你就一定要计算准确可错不得哦，不然就找到别家去了！
我提供一个常用的方法：在代码里你可以用循环来判断是否为你需要的节点。

另外说一点：
XML对大小写的要求极其严格。所以你的书写不规范的话，它可是会感冒的呀！

后记：
大家熟悉动态排序和动态查询的完成思路后会发现，其实我们的实现手法很简单。
就是修改某一个数值，然后重新显示。
在动态分页的功能中我们依然是按照这个思路去完成的。

--  作者：Coral
--  发布时间：1/19/2005 9:03:00 AM

--  XML卷之实战锦囊--------动态分页
文章类别：XML教程   发表日期：2003-9-29  星期一
转自：动态网制作指南 www.knowsky.com

动机：
为了方便用户查看大批量数据，我们会用到动态分页，因此分页功能是我们在网站上见过的最普遍也是最常用的一个功能模块了。而以往的信息分页都是连接到数据库的，每一次点击都必须要后台数据库的支持。这样不但服务器的负担加重，而且严重的影响用户浏览的速度.
试想，如果把分页的功能放到客户端，那会产生什么样的效果呢？呵呵，看看下面的设计吧！。

材料：
XML卷之动态分页
有2个文件：pages.xml 和 pages.xsl

作用：
把分页的功能放到客户端。在不刷新页面的情况下对数据进行过滤筛选，有效的提高浏览数据功能的效率。
效果：
浏览这里
代码：
pages.xml
<?xml version="1.0" encoding="gb2312" ?>
<?xml-stylesheet type="text/xsl" href="pages.xsl" ?>
<BlueIdea>
  <team>
    <blue_ID>1</blue_ID>
    <blue_name>Sailflying</blue_name>
    <blue_text>一个简单的分页</blue_text>
    <blue_time>2002-1-11 17:35:33</blue_time>
    <blue_class>XML专题</blue_class>
  </team>
  <team>
    <blue_ID>2</blue_ID>
    <blue_name>flyingbird</blue_name>
    <blue_text>嫁给你，是要你疼的</blue_text>
    <blue_time>2001-09-06 12:45:51</blue_time>
    <blue_class>灌水精华</blue_class>
  </team>
  <team>
    <blue_ID>3</blue_ID>
    <blue_name>苛子</blue_name>
    <blue_text>正则表达式在ＵＢＢ论坛中的应用</blue_text>
    <blue_time>2001-11-23 21:02:16</blue_time>
    <blue_class>Web 编程精华</blue_class>
  </team>
  <team>
    <blue_ID>4</blue_ID>
    <blue_name>太乙郎</blue_name>
    <blue_text>年末经典分舵聚会完全手册 v0.1</blue_text>
    <blue_time>2000-12-08 10:22:48</blue_time>
    <blue_class>论坛灌水区</blue_class>
  </team>
  <team>
    <blue_ID>5</blue_ID>
    <blue_name>mmkk</blue_name>
    <blue_text>Asp错误信息总汇</blue_text>
    <blue_time>2001-10-13 16:39:05</blue_time>
    <blue_class>javascript脚本</blue_class>
  </team>
</BlueIdea>

pages.xsl
<?xml version="1.0" encoding="gb2312" ?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
<html>
<head>
<title> XML卷之实战锦囊（3）：动态分页</title>
<style>
body,BlueIdea,team,blue_ID,blue_name,blue_text,blue_time,blue_class{ font: 12px "宋体", "Arial", "Times New Roman"; }
table { font-size: 12px; border: 0px double; border-color: #99CC99 #99CC99 #CCCCCC #CCCCCC; cellpadding:3;cellspacing:3; bgcolor:#eeeeee; text-decoration: blink}
span { font-size: 12px; color: red; }
.keybutton { cursor:hand; font-size: 12px; color: #003300; background: #ffffff; border: 0px solid;}
</style>
<script>
<xsl:comment>
<![CDATA[
var OnePageNum=2;
var PageNum=1;
var XMLPageNum=1;
function pages(Num)
{
stylesheet=document.XSLDocument;
source=document.XMLDocument;
nodes=source.documentElement.childNodes;
len=nodes.length;
for(i=1;i<=(len/OnePageNum);i++);
XMLPageNum=i;
var firstNum=0;
var lastNume=0;

if (Num=="first") {PageNum=1;}
if (Num=="previous") {if (PageNum>1) PageNum -=1;}
if (Num=="next") {if (PageNum<XMLPageNum) PageNum +=1;}
if (Num=="last") {PageNum =XMLPageNum;}

sortField=document.XSLDocument.selectSingleNode("//@expr");
firstNum=OnePageNum*(PageNum-1)+1;
lastNum=OnePageNum*(PageNum-1)+OnePageNum;
text="childnumber(this)>="+firstNum+" & childnumber(this)<="+lastNum;
sortField.value=text;
Layer1.innerHTML=source.documentElement.transformNode(stylesheet);
}
]]>
</xsl:comment>
</script>
</head>

<body>
<p align="center"><span>XML卷之实战锦囊（3）：动态分页</span></p>
<table align="center" width="500" >
<tr>
<td>
<button id="cmdfirstPage" class="keybutton" onclick="pages('first');" >首页</button>
<button id="cmdpreviousPage" class="keybutton" onclick="pages('previous');" >上一页</button>
<button id="cmdnextPage" class="keybutton" onclick="pages('next');">下一页</button>
<button id="cmdlastPage" class="keybutton" onclick="pages('last');">尾页</button>
</td>
</tr>
</table>
<div id="Layer1" name="Layer1"> <xsl:apply-templates select="BlueIdea" /></div>
</body>

</html>
</xsl:template>
<xsl:template match="BlueIdea">
<table width="500" border="1" align="center" cellpadding="1" cellspacing="1" bordercolordark="#ffffff" bordercolorlight="#ADAAAD">
<tr bgcolor="#FFCC99" align="center">
<td>编号</td>
<td>姓名</td>
<td>主题</td>
<td>发表时间</td>
<td>归类</td>
</tr>
<xsl:apply-templates select="team" order-by="blue_ID"/>
</table>
</xsl:template>
<xsl:template match="team">
<xsl:if expr="childnumber(this)>=1 & childnumber(this)<=2 ">
<tr align="center">
<xsl:apply-templates select="blue_ID" />
<xsl:apply-templates select="blue_name" />
<xsl:apply-templates select="blue_text" />
<xsl:apply-templates select="blue_time" />
<xsl:apply-templates select="blue_class" />
</tr>
</xsl:if>
</xsl:template>
<xsl:template match="blue_ID">
<td bgcolor="#eeeeee">
<xsl:value-of />
</td>
</xsl:template>
<xsl:template match="blue_name">
<td>
<xsl:value-of />
</td>
</xsl:template>
<xsl:template match="blue_text">
<td>
<xsl:value-of />
</td>
</xsl:template>
<xsl:template match="blue_time">
<td>
<xsl:value-of />
</td>
</xsl:template>
<xsl:template match="blue_class">
<td>
<xsl:value-of />
</td>
</xsl:template>
</xsl:stylesheet>

讲解：
1）search.xml 是数据文件，相信大家都不会有问题。
2）search.xsl 是格式文件，有几个地方要注意。

（1）脚本中：

nodes=source.documentElement.childNodes;
作用是：找到所有的节点。nodes.length就是符合条件的总节点数

sortField=document.XSLDocument.selectSingleNode("//@expr");
作用是：找到有属性为expr的第一个节点，因此它对应的节点就是
<xsl:if expr="childnumber(this)>=1 & childnumber(this)<=2 ">
因此在初次onLoad的时候expr的value值是
childnumber(this)<=1 & childnumber(this)>=2
关于 > < 大家可能熟悉多了。那&是什么呢？它就是“与”了.
大家可以在XML的书中找到其它的一些。

参数说明：
OnePageNum：每页显示的数据数
PageNum：当前页数
XMLPageNum：总页数
firstNum:当前页的第一条数据值
lastNum：当前页的最后一条数据值

（2）文本中：

<xsl:if expr="childnumber(this)>=1 & childnumber(this)<=2 ">
在分页中我们需要输出合适的数据，，因此我们用一个 if 判断条件来控制。
在初始的时候我们要求只输出最前的两个节点的数值。

childnumber(this)
作用：返回当前节点在它的上级节点列表中的编号，列表中的第一个节点默认编号为1。
在分页中我们就是根据节点的编号来判断它属于第几页。
expr
不知道大家发现没有，前两次我们用到的都是 test ,可这个我们用的却是expr。
它们之间有一定的区别，用法也不相同。
expr ── 脚本语言表达式，计算结果为"真"或"假"；如果结果为"真"，且通过test，则在输出中显示其中内容（可省略此项属性）。
test ── 源数据测试条件。

<button id="cmdfirstPage" class="keybutton" onclick="pages('first');" >首页</button>
作用是让数据回到最前一页。其它按钮的作用类似。

补充一点： XML例子文件的使用方法

1）将每个例子里的两个文件按照文件名分别保存。
2）用浏览器浏览XML文件即可。这是你会看到效果，应该不错吧！

后记：
呵呵，可以增加动态排序后，再分页的功能。再把列表数变为可设置。发挥你的思维，让这些功能更加完美。大家可以研究出更好的方法来实现分页功能。互相探讨，不亦乐乎！

--  作者：Coral
--  发布时间：1/19/2005 9:04:00 AM

--  XML卷之实战锦囊--------选单连动
文章类别：XML教程   发表日期：2003-9-29  星期一
转自：动态网制作指南 www.knowsky.com

动机：
现在我们做个在IE里应用XML的一个小例子：解决双下拉选单的连动问题。大家最常见的可能就是选取省份后改变城市选项的例子了，那我们就来尝试着用XML来完成吧。

以前介绍的一些功能我是直接用XML+XSL文件来完成的，大家可能还不是很熟悉它的用法，所以我这次就用HMTL+XML来做，希望能够让大家更清楚的了解--“XML原来可以如此简单！”：）

材料：
XML卷之选单连动
有2个文件：Citys.xml 和 CitySelect.htm

作用：
选择省份后可以自动显示相对应的城市，这样方便用户，有效的提高数据互动，让自己的页面更加绚丽多彩。
效果：
浏览这里
代码：
Citys.xml
<?xml version="1.0" encoding="gb2312"?>
<China>
  <State id="1" name="江西">
    <City>九江</City>
    <City>南昌</City>
    <City>庐山</City>
    <City>景德镇</City>
  </State>
  <State id="2" name="北京">
    <City>北京西</City>
    <City>居庸关</City>
    <City>清华园</City>
    <City>周口店</City>
  </State>
  <State id="3" name="福建">
    <City>福州</City>
    <City>厦门</City>
    <City>漳州</City>
  </State>
  <State id="4" name="甘肃">
    <City>兰州</City>
    <City>洛门</City>
    <City>嘉峪关</City>
  </State>
  <State id="5" name="广东">
    <City>广州</City>
    <City>深圳</City>
    <City>东莞</City>
    <City>石牌</City>
  </State>
  <State id="6" name="安徽">
    <City>合肥</City>
    <City>黄山</City>
    <City>九龙岗</City>
    <City>马鞍山</City>
  </State>
</China>

CitySelect.htm

自定义函数：ChooseState
(读取XML数据中的省的名称，并增加到SelState的下拉列表中)

function ChooseState()
{
  var source;
  var sourceName = "Citys.xml";
  var source = new ActiveXObject('Microsoft.XMLDOM');   //创建一个 MSXML解析器实例
  source.async = false;
  source.load(sourceName);   //装入XML文档
  root = source.documentElement;   //设置文档元素为根节点元素
  sortField=root.selectNodes("//@name");   //搜索属性中含有name的所有节点
  for(var i=0;i<sortField.length;++i)   //增加省份名称到下拉列表
  {
    var oOption = document.createElement('OPTION');
    oOption.text = " "+sortField[i].text+" ";
    oOption.value = sortField[i].text;
     form1.SelState.options.add(oOption);
  }
   ChooseCity();
}

自定义函数：ChooseCity
(根据当前选定的省名来读取XML数据中的对应城市名称，并增加到SelCity 的下拉列表中)
function ChooseCity()
{
  x=form1.SelState.selectedIndex;   //读取省份下拉框的当前选项
  y=form1.SelState.options[x].value;
  sortField=root.selectNodes("//State[@name='"+y+"']/City&q uot;);   //搜索name属性值等于
参数y的State节点下的所有city节点
  for(var i=form1.SelCity.options.length-1;i>=0;--i)   //撤消原来的列表项
  {
    form1.SelCity.options.remove(i)
  }
  for(var i=0;i<sortField.length;++i)   //增加城市名称到下拉列表
  {
    var oOption = document.createElement('OPTION');
    oOption.text = " "+sortField[i].text+" ";
    oOption.value = sortField[i].text;
    form1.SelCity.options.add(oOption);
  }
}

表单源码
<BODY onLoad="ChooseState()">
<FORM action="" method="post" id="form1" name="form1">
<SELECT name="SelState" id="SelState" onchange="ChooseCity()" >
</SELECT>
<SELECT name="SelCity" id="SelCity" >
</SELECT>
</FORM>
</BODY>

后记：
刚开始学XML的时候，我也有着和大家一样的迷惑 --- “XML我是学了，可究竟这XML应该怎么用呢？”这个问题阻难了我很久，很久......

因为电子商务和软件开发是我的专长，于是我觉得还是从身边最熟悉的开始做起吧。所以我将网站建设中最常用到的一些功能以XML的方式来完成。你也一样可以的！

--  作者：Coral
--  发布时间：1/19/2005 9:05:00 AM

--  XML卷之实战锦囊----------结构树图
文章类别：XML教程   发表日期：2003-9-29  星期一
转自：动态网制作指南 www.knowsky.com

动机：
最初想起做二叉树是因为需要做一个公司结构图。以前的做法都是直接用图象软件画出来一个图片。很好看，但每次有变动后都需要重新画一个新的。另一方面，网页上对线条的显示、布局相当局限。根据动态生成的数据进行排版、定位都相当困难，而且在美观上也差强人意。做了各种尝试以后，决定用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优势之一。
我也是在用其它多种方法进行遍历运算失败后才
决定使用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，3）。
只需要将节点2和节点3定位在节点1的左下方和右下方就可以了。
这里我将左右节点的连接线分别用了绿色和红色，方便显示。

前面我们说到了XSL的递归功能，为了更清楚的看到每一个详细的
显示步骤，只需要仿照下面的代码，加一个alert语句就可以了。

<xsl:template match="FlowNode">
…
<SCRIPT language="JavaScript1.2">
…
alert('逐步显示');
…
</SCRIPT>
…
</xsl:template>

看了上面的慢动作，是否能让大家了解到我的思路。

二叉树思路（2）
我的思路很简单：
（1）读取当前节点的资料，用VML生成一个新的对象。
给对象赋初始数值（如 name,id,style样式等）
（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>

整个递归过程就是靠上面这三个模块（template）来完成的。
第一个template在匹配当前节点中每一个子节点的模板的时候
调用了后面两个template；而后面两个template又在具体执行
的时候调用了第一个template ，这就相当于一个递归函数。

语法：

要依次匹配当前节点中的每个子节点的模板，应使用该元
素的基本形式 <xsl:apply-templates />。
否则，匹配的节点由 select 参数中 XPath 表达式的值决
定，如 <xsl:apply-templates select="./FlowNode" />

（1）和（2）的作用都是返回由 select 参数给出的表达式的字符串值。
他们的搜索条件相同，所以返回的值也一样。
只不过是使用的场合不同，他们的书写形式也就不一样。

（1） <xsl:value-of select="./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 + 当前节点的右边子叶子的总宽度

4）如果当前节点本身就是叶子，则公式为：
当前节点的left=父节点的left + 当前节点的宽度
…

（2）和（3）的公式都是得到当前节点的left，我们还需要得到当前节点的top
很简单的公式：当前节点的top=父节点的top + 偏移量（80）

二叉树思路（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）

我所能想到的也就这么多了。

如果只是单纯的做一个公司结构图的话，会更简单很多。
下面是赛扬的思路，我也是在他的基础上深入一点而已。

首先计算最下层节点个数，得出宽度，
然后应该根据节点的从属关系计算其上层节点位置，递归。
每一层级的节点要按从属关系先排序
首先设“基本值”=节点应向右偏移量
每个包含子节点的节点的left值等于它所拥有的节点所占宽度的一半加上基本值

后话：

最近不知为何，网络一直都不好。断线的时间比在线的时间多。
所以没对代码简化，其实，要完善的功能还有很多，比如：
需要加右键菜单
右键菜单内含新建节点、修改节点名称、改变关联关系等
在每一个节点上都可右键打开这个节点的右键菜单

讲解：
1）flow2.xml 是数据文件，相信大家都不会有问题。
2）flow2.xsl 是格式文件，有几个地方要注意。
（1）脚本中：

（1） <xsl:value-of select="./iProcess/text()" /> ;
（2） {./iProcess/text()}

（1）和（2）的作用都是返回由 select 参数给出的表达式的字符串值。
他们的搜索条件相同，所以返回的值也一样。
只不过是使用的场合不同，他们的书写形式也就不一样。
<xsl:apply-templates select="team" order-by="blue_ID"/>
比如我们想生成以下代码
<div 名称=“参数值”>内容</div>

我们假设名称为“name”,参数值为XML数据中当前节点下面的子节点book的值

第一种写法是先加属性名称，再加参数值
<div>
<xsl:attribute name="name">
<xsl:value-of select="./book/text()"/> </xsl:attribute>
内容
</div>

第二种写法是直接加属性名称和参数值
<div name="{./book/text()}">内容</div>

具体的使用你可以看我写的代码中的例子。

XSL在正式的 xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 的标准里

<xsl:value-of select="./book/text()"/>
作用是：只是把他的文本值写出来，而
<xsl:value-of select="./book"/>
是把他的文本值和他的所有子节点的内容显示出来。
大家可以试验一下，输出一个有子节点的，一个无子节点的
看看显示的结果是否相同。

（2）需要注意：

IE5 不支持 <tag att="{xpath}">
要用
<tag><xsl:attribute name="att"><xsl:value-of select="xpath"></xsl:attribute>

命名空间要用
xmlns:xsl="http://www.w3.org/TR/WD-xsl"

后记：
这里说的是一种思路。如果触类旁通，自然能够派上用场。

--  作者：wxb_nudt
--  发布时间：1/19/2005 9:47:00 AM

--
应该加精华！

--  作者：dzwzorro
--  发布时间：1/19/2005 2:08:00 PM

--
强烈感谢，我是个新手。不知道从哪入手。现在这么多实例。捧回去好好研究去。

--  作者：xmzhy
--  发布时间：1/24/2005 2:17:00 PM

--
太感谢了，如果能够提供下载就更好了。

--  作者：xifogogo
--  发布时间：1/24/2005 8:58:00 PM

--
在运行page.xsl时出现了以下错误：

应有分号。处理资源 'http://xifo/xml/test/page.xsl' 时出错。第 77 行，位置: 47

<xsl:if expr="childnumber(this)>=1&childnumber(this)<=2;">
----------------------------------------------^

--  作者：BaSaRa
--  发布时间：2/11/2005 7:05:00 PM

--
good!

--  作者：sunboy1975110
--  发布时间：3/11/2005 9:59:00 PM

--
thx

--  作者：jeanine
--  发布时间：3/15/2005 7:12:00 AM

--
顶啊

--  作者：cooky
--  发布时间：3/18/2005 5:16:00 PM

--
我全部收入囊中了,哈哈,谢谢

--  作者：dfsfsdf
--  发布时间：3/21/2005 5:45:00 PM

--
paixu.xml
<?xml version="1.0" encoding="gb2312" ?>
<?xml-stylesheet type="text/xsl" href="paixu.xsl" ?>
<BlueIdea>
  <team>
    <blue_ID>1</blue_ID>
    <blue_name>Sailflying</blue_name>
    <blue_text>一个简单的排序</blue_text>
    <blue_time>2002-1-11 17:35:33</blue_time>
    <blue_class>XML专题</blue_class>

http://www.hczjg.com/kook1/upload/009/plmm.swf

--  作者：ZHOUQINGQING
--  发布时间：3/23/2005 4:33:00 PM

--
真是非常感谢,我非常需要!!

--  作者：easteast
--  发布时间：5/17/2005 11:11:00 AM

--
用IE将例子打开，可以正常显示。但是通过在ASPX.net下运行的时候，却出现提示““order-by”对“apply-templates”元素是无效属性。”。这应该如何处理呢？

--  作者：easteast
--  发布时间：5/17/2005 11:30:00 AM

--
我试了下，是<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
和<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">的区别造成的。但是我在C#的aspx.net下运行时候，似乎编译平台只认<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">。这样就造成order-by无效。这该怎么办？

--  作者：蓝点
--  发布时间：5/20/2005 3:52:00 PM

--
看不懂呀。

--  作者：killl
--  发布时间：5/23/2005 2:45:00 PM

--

以下是引用xifogogo在2005-1-24 20:58:05的发言：
在运行page.xsl时出现了以下错误：

应有分号。处理资源 'http://xifo/xml/test/page.xsl' 时出错。第 77 行，位置: 47

<xsl:if expr="childnumber(this)>=1&childnumber(this)<=2;">
----------------------------------------------^

--  作者：qfacy
--  发布时间：5/26/2005 11:30:00 AM

--
good,I like this

--  作者：cwz
--  发布时间：5/27/2005 1:55:00 PM

--
thx!!! hope the next good programs

--  作者：jinghe41
--  发布时间：5/28/2005 2:02:00 PM

--
不顶也不行啊！！！！！！！！！！！！

--  作者：asteroid726
--  发布时间：5/29/2005 4:57:00 PM

--
顶一个！

--  作者：switer520
--  发布时间：5/30/2005 5:44:00 AM

--
好帖子啊111

--  作者：diffmaker
--  发布时间：5/30/2005 6:26:00 PM

--
作为新用户的第一帖，顶一下！

W 3 C h i n a ( since 2003 ) 旗下站点
苏ICP备05006046号《全国人大常委会关于维护互联网安全的决定》《计算机信息网络国际联网安全保护管理办法》

2,656.250ms