一、概述：
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]](http://images0.cnblogs.com/blog/384558/201302/03220151-afa111d186734453bb5c5be8219ee4c4.jpg "clip_image002[6]")
2. 修改页面名称
![clip_image004[5]](http://images0.cnblogs.com/blog/384558/201302/03220152-c35ab709a12e428785b58f9f11bae0f0.jpg "clip_image004[5]")
3. 右键选择该页面，在菜单中选择“高级模式下编辑”项。在“插入”菜单下，选择“数据视图”
![clip_image006[5]](http://images0.cnblogs.com/blog/384558/201302/03220153-f2a8b331303e409280d924ac9e3dfe5e.jpg "clip_image006[5]")
4. 选择我们已经有的任意List，即可插入XsltListViewWebPart
![clip_image008[5]](http://images0.cnblogs.com/blog/384558/201302/03220155-27bcd49d3def459da52a3a5eeb193d05.jpg "clip_image008[5]")
5. 选中刚刚插入的WEBPART，在菜单上选择“设计”，选择“自定义XSLT”，选择“自定义整个视图”
![clip_image010[5]](http://images0.cnblogs.com/blog/384558/201302/03220157-55a99c744b1a4196ba32f9c579d89a01.jpg "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]](http://images0.cnblogs.com/blog/384558/201302/03220207-84cad46a10f44ab1b4aa38a81087c2e7.jpg "clip_image012[5]")
7. 保存，浏览
![clip_image014[5]](http://images0.cnblogs.com/blog/384558/201302/03220209-8e0148457801413ba6b2ddd71545e647.jpg "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="<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
![clip_image016[5]](http://images0.cnblogs.com/blog/384558/201302/03220210-badd4cd1b4054be9bbf453b8c3ef5d24.jpg "clip_image016[5]")
10. 新建XML文档
![clip_image018[5]](http://images0.cnblogs.com/blog/384558/201302/03220211-52728ef54b7b4960bbefeb6e916a0e30.jpg "clip_image018[5]")
11. 将刚刚复制出来的XML，粘贴到下面
![clip_image020[5]](http://images0.cnblogs.com/blog/384558/201302/03220212-301e46ccfec147ca8cfeab80586db1a2.jpg "clip_image020[5]")
12. 保存
![clip_image021[5]](http://images0.cnblogs.com/blog/384558/201302/03220219-1bb16136a0574aaabea7953674970ddb.png "clip_image021[5]")
13. 新建XSLT样式表
![clip_image023[5]](http://images0.cnblogs.com/blog/384558/201302/03220221-2d43408b24514beb8d0f575613fa4bb3.jpg "clip_image023[5]")
14. 选择源XML
![clip_image025[5]](http://images0.cnblogs.com/blog/384558/201302/03220222-83aa3bfb23b04bfebf2472c84e4ee705.jpg "clip_image025[5]")
15. 确认
![clip_image027[5]](http://images0.cnblogs.com/blog/384558/201302/03220226-3cfdd8ff2a6f404187ee48c6ab8c7d7e.jpg "clip_image027[5]")
16. 生成如下XSLT默认样式表
![clip_image029[5]](http://images0.cnblogs.com/blog/384558/201302/03220230-be18b972030741439269d5e9628bac79.jpg "clip_image029[5]")
17. 保存
![clip_image030[5]](http://images0.cnblogs.com/blog/384558/201302/03220231-71344cdc3d984380855add86e565045c.png "clip_image030[5]")
18. 编写相关的XSLT代码
19. 调试功能
![clip_image032[4]](http://images0.cnblogs.com/blog/384558/201302/03220232-34aeb35442b3479c8b6e346606dfbaf6.jpg "clip_image032[4]")
20. 报错
![clip_image033[4]](http://images0.cnblogs.com/blog/384558/201302/03220233-c8838402720c4e21802da25927c6686c.png "clip_image033[4]")
21. 找到错误，并修改
![clip_image035[4]](http://images0.cnblogs.com/blog/384558/201302/03220234-59b57b13583447c583593770cd3903b3.jpg "clip_image035[4]")
22. 修改后，再进行调试
![clip_image037[4]](http://images0.cnblogs.com/blog/384558/201302/03220235-6b659d609a2b4865b1c5bfe38b282577.jpg "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 > 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]](http://images0.cnblogs.com/blog/384558/201302/03220237-c604c4040760452ca5ea0944349ee549.jpg "clip_image039[4]")
25. 生成的文本预览
![clip_image041[4]](http://images0.cnblogs.com/blog/384558/201302/03220238-44a915725d194041829bc429f1835a12.jpg "clip_image041[4]")
26. 在XML文本中加入如下代码，如下图所示
<?xml-stylesheet type="text/xsl" href="data.xsl"?>
![clip_image043[4]](http://images0.cnblogs.com/blog/384558/201302/03220239-ff22ee8c00d040f6b3f885af60a7db41.jpg "clip_image043[4]")
27. 在浏览器中打开XML，可以浏览效果
![clip_image045[4]](http://images0.cnblogs.com/blog/384558/201302/03220240-8166435104e84d7aa0b38025c5bfedc2.jpg "clip_image045[4]")
28. 调试好效果后，可以把做好的Template粘贴到SharePoint Designer中达到想要的效果
三、效果演示：
如下是使用配置出来的页面效果，上面的搜索框是用INFOPATH制作的
中间和下面的框是用WEBPART实现的
![clip_image047[4]](http://images0.cnblogs.com/blog/384558/201302/03220242-ddb2f8955c5a499695493c74950aa17a.jpg "clip_image047[4]")
鼠标经过指定位置后，会异步加载数据，并弹出DIV框
![clip_image049[4]](http://images0.cnblogs.com/blog/384558/201302/03220243-0e77200dd4da4e1b9718e81b36280531.jpg "clip_image049[4]")