如何使用 XSL 从 XML 创建可折叠的可扩展菜单树 [英] How to create collapsable expandable menutree from XML using XSL

问题描述

我有一个xml文件是这样的

<COUNTRY COUNTRYID="印度"><STATE STATEID="ANDHRAPRADESH"><CITY>海得拉巴</CITY><CITY>VIZAG</CITY><CITY>KURNOOL</CITY></STATE><STATE STATEID="泰米尔纳德邦"><CITY>钦奈</CITY><CITY>COIMBATORE</CITY><CITY>SALEM</CITY></STATE><STATE STATEID="卡纳塔克邦"><CITY>班加罗尔</CITY><CITY>迈索尔</CITY><CITY>BALLARI</CITY></STATE></国家><COUNTRY COUNTRYID="澳大利亚"><STATE STATEID="新南威尔士州"><CITY>珀斯</CITY><CITY>BRIABANE</CITY><CITY>霍巴特</CITY></STATE></国家></世界>

我想使用带有加号和减号的 xsl 和 javascript(如有必要)显示可展开/折叠的树结构；

<代码>>世界 ||>印度>|>|>安德拉邦>|>|>海得拉巴>维萨格>库努尔>卡纳塔克邦>|>|>班加罗尔>巴拉里>澳大利亚>|>|>新南威尔士>|>|>珀斯>布里亚班

是否可以简单地使用 XSL 以及一些 javascript 或纯 CSS?

我有这个问题的一般形式，尽管我确实捏住了上面显示的示例 XML 来自

从本质上讲，我非常想得到一些像 this 一样酷的东西，但只是使用XSL(必要时还有一点 javascript)来转换我的 XML 文档.有什么想法吗?

注意:我对 XSL 或 javascript 的经验很少，我确实会使用 python，所以如果有 python 库或解决方案，请告诉我

解决方案

假设您想在此处提供的链接中使用该代码，这是一个示例样式表，它创建了嵌套的无序列 ul 列表结构并简单地重用您链接到的示例中的 Javascript 和 CSS 代码和图像，在实际情况下，您可能希望复制图像并将它们放在您的服务器上:

<xsl:output method="html" version="5.0" indent="yes" doctype-system="about:legacy-compat"/><xsl:template match="/"><头><title>列表测试</title><风格>/************************//* 可扩展列表 *//************************/#listContainer{边距顶部:15px;}#expList ul, li {列表样式:无；保证金:0;填充:0;光标:指针；}#expList p {保证金:0;显示:块；}#expList p:悬停{背景色:#121212;}#expList li {行高:140%；文本缩进:0px;背景位置:1px 8px；padding-left: 20px;背景重复:不重复；}/* 列表元素的折叠状态 */#expList .collapsed {背景图片:网址(http://jasalguero.com/demos/expandableList/img/collapsed.png)；}/* 列表元素的展开状态/* 注意:这个类必须位于折叠的下面 */#expList .expanded {背景图片:网址(http://jasalguero.com/demos/expandableList/img/expanded.png)；}#expList {清楚:两者；}.listControl{底边距:15px；}.listControl a {边框:1px 实心 #555555；颜色:#555555；光标:指针；高度:1.5em；行高:1.5em；右边距:5px；填充:4px 10px；}.listControl a:悬停{背景色:#555555；颜色:#222222；字体粗细:正常；}</风格><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><脚本>/******************************************************************//* 准备 cv 以动态展开/折叠 *//******************************************************************/函数准备列表(){$('#expList').find('li:has(ul)').click(函数(事件){如果(这个== event.target){$(this).toggleClass('expanded');$(this).children('ul').toggle('medium');}返回假；}).addClass('折叠').children('ul').hide();//创建按钮功能$('#expandList').unbind('点击')点击(功能(){$('.collapsed').addClass('expanded');$('.collapsed').children().show('medium');})$('#collapseList').unbind('点击')点击(功能(){$('.collapsed').removeClass('expanded');$('.collapsed').children().hide('medium');})};/******************************************************************//* 加载文档时执行的函数 *//******************************************************************/$(document).ready(function() {准备列表()});<身体><xsl:apply-templates/></html></xsl:模板><xsl:template match="WORLD"><div id="listContainer"><div class="listControl"><a id="expandList">全部展开</a><a id="collapseList">全部折叠</a>

