程序博客网 > 类似突袭的电影 知乎

做一个用XML、XSL以及JS代码生成的树结构

来源：互联网 发布：类似突袭的电影 知乎 编辑：程序博客网 时间：2024/06/08 07:02

      有许多朋友对需要一个用XML数据配合XSL样式表做一个树型机构，但网上一直没有一个完整的DEMO，为了解决这个问题，我花费了几天的时间给大家做了一个，在这里和大家一起分享。

     1、效果图如下：

       

    2、XML数据格式如下：

     

      <?xml version="1.0" encoding="utf-8" ?>
<table>
  <person>
    <id>1</id>
    <name>人物</name>
    <parent>0</parent>
    <Layer>0</Layer>
    <Childs>2</Childs>
    <TreeLine>0</TreeLine>
    <Image>../TreeImg/openFolder.gif</Image>
    <Url>#</Url>
  </person>
  <person>
    <id>2</id>
    <name>武将</name>
    <parent>1</parent>
    <Layer>1</Layer>
    <Childs>3</Childs>
    <TreeLine>0</TreeLine>
    <Image>../TreeImg/openFolder.gif</Image>
    <Url>#</Url>
  </person>
  <person>
    <id>3</id>
    <name>文臣</name>
    <parent>1</parent>
    <Layer>1</Layer>
    <Childs>3</Childs>
    <TreeLine>0</TreeLine>
    <Image>../TreeImg/openFolder.gif</Image>
    <Url>#</Url>
  </person>
  <person>
    <id>4</id>
    <name>魏延</name>
    <parent>2</parent>
    <Layer>2</Layer>
    <Childs>0</Childs>
    <TreeLine>0</TreeLine>
    <Image>../TreeImg/file1.gif</Image>
    <Url>#</Url>
  </person>
  <person>
    <id>5</id>
    <name>赵云</name>
    <parent>2</parent>
    <Layer>2</Layer>
    <Childs>2</Childs>
    <TreeLine>0</TreeLine>
    <Image>../TreeImg/openFolder.gif</Image>
    <Url>#</Url>
  </person>
  <person>
    <id>6</id>
    <name>何平</name>
    <parent>2</parent>
    <Layer>2</Layer>
    <Childs>0</Childs>
    <TreeLine>1</TreeLine>
    <Image>../TreeImg/file2.gif</Image>
    <Url>#</Url>
  </person>
  <person>
    <id>7</id>
    <name>荀域</name>
    <parent>3</parent>
    <Layer>2</Layer>
    <Childs>0</Childs>
    <TreeLine>0</TreeLine>
    <Image>../TreeImg/file2.gif</Image>
    <Url>#</Url>
  </person>
  <person>
    <id>8</id>
    <name>荀攸</name>
    <parent>3</parent>
    <Layer>2</Layer>
    <Childs>0</Childs>
    <TreeLine>0</TreeLine>
    <Image>../TreeImg/file2.gif</Image>
    <Url>#</Url>
  </person>
  <person>
    <id>9</id>
    <name>鲁肃</name>
    <parent>3</parent>
    <Layer>2</Layer>
    <Childs>0</Childs>
    <TreeLine>1</TreeLine>
    <Image>../TreeImg/file2.gif</Image>
    <Url>#</Url>
  </person>
  <person>
    <id>10</id>
    <name>赵统</name>
    <parent>5</parent>
    <Layer>3</Layer>
    <Childs>0</Childs>
    <TreeLine>0</TreeLine>
    <Image>../TreeImg/file2.gif</Image>
    <Url>#</Url>
  </person>
  <person>
    <id>11</id>
    <name>赵广</name>
    <parent>5</parent>
    <Layer>3</Layer>
    <Childs>0</Childs>
    <TreeLine>1</TreeLine>
    <Image>../TreeImg/file2.gif</Image>
    <Url>#</Url>
  </person>
  <person>
    <id>13</id>
    <name>狗</name>
    <parent>12</parent>
    <Layer>1</Layer>
    <Childs>0</Childs>
    <TreeLine>0</TreeLine>
    <Image>../TreeImg/file2.gif</Image>
    <Url>#</Url>
  </person>
  <person>
    <id>14</id>
    <name>猫</name>
    <parent>12</parent>
    <Layer>1</Layer>
    <Childs>0</Childs>
    <TreeLine>1</TreeLine>
    <Image>../TreeImg/file2.gif</Image>
    <Url>#</Url>
  </person>
  <person>
    <id>12</id>
    <name>动物</name>
    <parent>0</parent>
    <Layer>0</Layer>
    <Childs>2</Childs>
    <TreeLine>0</TreeLine>
    <Image>../TreeImg/openFolder.gif</Image>
    <Url>#</Url>
  </person>
  <person>
    <id>15</id>
    <name>植物</name>
    <parent>0</parent>
    <Layer>0</Layer>
    <Childs>0</Childs>
    <TreeLine>1</TreeLine>
    <Image>../TreeImg/file2.gif</Image>
    <Url>#</Url>
  </person>
