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

2007/01/12 14:28 2007/01/12 14:28
Tags:

Trackback Address :: http://www.blackball.pe.kr/trackback/3

Comment on this post!

[로그인][오픈아이디란?]
오픈아이디로만 댓글을 남길 수 있습니다