以文本方式查看主题

-  中文XML论坛 - 专业的XML技术讨论区  (http://bbs.xml.org.cn/index.asp)
--  『 XSL/XSLT/XSL-FO/CSS 』  (http://bbs.xml.org.cn/list.asp?boardid=8)
----  [求助]新人求助XSL实现树型结构的问题！请高手指点！  (http://bbs.xml.org.cn/dispbbs.asp?boardid=8&rootid=&id=50704)

--  作者：KELLY5677
--  发布时间：7/30/2007 4:43:00 PM

--  [求助]新人求助XSL实现树型结构的问题！请高手指点！
最近我要实现对XML的显示程序，基本是基于IE框架，只需使用XSL对XML文件加以定义和构造结构！~~~
在建HTML结构上看了很多，感觉难度还不大，但不知道能不能实现树型结构的展开和收缩！
是不是要需要使用脚本？但我不知道怎么把脚本套入XSL中？能直接使用吗？


请高手解答下，谢谢！

--  作者：火鸟
--  发布时间：7/30/2007 5:25:00 PM

--  
仔细看看这个帖子，需求和你的很象。
http://bbs.xml.org.cn/dispbbs.asp?boardID=8&ID=49488
树型结构需要javascript你可以参考网上的树型菜单的示例。
--  作者：KELLY5677
--  发布时间：7/30/2007 7:17:00 PM

--  
谢谢 火鸟, 但貌似这2个差距还是有点大的!~~~~

我是想知道能否将脚本插入到XSL中 以实现树的展开和收缩!~~

--  作者：KELLY5677
--  发布时间：7/30/2007 9:50:00 PM

--  
这么多人看,能给点意见吗？
可以用<xsl:script />标签，但这个好象是用很小的脚本，而且是计算类型的！
我想做出对其他元素属性的调整脚本一直都不能用？
改了命名空间MSXML还是一样不可以~~~~即使是把脚本放到XML，然后用XSL调用也不行。。
请大家帮帮忙啊！~~~~怎么在XSL中套用脚本？谢谢！~~
--  作者：Qr
--  发布时间：7/30/2007 10:05:00 PM

--  
XSL脚本插入方法：
<script language="javascript">
<xsl:comment>
<![CDATA[
JAVASCRIPT CODE HERE
]]>
</xsl:comment>
</script>
--  作者：KELLY5677
--  发布时间：7/31/2007 9:33:00 AM

--  
我试过了 好象还是不行
我的XSL代码如下（XML基本是空的）：

<?xml version="1.0" encoding="GB2312"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fo="http://www.w3.org/1999/XSL/Format">
 <xsl:template match="/">
  <html>
   <head>
    <title/>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
    <title>Div+CSS+JS树型菜单，可刷新</title>
    <style type="text/css">
     <!--
   *{margin:0;padding:0;border:0;}
   
   body { font-size:12px; }
   
   /*定义整个ul菜单的行高和背景色*/
   #nav { width:180px; line-height: 24px; list-style-type: none; text-align:left; }
   
   /*==================一级目录===================*/
   /*Width(一定要)，否则下面的li会变形*/
   #nav a { width: 160px; display: block; padding-left:20px; }
   
   #nav li { background:#CCC; /*一级目录的背景色*/
   border-bottom:#FFF 1px solid; /*下面的一条白边*/
   float:left; /*float：left,本不应该设置，但由于在Firefox不能正常显示
   继承Nav的width,限制宽度，li自动向下延伸*/ }
   
   #nav li a:hover{ background:#CC0000; /*一级目录onMouseOver显示的背景色*/ }
   #nav a:link { color:#666; text-decoration:none; }
   #nav a:visited { color:#666;text-decoration:none; }
   #nav a:hover { color:#FFF;text-decoration:none;font-weight:bold; }
   
   /*==================二级目录===================*/
   #nav li ul { list-style:none; text-align:left; }
   #nav li ul li{ background: #EBEBEB; /*二级目录的背景色*/ }
   #nav li ul a{padding-left:20px;width:160px;
   /* padding-left二级目录中文字向右移动，但Width必须重新设置=(总宽度-padding-left)*/ }
   
   /*下面是二级目录的链接样式*/
   #nav li ul a:link { color:#666; text-decoration:none; }
   #nav li ul a:visited { color:#666;text-decoration:none; }
   #nav li ul a:hover { color:#F3F3F3; text-decoration:none; font-weight:normal;
   background:#CC0000; /* 二级onmouseover的字体颜色、背景色*/ }
   
   /*==============================*/
   #nav li:hover ul { left: auto; }
   #nav li.sfhover ul { left: auto; }
   #content { clear: left; }
   
   /*此节，用来控制菜单是否全部展开，如果注释掉，菜单就全部展开，在调试程序时有用。*/
   #nav ul.collapsed { display: none; }
   
   #PARENT{ width:300px; padding-left:20px; }
   
   -->
    </style>
   </head>
   <body>
    <div id="PARENT">
     <ul id="nav">
      <li>
       <a href="#Menu=ChildMenu1" onclick="DoMenu('ChildMenu1')">分类一</a>
       <ul id="ChildMenu1" class="collapsed">
        <li>
         <a href="http://www.fints.us" target="_blank">栏目1</a>
        </li>
        <li>
         <a href="http://www.fints.us" target="_blank">栏目2</a>
        </li>
        <li>
         <a href="http://www.fints.us" target="_blank">栏目3</a>
        </li>
       </ul>
      </li>
      <li>
       <a href="#Menu=ChildMenu2" onclick="DoMenu('ChildMenu2')">分类二</a>
       <ul id="ChildMenu2" class="collapsed">
        <li>
         <a href="http://www.fints.us" target="_blank">栏目1</a>
        </li>
        <li>
         <a href="#">栏目2</a>
        </li>
        <li>
         <a href="#">栏目3</a>
        </li>
        <li>
         <a href="#">栏目4</a>
        </li>
        <li>
         <a href="#">栏目5</a>
        </li>
       </ul>
      </li>
      <li>
       <a href="#Menu=ChildMenu3" onclick="DoMenu('ChildMenu3')">分类三</a>
       <ul id="ChildMenu3" class="collapsed">
        <li>
         <a href="#">栏目1</a>
        </li>
        <li>
         <a href="http://www.fints.us" target="_blank">栏目2</a>
        </li>
        <li>
         <a href="#">栏目3</a>
        </li>
        <li>
         <a href="#">栏目4</a>
        </li>
       </ul>
      </li>
      <li>
       <a href="#Menu=ChildMenu4" onclick="DoMenu('ChildMenu4')">分类四</a>
       <ul id="ChildMenu4" class="collapsed">
        <li>
         <a href="#">栏目1</a>
        </li>
        <li>
         <a href="http://www.fints.us" target="_blank">栏目2</a>
        </li>
        <li>
         <a href="#">栏目3</a>
        </li>
        <li>
         <a href="#">栏目4</a>
        </li>
       </ul>
      </li>
     </ul>
    </div>
    <script type="text/javascript">
     <xsl:comment><![CDATA[
var LastLeftID = "";
function menuFix() {
var obj = document.getElementById("Nav").getElementsByTagName("li");
for (var i=0; i<obj.length; i++) {
obj[i].onmouseover=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
obj[i].onMouseDown=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
obj[i].onMouseUp=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
obj[i].onmouseout=function() {
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), "");
}
}
}

function DoMenu(emid)
{
var obj = document.getElementById(emid);
obj.className = (obj.className.toLowerCase() == "expanded"?"collapsed":"expanded");
LastLeftID = emid }

function GetMenuID()
{
var MenuID="";
var _paramStr = new String(window.location.href);
var _sharpPos = _paramStr.indexOf("#");
if (_sharpPos >= 0 && _sharpPos < _paramStr.length - 1)
{ _paramStr = _paramStr.substring(_sharpPos + 1, _paramStr.length); }
else { _paramStr = ""; }
if (_paramStr.length > 0)
{ var _paramArr = _paramStr.split("&");
if (_paramArr.length>0)
{ var _paramKeyVal = _paramArr[0].split("=");
if (_paramKeyVal.length>0)
{ MenuID = _paramKeyVal[1]; }
}

}
if(MenuID!="")
{ DoMenu(MenuID) }
}
GetMenuID(); //*这两个function的顺序要注意一下，不然在Firefox里GetMenuID()不起效果
menuFix();]]></xsl:comment>
    </script>
   </body>
  </html>
 </xsl:template>
