一、概述:
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部件页”
2. 修改页面名称
3. 右键选择该页面,在菜单中选择“高级模式下编辑”项。在“插入”菜单下,选择“数据视图”
4. 选择我们已经有的任意List,即可插入XsltListViewWebPart
5. 选中刚刚插入的WEBPART,在菜单上选择“设计”,选择“自定义XSLT”,选择“自定义整个视图”
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>
7. 保存,浏览
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="<a href="http://ws-bjgisgtfs-04:82/PWA/_layouts/WrkStat.aspx?List=872f5ee3-8949-42e3-83c8-4f12c7a3c8e0&WorkflowInstanceID=%7b0F500370%2d1155%2d413A%2d8999%2dA6756A82B007%7d"><span dir=none value=2>进行中</span></a>" /> <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="<a href="http://ws-bjgisgtfs-04:82/PWA/_layouts/WrkStat.aspx?List=872f5ee3-8949-42e3-83c8-4f12c7a3c8e0&WorkflowInstanceID=%7b5E8640B0%2dC2BB%2d4BB7%2d833E%2d4FF26A8F45B3%7d"><span dir=none value=2>进行中</span></a>" /> </Rows> </dsQueryResponse>
9. 打开Stylus Studio 2010
10. 新建XML文档
11. 将刚刚复制出来的XML,粘贴到下面
12. 保存
13. 新建XSLT样式表
14. 选择源XML
15. 确认
16. 生成如下XSLT默认样式表
17. 保存
18. 编写相关的XSLT代码
19. 调试功能
20. 报错
21. 找到错误,并修改
22. 修改后,再进行调试
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 > 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. 在左下脚可以看到预览(浏览器)
25. 生成的文本预览
26. 在XML文本中加入如下代码,如下图所示
<?xml-stylesheet type="text/xsl" href="data.xsl"?>
27. 在浏览器中打开XML,可以浏览效果
28. 调试好效果后,可以把做好的Template粘贴到SharePoint Designer中达到想要的效果
三、效果演示:
如下是使用配置出来的页面效果,上面的搜索框是用INFOPATH制作的
中间和下面的框是用WEBPART实现的
鼠标经过指定位置后,会异步加载数据,并弹出DIV框