<ul id="expList"><li>世界<xsl:apply-templates/>

</xsl:模板><xsl:template match="COUNTRY"><ul><li><xsl:value-of select="@COUNTRYID"/><xsl:apply-templates/></xsl:模板><xsl:template match="STATE"><ul><li><xsl:value-of select="@COUNTRYID | @STATEID"/><ul><xsl:apply-templates/></xsl:模板><xsl:template match="CITY"><li><xsl:apply-templates/></xsl:模板></xsl:stylesheet>

XML 文档然后简单地引用上面的 XSLT

I have an xml file is like this

<WORLD>
<COUNTRY COUNTRYID="INDIA">
<STATE STATEID="ANDHRAPRADESH">
<CITY>HYDERABAD</CITY>
<CITY>VIZAG</CITY>
<CITY>KURNOOL</CITY>
</STATE>
<STATE STATEID="TAMILNADU">
<CITY>CHENNAI</CITY>
<CITY>COIMBATORE</CITY>
<CITY>SALEM</CITY>
</STATE>
<STATE STATEID="KARNATAKA">
<CITY>BANGALORE</CITY>
<CITY>MYSORE</CITY>
<CITY>BALLARI</CITY>
</STATE>
</COUNTRY>
<COUNTRY COUNTRYID="AUSTRALIA">
<STATE STATEID="NEW SOUTH WALES">
<CITY>PERTH</CITY>
<CITY>BRIABANE</CITY>
<CITY>HOBART</CITY>
</STATE>
</COUNTRY>
</WORLD>

i want to display expandable/collapse tree structure using xsl and javascript(if necessary) with plus and minus signs;

> WORLD  |  |
>     INDIA
>           |
>           |
>            ANDHRAPRADESH
>                      |
>                      |
>                   HYDERABAD
>                   VIZAG
>                   KURNOOL
>            KARNATAKA
>                      |
>                      |
>                   BANGALORE
>                   BALLARI   
>             AUSTRALIA  
>                |
>                |
>             NEW SOUTH WALES
>                    |
>                    |
>                    PERTH
>                    BRIABANE

Is it possible simply with XSL and maybe some javascript or pure CSS?

I have a general form of this problem, though I did pinch the sample XML shown above from

Essentially I would very much like to end up with something as cool as this, but just using XSL (and a little javascript if necessary) to transform my XML document. Any ideas?

Note:I have precious little experience with XSL or javascript, I do use python a bit so if there's a python library or solution please let me know

解决方案

Assuming you want to use that code in the link you gave here is an example stylesheet that creates the nested, unordered ul list structure and simply reuses the Javascript and CSS code and images from the sample you linked to, in the real case you might want to copy the images and put them on your server:

<xsl:stylesheet
  version="1.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:output method="html" version="5.0" indent="yes" doctype-system="about:legacy-compat"/>

<xsl:template match="/">
  <html>
    <head>
      <title>list test</title>
      <style>
/********************/
/* EXPANDABLE LIST  */
/********************/
#listContainer{
  margin-top:15px;
}

#expList ul, li {
    list-style: none;
    margin:0;
    padding:0;
    cursor: pointer;
}
#expList p {
    margin:0;
    display:block;
}
#expList p:hover {
    background-color:#121212;
}
#expList li {
    line-height:140%;
    text-indent:0px;
    background-position: 1px 8px;
    padding-left: 20px;
    background-repeat: no-repeat;
}