</table>

 

3、XSL样式表如下

    <?xml version="1.0" encoding="gb2312"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:template match="table">
    <TABLE cellspacing="0" cellpadding="1" style="vertical-align:top;">
      <TR>
        <TD STYLE="cursor:hand">
          <xsl:apply-templates select="//person[parent=0]"/>
        </TD>
      </TR>
    </TABLE>
  </xsl:template>
 
  <xsl:template match="//person">
    <xsl:param name="id" select="id"/>
    <div id="{$id}">
      <xsl:attribute name="Class">
        Navigator
      </xsl:attribute>
      <xsl:attribute name="ParentId">
        <xsl:value-of select="parent"/>
      </xsl:attribute>
      <xsl:attribute name="Depth">
        <xsl:value-of select="Layer"/>
      </xsl:attribute>
      <xsl:if test="Childs[.>0]">
        <xsl:attribute name="Expanded">yes</xsl:attribute>
      </xsl:if>

      <xsl:if test="Layer=1">
        <IMG src="../TreeImg/t_Line.png"></IMG>
      </xsl:if>
      <xsl:if test="Layer=2">
        <IMG src="../TreeImg/t_Line.png"></IMG>
        <IMG src="../TreeImg/t_Line.png"></IMG>
      </xsl:if>
      <xsl:if test="Layer=3">
        <IMG src="../TreeImg/t_Line.png"></IMG>
        <IMG src="../TreeImg/t_Line.png"></IMG>
        <IMG src="../TreeImg/t_Line.png"></IMG>
      </xsl:if>
      <xsl:if test="Layer=4">
        <IMG src="../TreeImg/t_Line.png"></IMG>
        <IMG src="../TreeImg/t_Line.png"></IMG>
        <IMG src="../TreeImg/t_Line.png"></IMG>
        <IMG src="../TreeImg/t_Line.png"></IMG>
      </xsl:if>
      <xsl:if test="Layer=5">
        <IMG src="../TreeImg/t_Line.png"></IMG>
        <IMG src="../TreeImg/t_Line.png"></IMG>
        <IMG src="../TreeImg/t_Line.png"></IMG>
        <IMG src="../TreeImg/t_Line.png"></IMG>
        <IMG src="../TreeImg/t_Line.png"></IMG>
      </xsl:if>
      <xsl:choose>
        <xsl:when test="count(//person[parent=$id]) &gt; 0">
          <img id="img1{$id}" src="../TreeImg/t_Minus.png">
            <xsl:attribute name="onclick">
              toggle('<xsl:value-of select="id" />','<xsl:value-of select="Layer" />')
            </xsl:attribute>
          </img>
          <img id="img2{$id}" src="../TreeImg/openFolder.gif">
            <xsl:attribute name="onclick">
              toggle('<xsl:value-of select="id" />','<xsl:value-of select="Layer" />')
            </xsl:attribute>
          </img>
        </xsl:when>
        <xsl:otherwise>
          <xsl:choose>
            <xsl:when test="TreeLine[.>0]">
              <img src="../TreeImg/l_Leaf.png"></img>
            </xsl:when>
            <xsl:otherwise>
              <img src="../TreeImg/t_Leaf.png"></img>
            </xsl:otherwise>
          </xsl:choose>
          <img>
            <xsl:attribute name="src">
              <xsl:value-of select="Image" />
            </xsl:attribute>
          </img>
        </xsl:otherwise>
      </xsl:choose>
      <A>
        <xsl:attribute name="onclick">
          openwin('<xsl:value-of select="Url" />','<xsl:value-of select="@name" />')
        </xsl:attribute>
        <xsl:value-of select="name"/>
      </A>
    </div>
   
    <div id="s{$id}">
      <xsl:apply-templates select="//person[parent=$id]"/>
    </div>
  </xsl:template>
</xsl:stylesheet>
   3、JS代码如下：

     // 鼠标点击树进行展开和折叠
