• 如何调试SharePoint中XsltListViewWebPart的XSL

     一、概述：

    SharePoint中的XsltListViewWebPart使用XSLT+XML实现页面的显示，我们在实际开发中，如果对XSLT的修改很熟悉，则可以减轻很大的开发工作量。

    而XsltListViewWebPart只能在SharePoint Designer中修改，不方便调试。

    以下阐述，如何将XML和XSLT扣出来，在Stylus Studio 2010中调试。

    环境及工具：

    SharePoint 2010

    SharePoint Designer 2010

    Stylus Studio 2010

    二、步骤：

    1. 用SharePoint Designer 2010打开站点，在网站页面中新建“Web部件页”

    clip_image002[6]

    2. 修改页面名称

    clip_image004[5]

    3. 右键选择该页面，在菜单中选择“高级模式下编辑”项。在“插入”菜单下，选择“数据视图”

    clip_image006[5]

    4. 选择我们已经有的任意List，即可插入XsltListViewWebPart

    clip_image008[5]

    5. 选中刚刚插入的WEBPART，在菜单上选择“设计”，选择“自定义XSLT”，选择“自定义整个视图”

    clip_image010[5]

    6. XSLT无法保存解决方案

    我们经常会遇到修改了XSL后，浏览时并未生效，而且下次打开页面后，发现上次的修改都丢失了。可以搜索到ddwrt:ghost="hide" 属性，并全部删除即可

    如何获取WEBPART的XML，在下图位置中加入如下代码

    <xsl:output version="1.0" indent="yes" encoding="UTF-8" method="xml" />  
  <xsl:template match="/">  
    <xmp>      
