Question

从概念上讲，我了解如何进行这项工作；但是，我无法让 XSLT 像我需要的那样绘制屏幕。

我想要做的是为我的公司获取一些培训视频的 XML 文档，并以他们可以滚动浏览的产品页面样式列出它们。

XML：

<?xml version="1.0"?>
    
<TrainingVideos>
    <record>
        <VideoId>2</VideoId>
        <VideoTitle>TimeTrex - Clocking In</VideoTitle>
        <VideoFilePath>trainingmaterial/videos/TimeTrexClockingIn.mp4</VideoFilePath>
        <VideoThumbnailPath>images/video_thumbnails/TimeTrex-ClockingIn.png</VideoThumbnailPath>
        <VideoDescription>How To Login And Clock In To TimeTrex.</VideoDescription>
    </record>
    <record>
        <VideoId>4</VideoId>
        <VideoTitle>TimeTrex - Supervisor - Authorizing Leave Requests</VideoTitle>
        <VideoFilePath>trainingmaterial/videos/TimeTrexSupervisor-AuthorizingLeaveRequests.mp4</VideoFilePath>
        <VideoThumbnailPath>images/video_thumbnails/AuthorizingLeaveRequest.png</VideoThumbnailPath>
        <VideoDescription>How, As A Supervisio, Authorize Leave Requests.</VideoDescription>
    </record>
    <record>
        <VideoId>3</VideoId>
        <VideoTitle>TimeTrex Requesting Time Off</VideoTitle>
        <VideoFilePath>trainingmaterial/videos/TimeTrexRequestingTimeOff.mp4</VideoFilePath>
        <VideoThumbnailPath>images/video_thumbnails/RequestTimeOff.PNG</VideoThumbnailPath>
        <VideoDescription>How To Request Time Off</VideoDescription>
    </record>
    <record>
        <VideoId>5</VideoId>
        <VideoTitle>TimeTrex Supervisor - Authorizing Time Sheet</VideoTitle>
        <VideoFilePath>trainingmaterial/videos/TimeTrexSupervisor-AuthorizingTimeSheet.mp4</VideoFilePath>
        <VideoThumbnailPath>images/video_thumbnails/AuthorizingTimeSheet.png</VideoThumbnailPath>
        <VideoDescription>How To Authorize A Timesheet As A Supervisor.</VideoDescription>
    </record>
    <record>    
        <VideoId>6</VideoId>
        <VideoTitle>TimeTrex Timesheet Manual Fill In</VideoTitle>
        <VideoFilePath>trainingmaterial/videos/TimeTrexTimesheetManualFillIn.mp4</VideoFilePath>
        <VideoThumbnailPath>images/video_thumbnails/ManualTimesheet.png</VideoThumbnailPath>
        <VideoDescription>How To Manually Fill In A Timesheet.</VideoDescription>
    </record>
    <record>
        <VideoId>7</VideoId>
        <VideoTitle>TimeTrex Verifying Timesheet</VideoTitle>
        <VideoFilePath>trainingmaterial/videos/TimeTrexVerifyingTimesheet.mp4</VideoFilePath>
        <VideoThumbnailPath>images/video_thumbnails/VerifyTimeSheet.png</VideoThumbnailPath>
        <VideoDescription>How To Verify Your Timesheet.</VideoDescription>
    </record>
</TrainingVideos>

XSLT：

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

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
    <xsl:output method="html" encoding="utf-8" indent="yes"/>

    <!-- Parameters -->

    <xsl:param name="PAGE_TITLE">Training Videos</xsl:param>
    <xsl:param name="FORM_NAME">viewTrainingVideos</xsl:param>
    <xsl:param name="BTN_DONE">main.php</xsl:param>
    <xsl:variable name="cols" select="3" />
    <xsl:variable name="rows" select="count(//TrainingVideos/record) div $cols" />

    <!-- Main Template -->

    <xsl:template match="/">

        <script src="js/{$FORM_NAME}.js"/>

        <div class="container {$FORM_NAME}">
            <div class="card">
                <div class="card-header bg-primary text-white h4 text-center">
                    <xsl:copy-of select="$PAGE_TITLE"/>
                </div>
                <div class="card-body">
                    <xsl:if test="count(//TrainingVideos/record) = 0">
                        <div class="none-available alert alert-info mb-0">
                            <xsl:text>No Training Videos are available.</xsl:text>
                        </div>
                    </xsl:if>
                    <div class="scrollable">
                        <xsl:apply-templates select="//TrainingVideos/record"/>
                    </div>
                    <hr class="mb-0"/>
                </div>
                <nav class="pagination-container" aria-label="Pagination">
                    <ul class="pagination">
                        <li class="page-item">
                            <a class="page-link btn-sm" href="{$BTN_DONE}" id="btnDone">Done</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link btn-sm" href="#" id="btnTop">
                                <span class="far fa-hand-pointer fa-fw fa-lg"/>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    
        <!-- Video Modal Dialog -->

        <div class="modal fade" id="continue-dialog" tabindex="-1" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header bg-danger">
                        <h5 class="modal-title"/>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">
                                <i class="fa fa-close" aria-hidden="true"></i>
                            </span>
                        </button>            
                    </div>
                    <div class="modal-body"/>
                    <nav class="pagination-container" aria-label="Pagination">
                        <ul class="pagination">
                            <li class="page-item">
                                <a class="page-link btn-sm" href="#" id="btnContinue" data-dismiss="modal">Close</a>
                            </li>
                        </ul>
                    </nav>
                </div>    
            </div>
        </div>

    </xsl:template>

    <!-- Template to build table rows -->

    <xsl:template match="//TrainingVideos/record">
        <div class="card-group">
            <div class="card p-2 m-2 border border-primary rounded">
                <img class="card-img-top" src="{VideoThumbnailPath}" alt="Card Thumbnail"/>
                <div class="card-body d-flex flex-column">
                    <h5 class="card-title">
                        <xsl:value-of select="VideoTitle"/>
                    </h5>
                    <p class="card-text">
                        <xsl:value-of select="VideoDescription"/>
                    </p>
                    <button type="button" class="btn btn-lg btn-block btn-primary mt-auto">Start Training</button>
                </div>
            </div>    
        </div>
    </xsl:template>
    
</xsl:stylesheet>

我想要实现的是让最后的 HTML 显示三列宽，无论 XML 中的多少节点都向下。

例如...

A|B|C

D|E|F

谁能帮我解决我对如何做到这一点的无知？我觉得我已经查看了互联网上的每一页以寻找答案...

Answer 1

使用 <xsl:param name="cols" select="3"/> 和

                <div class="container">
                    <xsl:apply-templates select="//TrainingVideos/record[position() mod $cols = 1]" mode="row"/>
                </div>

加上

<xsl:template match="record" mode="row">
  <div class="row">
    <xsl:apply-templates select=". | following-sibling::record[position() &lt; $cols]" mode="col"/>
  </div>
</xsl:template>

<xsl:template match="record" mode="col">
  <div class="col-sm">
    <xsl:apply-templates select="."/>
  </div>
</xsl:template>

然后，“列单元格”的内容将由您现有的 record 模板填充。

创建 XSLT 产品页面

1 个答案: