当前位置：首页 → 问答吧 → 今天改了个tree,不敢独享，给大家看看

今天改了个tree,不敢独享，给大家看看

时间：2005-07-07

来源：互联网

`````````````````tree.htm`````````````````
``````````````````````````````````````````
<SCRIPT event=onload for=window>
  objData = new ActiveXObject("MSXML.DOMDocument");
  objData.async = false;
  objData.load("tree.xml");
  if (objData.parseError.errorCode != 0)
alert(objData.parseError.reason);

  objStyle = new ActiveXObject("MSXML.DOMDocument");
  objStyle.async = false;
  objStyle.load("tree.xsl");
  if (objStyle.parseError.errorCode != 0)
alert(objStyle.parseError.reason);

  document.open("text/html","replace");
  document.write(objData.transformNode(objStyle));
</SCRIPT>

````````````````tree.xml``````````````````
``````````````````````````````````````````
<?xml version="1.0" encoding="GB2312"?>
<?xml-stylesheet type='text/xsl' href='tree.xsl'?>
<TreeView>
      <Tree Text="根节点" Expanded="true">
         <Tree Text="1.1" Expanded="false">
            <Tree Text="1.1.1">
                  <Tree Text="1.1.1.1etettttttttttttttttttttertergsdbf" URL="http://blog.csdn.net/civ3">
                     <Tree target="_blank" URL="http://msdn.microsoft.com" Text="1.1.1.1.1google"/>
                     <Tree Text="1.1.1.1.2"/>
                  </Tree>
                  <Tree Text="1.1.1.1etettttttttttttttttergsdbf">
                     <Tree target="_blank" URL="http://www.google.com" Text="1.1.1.1.1google"/>
                     <Tree Text="1.1.1.1.2"/>
                  </Tree>
                  <Tree Text="宝玉"/>
            </Tree>
            <Tree Text="1.1.2"/>
         </Tree>
         <Tree Text="1.2">
            <Tree Text="1.2.1"/>
            <Tree Text="1.2.2"/>
         </Tree>
      </Tree>
</TreeView>

`````````````````tree.xsl``````````````
```````````````````````````````````````
<?xml version="1.0"  encoding="gb2312"?>
<xsl:stylesheet  xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:template  match="/">
<HTML>
<HEAD>
<script><![CDATA[
var CurrentNode = null;
var iconLeaf = "<img src=\"img/leaf.gif\"/>";//末端（树的叶子）
var iconExpand = "<img src=\"img/expanded.gif\"/>";//展开时
var iconCollapse = "<img src=\"img/collapse.gif\"/>";//折叠时
function Expand(obj){//将obj展开
//确认obj是控制点
if(obj.tagName != 'SPAN' || obj.className!='clsSpace')return false;
//找到子节点集所在层div
var div = obj.parentNode.getElementsByTagName("DIV")[0];
if(div == null)return false;//没找到说明没有子节点了
//展开行动
if(div.className=='shown'){
      obj.innerHTML = iconCollapse;//更换控制点图标
      div.className='hide';//隐藏子节点集层
}
else{
      obj.innerHTML = iconExpand;
      div.className='shown';
}
}
]]>

</script>
<style>
<![CDATA[
BODY{font-size:9pt;}

span{
position:relative;
display:inline;
height:12pt;
}
span.clsSpace{overflow:hidden;}

A{
text-decoration:none;
cursor:default;
}
a.go:hover{
text-decoration:underline;
}
a.loseURL{
color:#888888;
}

.hide{display:none;}
.shown{display:block;margin-left:15px;}
]]>
</style>
<TITLE>tree</TITLE>
</HEAD>
<BODY>
<xsl:apply-templates  select="/TreeView/Tree"/>
</BODY>
</HTML>

</xsl:template>

