XML structure to Tree View


/ Published in: XSLT
Save to your folder(s)

a perfect tree representation of a XML structure (with i, l and t and empty node images)


Copy this code and paste it in your HTML
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <xsl:stylesheet exclude-result-prefixes="xsl xsi html xsd" version="1.0" xmlns="http://www.w3.org/1999/xhtml" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  3. <xsl:output encoding="UTF-8" indent="no" method="xml" omit-xml-declaration="yes"/>
  4. <xsl:strip-space elements="*"/>
  5.  
  6. <xsl:param name="id" />
  7.  
  8. <xsl:template match="/">
  9. <xsl:apply-templates select="//navigation[@id=$id]" />
  10. </xsl:template>
  11.  
  12. <xsl:template match="navigation">
  13. <h1>Edit <xsl:value-of select="name" /> (<xsl:value-of select="language" />)</h1><br />
  14. <table class="table" id="links">
  15. <tr>
  16. <th>Link</th>
  17. <th>&#160;</th>
  18. <th>URL</th>
  19. <th>Title</th>
  20. <th>Active</th>
  21. <th>Actions</th>
  22. </tr>
  23. </thead>
  24. <tr class="level0">
  25. <td colspan="6"><i class="icon-home"><xsl:text> </xsl:text></i></td>
  26. </tr>
  27. <xsl:apply-templates select="links" />
  28. <tr><td colspan="6"><a data-navigation="{$id}" class="add-link btn btn-success btn-small" href="#add-link"><i class="icon-plus"><xsl:text> </xsl:text></i> Append a Link</a></td></tr>
  29. </tbody>
  30. </table>
  31. </xsl:template>
  32.  
  33. <xsl:template match="link">
  34. <xsl:variable name="chain" select="ancestor-or-self::link" />
  35. <tr class="level{count($chain)}">
  36. <td>
  37. <xsl:apply-templates select="$chain" mode="tracks">
  38. <xsl:with-param name="context" select="." />
  39. </xsl:apply-templates>
  40. <strong><xsl:value-of select="text" /></strong>
  41. </td>
  42. <td><a href="#" class="btn btn-success btn-mini add-link" data-navigation="{$id}" data-parent="{@id}"><i class="icon-plus"><xsl:text> </xsl:text></i> Append a Sublink</a><xsl:text> </xsl:text></td>
  43. <td><xsl:value-of select="url" /></td>
  44. <td>
  45. <xsl:choose>
  46. <xsl:when test="string-length(title)>0">
  47. <xsl:value-of select="substring(title,0,50)" />
  48. </xsl:when>
  49. <xsl:otherwise>
  50. <i class="red icon-bolt"><xsl:text> </xsl:text></i>
  51. </xsl:otherwise>
  52. </xsl:choose>
  53. </td>
  54. <td><xsl:value-of select="active" /></td>
  55. <td>
  56. <div class="btn-group">
  57. <xsl:choose>
  58. <xsl:when test="active='yes'">
  59. <a href="#" class="btn btn-mini deactivate" data-link="{@id}" data-navigation="{$id}"><i class="icon-check-empty"><xsl:text> </xsl:text></i> Deactivate</a>
  60. </xsl:when>
  61. <xsl:when test="active='no'">
  62. <a href="#" class="btn btn-mini activate" data-link="{@id}" data-navigation="{$id}"><i class="icon-check"><xsl:text> </xsl:text></i> Activate</a>
  63. </xsl:when>
  64. </xsl:choose>
  65. <a href="#" class="btn btn-mini edit" data-id="{@id}" data-navigation="{$id}"><i class="icon-edit"><xsl:text> </xsl:text></i> Edit</a>
  66.  
  67. <a href="#" class="btn btn-mini edit" data-id="{@id}" data-navigation="{$id}"><i class="icon-edit"><xsl:text> </xsl:text></i> Advanced Edit</a>
  68.  
  69. <a href="#">
  70. <xsl:attribute name="class">btn btn-mini
  71. <xsl:choose>
  72. <xsl:when test="position()=1"> disabled</xsl:when>
  73. </xsl:choose>
  74. </xsl:attribute>
  75. <i class="icon-circle-arrow-up"><xsl:text> </xsl:text></i> Up
  76. </a>
  77. <a href="#">
  78. <xsl:attribute name="class">btn btn-mini
  79. <xsl:choose>
  80. <xsl:when test="position()=count($chain)"> disabled</xsl:when>
  81. </xsl:choose>
  82. </xsl:attribute>
  83. <i class="icon-circle-arrow-down"><xsl:text> </xsl:text></i> Down
  84. </a>
  85. <a href="#" class="btn btn-mini btn-danger delete-link" data-id="{@id}" data-navigation="{$id}"><i class="icon-trash"><xsl:text> </xsl:text></i> Delete</a><xsl:text> </xsl:text>
  86. </div>
  87. </td>
  88. </tr>
  89. <xsl:apply-templates select="links" />
  90. </xsl:template>
  91.  
  92. <xsl:template match="link" mode="tracks">
  93. <xsl:param name="context" />
  94. <xsl:variable name="isSame" select="generate-id(.) = generate-id($context)" />
  95. <xsl:variable name="pos" select="count(preceding-sibling::link)" />
  96. <xsl:variable name="isLast" select="not(following-sibling::link)" />
  97. <xsl:variable name="type">
  98. <xsl:choose>
  99. <xsl:when test="$isSame">
  100. <xsl:if test="(following::link or links/link) and not($isLast)">t</xsl:if>
  101. <xsl:if test="$isLast">l</xsl:if>
  102. </xsl:when>
  103. <xsl:when test="$isLast and links/link">e</xsl:when>
  104. <xsl:when test="following::link and links/link">i</xsl:when>
  105. <xsl:when test="not(following::link)">e</xsl:when>
  106. </xsl:choose>
  107. </xsl:variable>
  108. <xsl:call-template name="node-type">
  109. <xsl:with-param name="type" select="$type" />
  110. </xsl:call-template>
  111. </xsl:template>
  112.  
  113. <xsl:template name="node-type">
  114. <xsl:param name="type" select="'t'" />
  115. <img class="textmiddle" src="/images/backend/{$type}-node.png" />
  116. </xsl:template>
  117. </xsl:stylesheet>

URL: http://stackoverflow.com/questions/15958557/tree-presentation-of-xml-structure-how-to-test-for-parents-preceding-siblings

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.