</xsl:stylesheet>


请麻烦看下什么原因把~~~拜谢

--  作者：火鸟
--  发布时间：7/31/2007 12:48:00 PM

--  
javascript代码要外联在js文件中，否则<>会被转码。
--  作者：KELLY5677
--  发布时间：7/31/2007 4:11:00 PM

--  
哦 , 这样啊? 我试过那样写代码也不会直接显示,但脚本仍然没用!

请问有没有外联脚本这方面的例子?
我还没有实现过~~所以不是很清楚怎样外联(前面也试过,不会..)!
麻烦各位大大帮人帮到底,能给个具体程序不?!
拜谢! Orz....................................

--  作者：火鸟
--  发布时间：7/31/2007 5:48:00 PM

--  
<script language="JavaScript" type="text/javascript" src="ClearForm.js">&amp;nbsp;
</script>
--  作者：火鸟
--  发布时间：7/31/2007 5:51:00 PM

--  
其实我前面给你的例子是xml根据约定利用xslt生成界面很全面的例子，简单类型select, checkbox, radio, input, textarea都有了，你可以好好看看。
--  作者：火鸟
--  发布时间：7/31/2007 5:53:00 PM

--  
而且最后它也外联了一个js文件，我上面的代码就是从其中拷出来的。
--  作者：shiwudao
--  发布时间：7/31/2007 10:08:00 PM