function toggle(id,dep)
{
    var thisRow = document.all.item(id);
    if (thisRow)
    {
        var i = parseInt(dep)*2;
        var d = parseInt(i) + parseInt("1");
       
        if (thisRow.getAttribute("Expanded") == "yes")
        {
           
            thisRow.setAttribute("Expanded", "no");
            thisRow.children(parseInt(i)).src = "../TreeImg/t_plus.png";
            thisRow.children(parseInt(d)).src = "../TreeImg/closeFolder.gif";
            var allRows = document.all.tags("div");
            for (var i=1; i < allRows.length; i++)
            {
                var row = allRows[i];
                if (row.getAttribute("ParentId") == id)
                {  
                    if (row.getAttribute("Expanded") == "yes")
                    {  
                        toggle(row.getAttribute("id"),row.getAttribute("Depth"));
                    }
                    row.className = "Navigator-Hidden";
                }
            }
            thisRow.className = "Navigator";
        }
        else
        {
            thisRow.setAttribute("Expanded", "yes");
            thisRow.children(parseInt(i)).src = "../TreeImg/t_Minus.png";
            thisRow.children(parseInt(d)).src = "../TreeImg/openFolder.gif";
            var allRows = document.all.tags("div");
            var depth = parseInt(thisRow.getAttribute("Depth"));
            for (var i=1; i < allRows.length; i++)
            {
                var row = allRows[i];
                if (row.getAttribute("ParentId") == id && parseInt(row.getAttribute("Depth")) == depth + 1 )
                {
                    row.className = "Navigator";
                }
            }
        }
    }
}

 

4、用到的样式如下

<style type="text/css">
/*树形控件用到*/
DIV IMG
{
 MARGIN-BOTTOM: 0px;
 MARGIN-RIGHT: 1px;
 MARGIN-TOP: -4px;
 VERTICAL-ALIGN: middle
}
DIV A:hover
{
 BACKGROUND-COLOR: greenyellow
}
.Navigator
{
 color: #003366;
}
.Navigator-Hidden
{
 display:none;
}
</style>

 

5、DEMO代码如下

function window.onload()
{
 // 主数据区 XmlSysModule.aspx
    //var sXMLFile = "XmlFile/OAFILE.xml";
 //var sXSLTFile = "XslFile/XslTreeMenu.xsl";
 
 var sXMLFile = "XslFile/XMLFile1.xml";
 var sXSLTFile = "XslFile/XSLTFile1.xslt";
 
    GetHTML(sXMLFile,sXSLTFile,"oHtmlLeft");
}
function openwin(URL,mytitle)
{
 window.open(URL,"ifMain","");
 parent.document.title=mytitle;
}
//-->
</script>
</head>

<body style="background-color:#E2E9FF;">
    <div id="oHtmlLeft" style="padding-left:2px; padding-top:5px;"></div>
</body>
</html>

 

6、需要源程序的朋友请留言

类似突袭的电影 知乎 类似突袭的电影 知乎
原创粉丝点击
热门IT博客
visio网络拓扑图visio网络拓扑图
玛卡淘宝玛卡淘宝
物流配货软件
mac装win10蓝屏
c语言编程是什么意思
统计学数据分析论文
socket编程作用
电子地图软件开发
windows.old删除不干净
周杰伦唱功知乎
域名绑定本地服务器
管道下料放样计算软件
免费代理服务器软件
手机绘画软件推荐
温故知今txt下载
js数组删除指定的元素
中国喜剧明星排名 知乎
sql delete table
网络机顶盒安装软件
Python与ipython
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 企业倒闭了债务怎么办 有限公司破产债务怎么办 公司破产贷款怎么办 企业破产员工怎么办 脖子过敏痒怎么办 静载不合格怎么办 cfg桩静载不合格怎么办 电脑噪声大怎么办 中央空调噪音大怎么办 电脑耳机噪声大怎么办 车间湿度过高怎么办 机房湿度大怎么办 机房过干燥怎么办 机房湿度低怎么办 甲状腺t4偏高怎么办 甲状腺素偏高怎么办 甲状腺t4偏低怎么办 甲状腺t4低怎么办 甲状腺激素偏低怎么办 t4偏低怎么办 甲状腺t3t4偏高怎么办 老年人脑积水怎么办 无internet访问怎么办 无internet怎么办 面包车烧机油怎么办 汽车热车烧机油怎么办 奥迪烧机油怎么办 记忆力差该怎么办 皮肤很差很显老怎么办 脸上皮肤很差怎么办 皮肤超级差怎么办 皮肤越来越粗糙怎么办 谷歌打不开网页怎么办 谷歌不能用怎么办 app闪退怎么办 迅雷闪退怎么办 电脑内存过高怎么办 电脑蓝屏怎么办恢复 重装系统时蓝屏怎么办 重装系统后蓝屏怎么办 房价越来越高怎么办

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里