xml - 使用 XSLT 转换从 XML 生成类似于 treegrid 的 HTML

Question

我必须从给定的 XML 创建看起来像 treegrid 的 html。

树形网格示例： TreeGrid

我的 xslt 几乎完成了，我只需要应用一些边距来看起来有层次。

XML 是：

    <?xml version="1.0" encoding="UTF-8"?>
<rows>

  <row id="FOLDER1">
    <cell image="blank.gif">Folder 1</cell>
    <cell></cell>
    <cell></cell>
    <cell></cell>
    <cell></cell>
    <cell></cell>
    <cell></cell>
    <cell sum="1">$23</cell>
    <row id="FOLDER2">
      <cell image="blank.gif">Folder 2</cell>
      <cell></cell>
      <cell></cell>
      <cell></cell>
      <cell></cell>
      <cell></cell>
      <cell></cell>
      <cell sum="2">$11</cell>
      <row id="FOLDER3">
        <cell image="blank.gif">Folder 3</cell>
        <cell></cell>
        <cell></cell>
        <cell></cell>
        <cell></cell>
        <cell></cell>
        <cell></cell>
        <cell sum="3">$44</cell>
        <row id="pro1">
          <cell image="blank.gif">Product 1</cell>
          <cell>324234</cell>
          <cell>3.00</cell>
          <cell>Kilo</cell>
          <cell>1.00</cell>
          <cell>No</cell>
          <cell>€ 33.33</cell>
          <cell>€ 33.33</cell>
        </row>
        <row id="pro2">
          <cell image="blank.gif">Product 2</cell>
          <cell>4354354</cell>
          <cell>1.00</cell>
          <cell>Kilo</cell>
          <cell >0.50</cell>
          <cell>No</cell>
          <cell>€ 2.53</cell>
          <cell>€ 1.26</cell>
        </row>

      </row>
      <row id="pro3">
        <cell image="blank.gif">Product 3</cell>
        <cell>435436</cell>
        <cell>10.00</cell>
        <cell>Kilo</cell>
        <cell>Yes</cell>
        <cell>€ 0.36</cell>
        <cell>€ 3.60</cell>
      </row>

    <row id="pro4">
      <cell image="blank.gif">Product 4</cell>
      <cell>435435</cell>
      <cell>3.28</cell>
      <cell>Kilo</cell>
      <cell>1.00</cell>
      <cell>No</cell>
      <cell>€ 17.38</cell>
      <cell>€ 17.38</cell>
    </row>
    <row id="NEWCAT_59">
        <cell image="blank.gif">&lt;strong&gt;+ Add new category&lt;/strong&gt;</cell>
      </row>
      <row id="NEWSEMING_59">
        <cell image="blank.gif">&lt;strong&gt;+ Add new product&lt;/strong&gt;</cell>
      </row>
   </row>
  </row>

</rows>

XSLT 是：

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output method="html" indent="yes"/>
    <xsl:template match="/rows">
        <table>
            <tr>
                <th>1</th>
                <th>2</th>
                <th>3</th>
                <th>4</th>
                <th>5</th>
                <th>6</th>
                <th>7</th>
                <th>8</th>
            </tr>
            <xsl:apply-templates select="row"/>
        </table>
    </xsl:template>

    <xsl:template match="row">
        <tr>
            <xsl:apply-templates select="cell"/>
        </tr>
        <xsl:apply-templates select="row"/>
    </xsl:template>

    <xsl:template match="cell">

        <xsl:variable name="img" select="../@id"/>
        <xsl:variable name="cellvalue" select="."/>
        <xsl:variable name="cellattribute" select="./@image"></xsl:variable>

        <xsl:if test="$cellvalue!='&lt;strong&gt;+ Add new category&lt;/strong&gt;' and $cellvalue!='&lt;strong&gt;+ Add new product&lt;/strong&gt;' ">

            <td>
             <xsl:choose>

            <xsl:when test="starts-with($img, 'FOLDER') and $cellattribute='blank.gif'">
        <img alt="neso" src="http://www.deporteandaluz.com/web/includes/dhtmlx/imgs/csh_winstyle/minus.gif"></img>
        <xsl:value-of select="."/>
            </xsl:when>

            <xsl:otherwise>
                    <div style="margin-left:20px;display: inline;"><xsl:value-of select="."/></div>
                    </xsl:otherwise>

              </xsl:choose>
            </td>

        </xsl:if>
    </xsl:template>