--  
主要有几个地方要修改：
1）需要的话要设置XSLT输出编码gb2312，他缺省是utf-8
2) javascript最好放在<head></head>里面
3) style也用<xsl:comment>来包含
4) "nav"不是"Nav"
5) 对GetMenuID();menuFix();的调用应该放在onload()里调用，以确保HTML元素加载完毕
经过修改，在IE6, FF下测试通过。

测试用XML如下
<?xml version="1.0" encoding="gb2312"?>
<test></test>

修改后的XSLT如下
<?xml version="1.0" encoding="GB2312"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fo="http://www.w3.org/1999/XSL/Format">
<xsl:output method="html" encoding="gb2312"></xsl:output>
<xsl:template match="/">
  <html>
   <head>
    <title/>
    <title>Div+CSS+JS树型菜单，可刷新</title>
    <script type="text/javascript">
     <xsl:comment><![CDATA[
var LastLeftID = "";
function menuFix() {
var obj = document.getElementById("nav").getElementsByTagName("li");
for (var i=0; i<obj.length; i++) {
obj[i].onmouseover=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
obj[i].onMouseDown=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
obj[i].onMouseUp=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
obj[i].onmouseout=function() {
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), "");
}
}
}

function DoMenu(emid)
{
var obj = document.getElementById(emid);
obj.className = (obj.className.toLowerCase() == "expanded"?"collapsed":"expanded");
LastLeftID = emid }

function GetMenuID()
{
var MenuID="";
var _paramStr = new String(window.location.href);
var _sharpPos = _paramStr.indexOf("#");
if (_sharpPos >= 0 && _sharpPos < _paramStr.length - 1)
{ _paramStr = _paramStr.substring(_sharpPos + 1, _paramStr.length); }
else { _paramStr = ""; }
if (_paramStr.length > 0)
{ var _paramArr = _paramStr.split("&");
if (_paramArr.length>0)
{ var _paramKeyVal = _paramArr[0].split("=");
if (_paramKeyVal.length>0)
{ MenuID = _paramKeyVal[1]; }
}

}
if(MenuID!="")
{ DoMenu(MenuID) }
}