<xsl:copy-of select="*"/>  
    </xmp>  
  </xsl:template>

    clip_image012[5]

    7. 保存，浏览

    clip_image014[5]

    8. 选择文本，复制出如下XML

    <dsQueryResponse ViewStyleID="" BaseViewID="1" TemplateType="100" RowLimit="30">
    <Rows>
      <Row ID="415" PermMask="0x7fffffffffffffff" Attachments="0" Title="" FileLeafRef="415_.000" FileLeafRef.Name="415_" FileLeafRef.Suffix="000" FSObjType="0" Created_x0020_Date="1;#2013-02-02 21:07:18" Created_x0020_Date.ifnew="1" FileRef="/PWA/Lists/PersonWeeklyProject/415_.000" FileRef.urlencode="%2FPWA%2FLists%2FPersonWeeklyProject%2F415%5F%2E000" FileRef.urlencodeasurl="/PWA/Lists/PersonWeeklyProject/415_.000" File_x0020_Type="" HTML_x0020_File_x0020_Type.File_x0020_Type.mapall="icgen.gif||" HTML_x0020_File_x0020_Type.File_x0020_Type.mapcon="" HTML_x0020_File_x0020_Type.File_x0020_Type.mapico="icgen.gif" ContentTypeId="0x0100E513BCAD7C764447B8235B60A272E6B3" ProjectName="Project_01" WorkTime="20" WorkTime.="20.0000000000000" MainWork="" ProjectId="794ddca5-d1b6-4eac-8cfc-28fb9ddd4fd0" PersonReportId="3ceee52d-db45-4512-b72d-09d5abf4f223" ResourceId="" OverTime="0.0" OverTime.="0" Approve="msoutsourcing\wwang" IsApproved="0" IsApproved.="0" IsReportApproved="0" IsReportApproved.="0" test="&lt;a href=&quot;http://ws-bjgisgtfs-04:82/PWA/_layouts/WrkStat.aspx?List=872f5ee3-8949-42e3-83c8-4f12c7a3c8e0&amp;WorkflowInstanceID=%7b0F500370%2d1155%2d413A%2d8999%2dA6756A82B007%7d&quot;&gt;&lt;span dir=none value=2&gt;进行中&lt;/span&gt;&lt;/a&gt;" />
      <Row ID="416" PermMask="0x7fffffffffffffff" Attachments="0" Title="" FileLeafRef="416_.000" FileLeafRef.Name="416_" FileLeafRef.Suffix="000" FSObjType="0" Created_x0020_Date="1;#2013-02-02 21:07:18" Created_x0020_Date.ifnew="1" FileRef="/PWA/Lists/PersonWeeklyProject/416_.000" FileRef.urlencode="%2FPWA%2FLists%2FPersonWeeklyProject%2F416%5F%2E000" FileRef.urlencodeasurl="/PWA/Lists/PersonWeeklyProject/416_.000" File_x0020_Type="" HTML_x0020_File_x0020_Type.File_x0020_Type.mapall="icgen.gif||" HTML_x0020_File_x0020_Type.File_x0020_Type.mapcon="" HTML_x0020_File_x0020_Type.File_x0020_Type.mapico="icgen.gif" ContentTypeId="0x0100E513BCAD7C764447B8235B60A272E6B3" ProjectName="vdi" WorkTime="20" WorkTime.="20.0000000000000" MainWork="" ProjectId="8a09e86d-b072-45f6-a720-fb1f3dd4777f" PersonReportId="3ceee52d-db45-4512-b72d-09d5abf4f223" ResourceId="" OverTime="0.0" OverTime.="0" Approve="msoutsourcing\wwang" IsApproved="0" IsApproved.="0" IsReportApproved="0" IsReportApproved.="0" test="&lt;a href=&quot;http://ws-bjgisgtfs-04:82/PWA/_layouts/WrkStat.aspx?List=872f5ee3-8949-42e3-83c8-4f12c7a3c8e0&amp;WorkflowInstanceID=%7b5E8640B0%2dC2BB%2d4BB7%2d833E%2d4FF26A8F45B3%7d&quot;&gt;&lt;span dir=none value=2&gt;进行中&lt;/span&gt;&lt;/a&gt;" />
    </Rows>
  </dsQueryResponse>

    9. 打开Stylus Studio 2010

    clip_image016[5]

    10. 新建XML文档

    clip_image018[5]

    11. 将刚刚复制出来的XML，粘贴到下面

    clip_image020[5]

    12. 保存

    clip_image021[5]

    13. 新建XSLT样式表

    clip_image023[5]

    14. 选择源XML

    clip_image025[5]

    15. 确认

    clip_image027[5]

    16. 生成如下XSLT默认样式表

    clip_image029[5]

    17. 保存

    clip_image030[5]

    18. 编写相关的XSLT代码

    19. 调试功能

    clip_image032[4]

    20. 报错

    clip_image033[4]

    21. 找到错误，并修改

    clip_image035[4]

    22. 修改后，再进行调试

    clip_image037[4]

    23. 能够成功运行，相关的XSLT代码如下

    <?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

    <xsl:template match="/">
        <html>
            <head>
                <style>.first
                {
                    color:red;
                }
                .second
                {
                    color:blue;
                }</style>
            </head>
            <body>
                <table>
                    <tr>
                        <td>Approve</td>
                        <td>ProjectName</td>
                    </tr>
                    <xsl:apply-templates select="dsQueryResponse/Rows/Row"></xsl:apply-templates>
                </table>
            </body>
        </html>
    </xsl:template>



    <xsl:template match="Row">
        <tr>
            <td>
                <xsl:choose>
                    <xsl:when test="@OverTime &gt; 0">
                        <xsl:attribute name="class">first</xsl:attribute>
                        <xsl:value-of select="@Approve"></xsl:value-of>
                    </xsl:when>
                    <xsl:when test="@Approve = 1">
                        <xsl:attribute name="class">second</xsl:attribute>
                        <a target="_blank">
                            <xsl:attribute name="href">
                                <xsl:value-of select="@FileRef.urlencodeasurl"></xsl:value-of>
                            </xsl:attribute>
                            <xsl:value-of select="@Approve"></xsl:value-of>
                        </a>
                    </xsl:when>
                    <xsl:otherwise>
                        <xsl:value-of select="@Approve"></xsl:value-of>
                    </xsl:otherwise>
                </xsl:choose>
            </td>
            <td>
                <xsl:value-of select="@ProjectName"></xsl:value-of>
            </td>
        </tr>
    </xsl:template>
</xsl:stylesheet>

    24. 在左下脚可以看到预览（浏览器）

    clip_image039[4]

    25. 生成的文本预览

    clip_image041[4]

    26. 在XML文本中加入如下代码，如下图所示

    <?xml-stylesheet type="text/xsl" href="data.xsl"?>

    clip_image043[4]

    27. 在浏览器中打开XML，可以浏览效果

    clip_image045[4]

    28. 调试好效果后，可以把做好的Template粘贴到SharePoint Designer中达到想要的效果

    三、效果演示：

    如下是使用配置出来的页面效果，上面的搜索框是用INFOPATH制作的

    中间和下面的框是用WEBPART实现的

    clip_image047[4]

    鼠标经过指定位置后，会异步加载数据，并弹出DIV框

    clip_image049[4]
  • 相关阅读:
    django model：auto_now_add 和 auto_now
    算法（2）：数据结构
    Flask（2）：登陆验证
    Flask（1）：基本示例、配置文件、路由、请求和响应、模板渲染
    linux基础
    算法（1）：查找&排序
    利用dispatch_once创建单例
    UIScrollView的属性总结
    ios开发 UITableViewController
    [深入浅出Cocoa]详解键值观察（KVO）及其实现机理
  • 原文地址：https://www.cnblogs.com/davidw/p/2891169.html
Copyright © 2020-2023  润新知