</xsl:stylesheet>

文件夹 2 在文件夹 1 中，文件夹 2 和文件夹 3 都在文件夹 1 中。所以我需要文件夹 2 中的单元格比文件夹 1 中的单元格更靠右，同样适用于文件夹 3 或任何其他XML 中的文件夹。

预期输出：

<html><head></head><body><table>
    <tbody><tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
        <th>5</th>
        <th>6</th>
        <th>7</th>
        <th>8</th>
    </tr>
    <tr>
        <td><img alt="neso" src="http://www.deporteandaluz.com/web/includes/dhtmlx/imgs/csh_winstyle/minus.gif">Folder 1</td>
        <td>
            <div style="margin-left:20px;display: inline;"></div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;"></div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;"></div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;"></div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;"></div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;"></div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;">$23</div>
        </td>
    </tr>
    <tr>
        <td><img alt="neso" src="http://www.deporteandaluz.com/web/includes/dhtmlx/imgs/csh_winstyle/minus.gif" style="
    margin-left: 20px;
">Folder 2</td>
        <td>
            <div style="margin-left:20px;display: inline;"></div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;"></div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;"></div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;"></div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;"></div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;"></div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;">$11</div>
        </td>
    </tr>
    <tr>
        <td><img alt="neso" src="http://www.deporteandaluz.com/web/includes/dhtmlx/imgs/csh_winstyle/minus.gif" style="
    margin-left: 40px;
">Folder 3</td>
        <td>
            <div style="margin-left:20px;display: inline;"></div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;"></div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;"></div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;"></div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;"></div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;"></div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;">$44</div>
        </td>
    </tr>
    <tr>
        <td>
            <div style="margin-left: 60px;display: inline;">Product 1</div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;">324234</div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;">3.00</div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;">Kilo</div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;">1.00</div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;">No</div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;">€ 33.33</div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;">€ 33.33</div>
        </td>
    </tr>
    <tr>
        <td>
            <div style="margin-left: 60px;display: inline;">Product 2</div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;">4354354</div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;">1.00</div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;">Kilo</div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;">0.50</div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;">No</div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;">€ 2.53</div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;">€ 1.26</div>
        </td>
    </tr>
    <tr>
        <td>
            <div style="margin-left: 40px;display: inline;">Product 3</div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;">435436</div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;">10.00</div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;">Kilo</div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;">Yes</div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;">€ 0.36</div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;">€ 3.60</div>
        </td>
    </tr>
    <tr>
        <td>
            <div style="margin-left: 40px;display: inline;">Product 4</div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;">435435</div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;">3.28</div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;">Kilo</div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;">1.00</div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;">No</div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;">€ 17.38</div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;">€ 17.38</div>
        </td>
    </tr>
    <tr>
    </tr><tr>
</tr></tbody></table></body></html>

score 2 · Accepted Answer

这个 XSLT 1.0 样式表...

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" indent="yes"/>
<xsl:strip-space elements="*" />

<xsl:template match="/">
  <html>
    <head/>
    <body>
      <xsl:apply-templates select="rows" />
    </body>
  </html>
</xsl:template>

<xsl:template match="rows">
  <table>
    <tbody><tr>
      <xsl:for-each select="row[1]/cell">
        <th><xsl:value-of select="position()" /></th>
      </xsl:for-each>
    </tr>
    <xsl:apply-templates select="descendant::row" />  
  </tbody>
  </table>
</xsl:template>  

<xsl:template match="row[contains(cell[1],'Add new ')]" />

<xsl:template match="row">
  <tr>
    <xsl:apply-templates select="cell" />
  </tr>  
</xsl:template>

<xsl:template name="style">
  <xsl:param name="margin" select="0" />
  <xsl:param name="display" select="'inline'" />
  <xsl:variable name="v1">
    <xsl:if test="$margin &gt; 0">
      <xsl:value-of select="concat('margin-left:',$margin,'px;')" />
    </xsl:if>
    <xsl:if test="$display">
      <xsl:value-of select="concat('display: ',$display,';')" />
    </xsl:if>
  </xsl:variable>  
  <xsl:if test="$v1">
    <xsl:attribute name="style"><xsl:value-of select="$v1" /></xsl:attribute>
  </xsl:if>
</xsl:template>