function init() {
GetMenuID(); //*这两个function的顺序要注意一下，不然在Firefox里GetMenuID()不起效果
menuFix();
}
]]></xsl:comment>
    </script>
    <style type="text/css">
     <xsl:comment><![CDATA[
   *{margin:0;padding:0;border:0;}
   
   body { font-size:12px; }
   
   /*定义整个ul菜单的行高和背景色*/
   #nav { width:180px; line-height: 24px; list-style-type: none; text-align:left; }
   
   /*==================一级目录===================*/
   /*Width(一定要)，否则下面的li会变形*/
   #nav a { width: 160px; display: block; padding-left:20px; }
   
   #nav li { background:#CCC; /*一级目录的背景色*/
   border-bottom:#FFF 1px solid; /*下面的一条白边*/
   float:left; /*float：left,本不应该设置，但由于在Firefox不能正常显示
   继承Nav的width,限制宽度，li自动向下延伸*/ }
   
   #nav li a:hover{ background:#CC0000; /*一级目录onMouseOver显示的背景色*/ }
   #nav a:link { color:#666; text-decoration:none; }
   #nav a:visited { color:#666;text-decoration:none; }
   #nav a:hover { color:#FFF;text-decoration:none;font-weight:bold; }
   
   /*==================二级目录===================*/
   #nav li ul { list-style:none; text-align:left; }
   #nav li ul li{ background: #EBEBEB; /*二级目录的背景色*/ }
   #nav li ul a{padding-left:20px;width:160px;
   /* padding-left二级目录中文字向右移动，但Width必须重新设置=(总宽度-padding-left)*/ }
   
   /*下面是二级目录的链接样式*/
   #nav li ul a:link { color:#666; text-decoration:none; }
   #nav li ul a:visited { color:#666;text-decoration:none; }
   #nav li ul a:hover { color:#F3F3F3; text-decoration:none; font-weight:normal;
   background:#CC0000; /* 二级onmouseover的字体颜色、背景色*/ }
   
   /*==============================*/
   #nav li:hover ul { left: auto; }
   #nav li.sfhover ul { left: auto; }
   #content { clear: left; }
   
   /*此节，用来控制菜单是否全部展开，如果注释掉，菜单就全部展开，在调试程序时有用。*/
   #nav ul.collapsed { display: none; }
   
   #PARENT{ width:300px; padding-left:20px; }
   ]]>
   </xsl:comment>
    </style>
   </head>
   <body onload="init()">
    <div id="PARENT">
     <ul id="nav">
      <li>
       <a href="#Menu=ChildMenu1" onclick="DoMenu('ChildMenu1')">分类一</a>
       <ul id="ChildMenu1" class="collapsed">
        <li>
         <a href="http://www.fints.us" target="_blank">栏目1</a>
        </li>
        <li>
         <a href="http://www.fints.us" target="_blank">栏目2</a>
        </li>
        <li>
         <a href="http://www.fints.us" target="_blank">栏目3</a>
        </li>
       </ul>
      </li>
      <li>
       <a href="#Menu=ChildMenu2" onclick="DoMenu('ChildMenu2')">分类二</a>
       <ul id="ChildMenu2" class="collapsed">
        <li>
         <a href="http://www.fints.us" target="_blank">栏目1</a>
        </li>
        <li>
         <a href="#">栏目2</a>
        </li>
        <li>
         <a href="#">栏目3</a>
        </li>
        <li>
         <a href="#">栏目4</a>
        </li>
        <li>
         <a href="#">栏目5</a>
        </li>
       </ul>
      </li>
      <li>
       <a href="#Menu=ChildMenu3" onclick="DoMenu('ChildMenu3')">分类三</a>
       <ul id="ChildMenu3" class="collapsed">
        <li>
         <a href="#">栏目1</a>
        </li>
        <li>
         <a href="http://www.fints.us" target="_blank">栏目2</a>
        </li>
        <li>
         <a href="#">栏目3</a>
        </li>
        <li>
         <a href="#">栏目4</a>
        </li>
       </ul>
      </li>
      <li>
       <a href="#Menu=ChildMenu4" onclick="DoMenu('ChildMenu4')">分类四</a>
       <ul id="ChildMenu4" class="collapsed">
        <li>
         <a href="#">栏目1</a>
        </li>
        <li>
         <a href="http://www.fints.us" target="_blank">栏目2</a>
        </li>
        <li>
         <a href="#">栏目3</a>
        </li>
        <li>
         <a href="#">栏目4</a>
        </li>
       </ul>
      </li>
     </ul>
    </div>
    
   </body>
  </html>
</xsl:template>
</xsl:stylesheet>

--  作者：火鸟
--  发布时间：8/1/2007 10:11:00 AM

--  
shiwudao的脚本能工作，真不错。
--  作者：Qr
--  发布时间：8/1/2007 4:25:00 PM

--  
以下是引用shiwudao在2007-7-31 22:08:00的发言：
主要有几个地方要修改：
1）需要的话要设置XSLT输出编码gb2312，他缺省是utf-8
2) javascript最好放在<head></head>里面
3) style也用<xsl:comment>来包含


1、编码一定要一致，这可以免去好多问题
2、是你前次没有得到想要的结果的重要原因之一，XSL和HTML不同，如果不遵守，结果可能就大大的不同了
3、<xsl:comment>是javascript和style必须用的，偶在这个坛子里讲了N次了，包括与<script>、<![CDATA[]]>的次序的问题，可是有人就不信，呜呜，不想再说了。

--  作者：Qr
--  发布时间：8/1/2007 4:31:00 PM

--  
以下是引用火鸟在2007-7-31 12:48:00的发言：
javascript代码要外联在js文件中，否则<>会被转码。


按偶的用法处理就不会出现这个问题。
--  作者：火鸟
--  发布时间：8/1/2007 5:40:00 PM

--  
按偶的用法处理就不会出现这个问题。
=============
是呵。我也是run了shiwudao的帖子才体会到这一点。
--  作者：KELLY5677
--  发布时间：8/2/2007 3:58:00 PM

--  
非常感谢 火鸟 shiwudao  和 Qr的帮忙 ！~~~~

现在又遇到一个问题，怎么提取想同名字的元素中的一个？
它们通过ID进行辨别~~~，用<XSL:IF>怎么进行判断？
<xsl:if select(band [index() = 0])
<xsl:if select(band [index() $eq$ 0])
<xsl:if select(band [value(@id) = 1])
<xsl:if select(band [value(@id) $eq$ 1])
都会提示语法错误~~

这是为什么呢？麻烦解释下

--  作者：KELLY5677
--  发布时间：8/2/2007 4:20:00 PM

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