/* Collapsed state for list element */
#expList .collapsed {
    background-image: url(http://jasalguero.com/demos/expandableList/img/collapsed.png);
}
/* Expanded state for list element
/* NOTE: This class must be located UNDER the collapsed one */
#expList .expanded {
    background-image: url(http://jasalguero.com/demos/expandableList/img/expanded.png);
}
#expList {
    clear: both;
}

.listControl{
  margin-bottom: 15px;
}
.listControl a {
    border: 1px solid #555555;
    color: #555555;
    cursor: pointer;
    height: 1.5em;
    line-height: 1.5em;
    margin-right: 5px;
    padding: 4px 10px;
}
.listControl a:hover {
    background-color:#555555;
    color:#222222; 
    font-weight:normal;
}      
      </style>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
      <script>
/**************************************************************/
/* Prepares the cv to be dynamically expandable/collapsible   */
/**************************************************************/
function prepareList() {
    $('#expList').find('li:has(ul)')
    .click( function(event) {
        if (this == event.target) {
            $(this).toggleClass('expanded');
            $(this).children('ul').toggle('medium');
        }
        return false;
    })
    .addClass('collapsed')
    .children('ul').hide();

    //Create the button funtionality
    $('#expandList')
    .unbind('click')
    .click( function() {
        $('.collapsed').addClass('expanded');
        $('.collapsed').children().show('medium');
    })
    $('#collapseList')
    .unbind('click')
    .click( function() {
        $('.collapsed').removeClass('expanded');
        $('.collapsed').children().hide('medium');
    })

};


/**************************************************************/
/* Functions to execute on loading the document               */
/**************************************************************/
$(document).ready( function() {
    prepareList()
});      
      </script>
    </head>
    <body>
      <xsl:apply-templates/>
    </body>
  </html>
</xsl:template>

<xsl:template match="WORLD">
        <div id="listContainer">
            <div class="listControl">
                <a id="expandList">Expand All</a>
                <a id="collapseList">Collapse All</a>
            </div>
            <ul id="expList">
              <li>World
                 <xsl:apply-templates/>
              </li>
            </ul>
         </div>
</xsl:template>

<xsl:template match="COUNTRY">
  <ul>
    <li><xsl:value-of select="@COUNTRYID"/>
      <xsl:apply-templates/>
    </li>
  </ul>
</xsl:template>

<xsl:template match="STATE">
  <ul>
    <li><xsl:value-of select="@COUNTRYID | @STATEID"/>
      <ul>
        <xsl:apply-templates/>
      </ul>
    </li>
  </ul>
</xsl:template>

<xsl:template match="CITY">
  <li>
    <xsl:apply-templates/>
  </li>
</xsl:template>

</xsl:stylesheet>

The XML document then simply refers to above XSLT with

<?xml-stylesheet type="text/xsl" href="sheet1.xsl"?>
<WORLD>
<COUNTRY COUNTRYID="INDIA">
<STATE STATEID="ANDHRAPRADESH">
<CITY>HYDERABAD</CITY>
<CITY>VIZAG</CITY>
<CITY>KURNOOL</CITY>
</STATE>
<STATE STATEID="TAMILNADU">
<CITY>CHENNAI</CITY>
<CITY>COIMBATORE</CITY>
<CITY>SALEM</CITY>
</STATE>
<STATE STATEID="KARNATAKA">
<CITY>BANGALORE</CITY>
<CITY>MYSORE</CITY>
<CITY>BALLARI</CITY>
</STATE>
</COUNTRY>
<COUNTRY COUNTRYID="AUSTRALIA">
<STATE STATEID="NEW SOUTH WALES">
<CITY>PERTH</CITY>
<CITY>BRIABANE</CITY>
<CITY>HOBART</CITY>
</STATE>
</COUNTRY>
</WORLD>

这篇关于如何使用 XSL 从 XML 创建可折叠的可扩展菜单树的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！