<xsl:template match="cell[position()=1][starts-with(../@id,'FOLDER')]" priority="3">
  <!-- First column for FOLDER rows -->
  <td>
    <img alt="neso" src="http://www.deporteandaluz.com/web/includes/dhtmlx/imgs/csh_winstyle/minus.gif">
      <xsl:call-template name="style">
        <xsl:with-param name="margin" select="(count(ancestor::row) - 1)*20" />
        <xsl:with-param name="display" select="''" />
       </xsl:call-template>
     </img>
  <xsl:value-of select="." />
  </td>  
</xsl:template>

<xsl:template match="cell[position()=1]" priority="2">
  <!-- First column for non-FOLDER rows -->
  <td>
     <div>
      <xsl:call-template name="style">
        <xsl:with-param name="margin" select="(count(ancestor::row) - 1)*20" />
       </xsl:call-template>
       <xsl:value-of select="." />
     </div>
  </td>  
</xsl:template>

<xsl:template match="cell" priority="1">
  <!-- Subsequent columns -->
  <td>
     <div>
      <xsl:call-template name="style">
        <xsl:with-param name="margin" select="20" />
       </xsl:call-template>
       <xsl:value-of select="." />
     </div>
  </td>  
</xsl:template>

</xsl:stylesheet>

...将提供的输入转换为...

<html>
  <head>
    <META http-equiv="Content-Type" content="text/html; charset=utf-8">
  </head>
  <body>
    <table>
      <tbody>
        <tr>
          <th>1</th>
          <th>2</th>
          <th>3</th>
          <th>4</th>
          <th>5</th>
          <th>6</th>
          <th>7</th>
          <th>8</th>
        </tr>
        <tr>
          <td><img alt="neso" src="http://www.deporteandaluz.com/web/includes/dhtmlx/imgs/csh_winstyle/minus.gif" style="">Folder 1</td>
          <td>
            <div style="margin-left:20px;display: inline;">
            </div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">
            </div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">
            </div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">
            </div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">
            </div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">
            </div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">$23</div>
          </td>
        </tr>
        <tr>
          <td><img alt="neso" src="http://www.deporteandaluz.com/web/includes/dhtmlx/imgs/csh_winstyle/minus.gif" style="margin-left:20px;">Folder 2</td>
          <td>
            <div style="margin-left:20px;display: inline;">
            </div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">
            </div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">
            </div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">
            </div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">
            </div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">
            </div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">$11</div>
          </td>
        </tr>
        <tr>
          <td><img alt="neso" src="http://www.deporteandaluz.com/web/includes/dhtmlx/imgs/csh_winstyle/minus.gif" style="margin-left:40px;">Folder 3</td>
          <td>
            <div style="margin-left:20px;display: inline;">
            </div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">
            </div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">
            </div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">
            </div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">
            </div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">
            </div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">$44</div>
          </td>
        </tr>
        <tr>
          <td>
            <div style="margin-left:60px;display: inline;">Product 1</div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">324234</div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">3.00</div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">Kilo</div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">1.00</div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">No</div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">€ 33.33</div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">€ 33.33</div>
          </td>
        </tr>
        <tr>
          <td>
            <div style="margin-left:60px;display: inline;">Product 2</div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">4354354</div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">1.00</div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">Kilo</div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">0.50</div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">No</div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">€ 2.53</div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">€ 1.26</div>
          </td>
        </tr>
        <tr>
          <td>
            <div style="margin-left:40px;display: inline;">Product 3</div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">435436</div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">10.00</div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">Kilo</div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">Yes</div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">€ 0.36</div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">€ 3.60</div>
          </td>
        </tr>
        <tr>
          <td>
            <div style="margin-left:40px;display: inline;">Product 4</div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">435435</div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">3.28</div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">Kilo</div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">1.00</div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">No</div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">€ 17.38</div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">€ 17.38</div>
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

注意事项

此解决方案不适用于嵌套在表中的表。但从上下文来看，我认为这不是问题是一个很好的选择。
这不是一个特别严格的解决方案。相反，它强调可读性。如果更简洁的解决方案对您很重要，请告诉我，我会相应地制作。
与左侧边距样式相关的转换规则对我来说并不清楚。我做了以下假设。
- 行的头列具有与输入“行”节点的元素深度成比例的边距。
- 所有其他列的固定边距为 20 像素。

xml - 使用 XSLT 转换从 XML 生成类似于 treegrid 的 HTML

1 回答 1

注意事项

Related

Reference