<xsl:template  match="Tree">
      <div class="clsItem" type="parent">
         <xsl:if test="count(Tree)>0"> 
            <xsl:choose>
                  <xsl:when test="@Expanded"> 
                     <xsl:attribute name="Expanded"><xsl:value-of select="@Expanded"/></xsl:attribute></xsl:when>
                  <xsl:otherwise><xsl:attribute name="Expanded">false</xsl:attribute></xsl:otherwise>
            </xsl:choose>
         </xsl:if>

            
            <span class='clsSpace'>
                  <xsl:choose>
                     
                     <xsl:when test="count(Tree)>0">
                        
                        <xsl:attribute name="onclick">Expand(this)</xsl:attribute>
                        
                        <xsl:choose>
                              
                              <xsl:when test="@Expanded">
                                 <xsl:choose>
                                    <xsl:when test="@Expanded[.='true']"><img src="img/expanded.gif"/></xsl:when>
                                    <xsl:otherwise><img src="img/collapse.gif"/></xsl:otherwise>
                                 </xsl:choose>
                              </xsl:when>
                              
                              <xsl:otherwise><img src="img/collapse.gif"/></xsl:otherwise>
                        </xsl:choose>
                     </xsl:when>
                     
                     <xsl:otherwise><img src="img/leaf.gif"/></xsl:otherwise>
                  </xsl:choose>
            </span>


            
            <span class='clsLabel'>
                  
                  <xsl:attribute name="title"><xsl:value-of select="@Text" /></xsl:attribute>
                  <a>
                     <xsl:choose>
                        <xsl:when test="@URL">
                              <xsl:attribute name="class">go</xsl:attribute>
                              
                              <xsl:choose>
                                 <xsl:when test="@Target"><xsl:attribute name="target"><xsl:value-of select="@Target" /></xsl:attribute></xsl:when>
                                 <xsl:otherwise><xsl:attribute name="target">_blank</xsl:attribute></xsl:otherwise>
                              </xsl:choose>
                              
                              <xsl:attribute name="Href"><xsl:value-of select="@URL"/></xsl:attribute>
                        </xsl:when>
                        <xsl:otherwise>
                              <xsl:attribute name="class">loseURL</xsl:attribute>
                              <xsl:attribute name="onclick">Expand(this.parentNode.previousSibling);return false;</xsl:attribute>
                        </xsl:otherwise>
                     </xsl:choose>
                     
                     <xsl:value-of  select="@Text"/>
                  </a>
            </span>

            
            <xsl:if test="count(Tree)>0">
                  
                  <div>
                     
                     <xsl:choose>
                        <xsl:when test="@Expanded">
                              <xsl:choose>
                                 <xsl:when test="@Expanded[.='true']"><xsl:attribute name="class">shown</xsl:attribute></xsl:when>
                                 <xsl:otherwise><xsl:attribute name="class">hide</xsl:attribute></xsl:otherwise>
                              </xsl:choose>
                        </xsl:when>
                        
                        <xsl:otherwise><xsl:attribute name="class">hide</xsl:attribute></xsl:otherwise>
                     </xsl:choose>

                     
                     <xsl:apply-templates select="Tree"></xsl:apply-templates>
                  </div>
            </xsl:if>
      </div>
</xsl:template>
</xsl:stylesheet>

``````````````````````````````````````````````````````````
``````````````````````````````````````````````````````````
``````````````````````````````````````````````````````````
借鉴了msdn的deeptree以及宝玉的一个成品，另外加了很多注释。

作者: civ3 发布时间: 2005-07-07

好样的，顶你

作者: vfphome 发布时间: 2005-07-08

有演示就好了~~

作者: 呆呆虫发布时间: 2005-07-14

谢谢! 学习!

作者: hnwxg 发布时间: 2005-07-23

HTC 做数据绑定
可以适当用XSL做一些XML的转换
用XSL我认为是因为速度
我比较注重效果所以我用HTC做每个控件的数据绑定，但经测试较XSL和JS要慢一些
不过速度是可以接受的

作者: tester_test 发布时间: 2005-07-25