XSL 에서 데이터를 정렬(Sort)하여 보여주기!
1. 소트 명령 형식
아래의 경우 price(가격)기준으로 오름차순으로 정렬합니다.
내림차순으로 정렬하려면 -price 로 입력하세요...
<xsl:for-each select="card/stock" order-by="price">
2. x13sort.xml 소스
<?xml version="1.0" encoding="euc-kr"?>
<?xml-stylesheet type="text/xsl" href="x13sort.xsl"?>
<card>
<stock exchange="bad">
<name>고추</name>
<symbol>매워</symbol>
<price>13.50</price>
</stock>
<stock exchange="good">
<name>감자</name>
<symbol>조아</symbol>
<price>30.35</price>
</stock>
<stock exchange="good">
<name>마늘</name>
<symbol>냄새</symbol>
<price>21.85</price>
</stock>
<stock exchange="good">
<name>파</name>
<symbol>빛깔</symbol>
<price>17.20</price>
</stock>
<stock exchange="good">
<name>무우</name>
<symbol>외모</symbol>
<price>23.30</price>
</stock>
</card>
3. x13sort.xsl 소스
<?xml version="1.0" encoding="euc-kr"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
<HTML>
<BODY>
<font color="red">
1. 가격순으로보이기(오름차순) order-by="price" <br/>
</font>
<TABLE BORDER="2" width="50%">
<colgroup>
<col width="30%"></col>
<col width="30%"></col>
<col width="40%" bgcolor="yellow"></col>
</colgroup>
<TR bgcolor="#eeeeee">
<TH>주 의</TH>
<TH>제 품</TH>
<TH>가 격</TH>
</TR>
<xsl:for-each select="card/stock" order-by="price">
<TR>
<TD><xsl:value-of select="symbol"/></TD>
<TD><xsl:value-of select="name"/></TD>
<TD><xsl:value-of select="price"/></TD>
</TR>
</xsl:for-each>
</TABLE><br/><br/>
<font color="red">
2. 가격순으로보이기(내림차순) order-by="-price" <br/>
</font>
<TABLE BORDER="2" width="50%">
<colgroup>
<col width="30%"></col>
<col width="30%"></col>
<col width="40%" bgcolor="yellow"></col>
</colgroup>
<TR bgcolor="#eeeeee">
<TH>주 의</TH>
<TH>제 품</TH>
<TH>가 격</TH>
</TR>
<xsl:for-each select="card/stock" order-by="-price">
<TR>
<TD><xsl:value-of select="symbol"/></TD>
<TD><xsl:value-of select="name"/></TD>
<TD><xsl:value-of select="price"/></TD>
</TR>
</xsl:for-each>
</TABLE><br/><br/>
<font color="red">
3. 제품순으로보이기(오름차순) order-by="name" <br/>
</font>
<TABLE BORDER="2" width="50%">
<colgroup>
<col width="30%"></col>
<col width="30%" bgcolor="yellow"></col>
<col width="40%"></col>
</colgroup>
<TR bgcolor="#eeeeee">
<TH>주 의</TH>
<TH>제 품</TH>
<TH>가 격</TH>
</TR>
<xsl:for-each select="card/stock" order-by="name">
<TR>
<TD><xsl:value-of select="symbol"/></TD>
<TD><xsl:value-of select="name"/></TD>
<TD><xsl:value-of select="price"/></TD>
</TR>
</xsl:for-each>
</TABLE><br/><br/>
<font color="red">
4. 제품순으로보이기(내림차순) order-by="-name" <br/>
</font>
<TABLE BORDER="2" width="50%">
<colgroup>
<col width="30%"></col>
<col width="30%" bgcolor="yellow"></col>
<col width="40%"></col>
</colgroup>
<TR bgcolor="#eeeeee">
<TH>주 의</TH>
<TH>제 품</TH>
<TH>가 격</TH>
</TR>
<xsl:for-each select="card/stock" order-by="-name">
<TR>
<TD><xsl:value-of select="symbol"/></TD>
<TD><xsl:value-of select="name"/></TD>
<TD><xsl:value-of select="price"/></TD>
</TR>
</xsl:for-each>
</TABLE><br/><br/>
</BODY>
</HTML>
</xsl:template>
</xsl:stylesheet>
실행결과 :
1. 가격순으로보이기(오름차순) order-by="price"
주 의 제 품 가 격
매워 고추 13.50
빛깔 파 17.20
냄새 마늘 21.85
외모 무우 23.30
조아 감자 30.35
2. 가격순으로보이기(내림차순) order-by="-price"
주 의 제 품 가 격
조아 감자 30.35
외모 무우 23.30
냄새 마늘 21.85
빛깔 파 17.20
매워 고추 13.50
3. 제품순으로보이기(오름차순) order-by="name"
주 의 제 품 가 격
조아 감자 30.35
매워 고추 13.50
냄새 마늘 21.85
외모 무우 23.30
빛깔 파 17.20
4. 제품순으로보이기(내림차순) order-by="-name"
주 의 제 품 가 격
빛깔 파 17.20
외모 무우 23.30
냄새 마늘 21.85
매워 고추 13.50
조아 감자 30.35
***************예제2*****************************
XSL - 마우스로 메뉴클릭시 "소트"하여 보이기
JavaScript
JavaScript - Sort
function sort(key) {
mm="*/xsl:template[@match="menu"]//xsl:apply-templates/@order-by"
var s = document.XSLDocument.selectNodes(mm);
for (var i = s.nextNode(); i != null; i = s.nextNode())
{
i.value = key;
}
var d = document.XMLDocument.selectSingleNode("story/menu");
menu.innerHTML = d.transformNode(document.XSLDocument);
}
XML 문서의 소스입니다.
x17sortdisp.xml
<?xml version="1.0" encoding="euc-kr"?>
<?xml:stylesheet type="text/xsl" href="x17sortdisp.xsl"?>
<book>
<menu>
<card>
<name>엉터리 국밥</name>
<price>900 원</price>
</card>
<card>
<name>멀건 국수</name>
<price>200 원</price>
</card>
<card>
<name>형편없는 라면</name>
<price>100 원</price>
</card>
<card>
<name>넘질긴 냉면</name>
<price>300 원</price>
</card>
<card>
<name>냄새만 갈비탕 </name>
<price>700 원</price>
</card>
<card>
<name>허연 짜장밥 </name>
<price>600 원</price>
</card>
</menu>
</book>
XSL 문서의 소스입니다.
x17sortdisp.xsl
<?xml version="1.0" encoding="euc-kr"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl" >
<xsl:template>
<xsl:apply-templates/>
</xsl:template>
<xsl:template match="text()">
<xsl:value-of/>
</xsl:template>
<xsl:template match="/">
<HTML>
<HEAD>
<TITLE>XSL-DOM Sort</TITLE>
<STYLE>
.my { color: blueviolet; font-family: Times, serif;
background:bisque;vertical-align: top;}
</STYLE>
<SCRIPT language="JavaScript"><xsl:comment><![CDATA[
function sort(key)
{
mm="*/xsl:template[@match="menu"]//xsl:apply-templates/@order-by"
var s = document.XSLDocument.selectNodes(mm);
for (var i = s.nextNode(); i != null; i = s.nextNode()) {
i.value = key;
}
var d = document.XMLDocument.selectSingleNode("book/menu");
menu.innerHTML = d.transformNode(document.XSLDocument);
}
]]></xsl:comment></SCRIPT>
</HEAD>
<BODY>
<TABLE WIDTH="400" CELLSPACING="8">
<TR>
<TD>
<DIV id="menu">
<xsl:apply-templates select="book/menu"/>
</DIV>
<P>
<A href="javascript:sort("price")"> Price Order </A><br/>
<A href="javascript:sort("-price")"> -Price Order </A><br/>
<A href="javascript:sort("name")"> Name Order </A><br/>
<A href="javascript:sort("-name")"> -Name Order </A>
</P>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
</xsl:template>
<xsl:template match="menu">
<TABLE CELLSPACING="3">
<xsl:apply-templates select="card" order-by="name"/>
</TABLE>
</xsl:template>
<xsl:template match="card">
<TR>
<TD class="my" width="200">
<xsl:value-of select="name"/>
</TD>
<TD class="my" VALIGN="bottom" width="100">
<xsl:value-of select="price"/>
</TD>
</TR>
</xsl:template>
</xsl:stylesheet>
실행결과 :
냄새만 갈비탕 700 원
넘질긴 냉면 300 원
멀건 국수 200 원
엉터리 국밥 900 원
허연 짜장밥 600 원
형편없는 라면 100 원
Price Order -Price Order Name Order -Name Order
Comment on this post!