• 如何调试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]

  • 相关阅读:
    课程的添加与发布
    openlayers 框选得到在选框内的要素,并标注出这些要素的名称
    手写js前端分页功能实现
    eclipse安装html编辑器插件
    Redis持久化技术
    java获取指定时间
    java生成Cron表达式
    CentOS7 ifcfg-ens33(没有eth0网卡) 网卡配置 静态IP地址
    java代码关闭tomcat程序
    Tomcat控制台乱码问题
  • 原文地址:https://www.cnblogs.com/davidw/p/2891169.html
Copyright © 2020-2023  润新知