xslt template doesn't apply on direct child no

问题:

I want to generate html markup based on xml provided by server. Elements can contain other elements. I have to use XSLT 1.0

For instance, I have followinng xml structure:

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

<StackPanel DataContext="" HAlign="Left" Orientation="Vertical" Padding="5" VAlign="Top">
  <Grid Cols="2" DataContext="" HAlign="Left" Padding="5" Rows="2" VAlign="Top">
     <Cells>
         <Cell Col="1" DataContext="" HAlign="Left" Padding="5" Row="0" VAlign="Top" />
         <Cell Col="0" DataContext="" HAlign="Left" Padding="5" Row="0" VAlign="Top">
             <Grid  Cols="1" Rows="1">
               <Cells>
                  <Cell Col="0" Row="0"></Cell>
               </Cells>
             </Grid>
         </Cell>
         <Cell Col="0" DataContext="" HAlign="Left" Padding="5" Row="1" VAlign="Top" />
         <Cell Col="1" DataContext="" HAlign="Left" Padding="5" Row="1" VAlign="Top" />
      </Cells>
   </Grid>
</StackPanel>

I'm trying to apply style:

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:msxsl="urn:schemas-microsoft-com:xslt" exclude-result-prefixes="msxsl"
>
  <xsl:output method="html"/>
  <xsl:strip-space elements="*"/>

  <!--Entry point-->
  <xsl:template match="/">
    <xsl:apply-templates/>
  </xsl:template>


  <!--Cell key-->
  <xsl:key name="cell-key" match="Cells/Cell" use="@Row"/>

  <!--Grid-->
  <xsl:template match="Grid">
    <div class="grid">
      <xsl:apply-templates select="Cells/Cell[generate-id(.) = generate-id(key('cell-key', @Row))]" />
    </div>
  </xsl:template>

  <!--Grid cell-->
  <xsl:template match="Cell">
    <div class="gridRow">
      <xsl:for-each select="key('cell-key', @Row)">
        <xsl:sort select="@Col"/>
        <div class="gridCell">
          <xsl:apply-templates select="*" />
        </div>
      </xsl:for-each>
    </div>
  </xsl:template>
</xsl:stylesheet>

I use Muenchian Method for grid rows generation. But instead of applying on direct children I got flat view.

<div class="grid">
  <div class="gridRow">
    <div class="gridCell">
      <div class="grid"></div>
    </div>
    <div class="gridCell"></div>
    <div class="gridCell"></div>
  </div>
  <div class="gridRow">
    <div class="gridCell"></div>
    <div class="gridCell"></div>
  </div>
</div>

How to place cell into nested Grid?

回答1:

The "failure" (better tricky situation is) you generalize <Cell Col="0" Row="0"></Cell> [part of the inner grid] with the same @Row of outer grid via xsl:key; Same row numbers but in different grid-depth.

So you have to seperate them and make them independent.

One Approach:

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:msxsl="urn:schemas-microsoft-com:xslt" exclude-result-prefixes="msxsl"
    >
    <xsl:output method="html"/>
    <xsl:strip-space elements="*"/>

    <!--Entry point-->
    <xsl:template match="/">
        <xsl:apply-templates/>
    </xsl:template>


    <!--Cell key-->
    <xsl:key name="cell-key" match="Cells/Cell" use="concat(count(ancestor::Grid), '|', @Row)"/>

    <!--Grid-->
    <xsl:template match="Grid">
        <div class="grid">
            <xsl:apply-templates select="Cells/Cell[generate-id(.) = generate-id(key('cell-key', concat(count(ancestor::Grid), '|', @Row)))]" />
        </div>
    </xsl:template>

    <!--Grid cell-->
    <xsl:template match="Cell">
        <div class="gridRow">
            <xsl:for-each select="key('cell-key', concat(count(ancestor::Grid), '|', @Row))">
                <xsl:sort select="@Col"/>
                <div class="gridCell">
                    <xsl:apply-templates select="*" />
                </div>
            </xsl:for-each>
        </div>
    </xsl:template>
</xsl:stylesheet>

Result

<div class="grid">
  <div class="gridRow">
     <div class="gridCell">
        <div class="grid">
           <div class="gridRow">
              <div class="gridCell"></div>
           </div>
        </div>
     </div>
     <div class="gridCell"></div>
  </div>
  <div class="gridRow">
     <div class="gridCell"></div>
     <div class="gridCell"></div>
  </div>
</div>