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

你可能感兴趣的:(SharePoint)