How to create collapsable expandable menutree from XML using XSL
Question
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
1 answers
solution1
0 ACCPTED 2015-05-03 13:23:23
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.