2

特定の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>
4

1 に答える 1

2

このXSLT1.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>

警告

  1. このソリューションは、テーブル内にネストされたテーブルでは機能しません。しかし、文脈から、これが問題にならないことはかなり良い賭けだと思いました。

  2. これは特に厳しい解決策ではありません。代わりに読みやすさを強調しています。より簡潔な解決策があなたにとって重要であるならば、私に知らせてください、そして私はそれに応じて生産します。

  3. マージンレフトスタイルに関連する変換のルールは、私には明確ではありませんでした。私は以下の仮定をしました。

    • 行の先頭の列には、入力された「行」ノードの要素の深さに比例したマージンがあります。
    • 他のすべての列のマージンは20pxに固定されています。
于 2012-10-22T04:24:16.193 に答える