SharePoint2010自定义带表格线的视图样式

http://blog.sina.com.cn/s/blog_4d9866860101f1im.html 原地址

 

SharePoint2010中大多数东西都可以自定义，比如说webpart、field type，甚至视图样式view style。前两天接到一个新的任务是让给客户做一个带表格线的视图样式。因为之前没有做过，在网上查到的资料也比较少，因此花费了一个多周才完成。虽然其中有的原理弄的不是很明白，不过实际上过程并不复杂，现在记录下来跟大家共享一下。

 

首先说一下需要了解的技术点：XML、xslt以及html，基本就这三点。其中xslt用的比较深，xml和html基本会用就行。

 

然后说具体过程。

1.创建一个自定义的视图样式：找到C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\GLOBAL\XML\VWSTYLES.XML，所有的视图样式都存在这个xml文件中，不同的样式对 应不同的ID，我们只需要将ID=0的样式复制粘贴一份，然后修改一下头元素中的ID、displayname、description和script元 素中的ID即可，如下图：

这是我自己添加的ID=87，名字是BasicForm的视图样式。

保存之后iisreset就可以在SharePoint页面的修改视图--->样式中看到BasicForm，如图：
但是此时应用这个样式会非常难看，因为没有设置对应样式的排版。那么如何设置样式的外观呢？

 

2.修改样式外观：修改样式外观需要找到C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\XSL\vwstyles.xsl这个文件。如果你还不了解xsl文件或者不会用xslt，请先自行百度。

在这个文件中存着很多跟各个样式ID对应的template，这些template指定了对应样式的显示格式。在这个文件中我们主要需要创建一个view template和一个Row template。方法也很简单，就是把ID=0的view template和row template复制粘贴一份，然后id改成87。完成了这一步，你会发现实际上我们又创建了一个ID=87的基本样式，效果和ID=0的基本样式是一样的，因为我们是完全复制过来的。

那么怎么给样式加上表格线呢？

 

3.给基本样式加表格线： 只要你会一点html就很容易发现，我们只需要对id=87的view template稍作修改，将原来<table>元素下的部分内容做如下替换：（修改部分已加黑）

原：

<table id="onetidDoclibViewTbl{$ViewCounter}" width="100%" class="ms-summarystandardbody" border="0"

              cellspacing="0" cellpadding="1" dir="None" summary="{List/@title} {List/@description}">

            <tr class="ms-viewheadertr" valign="TOP">

 

改为：

          <table id="onetidDoclibViewTbl{$ViewCounter}" width="100%" class="ms-summarystandardbody" border="1"

              cellspacing="0" cellpadding="1" dir="None" summary="{List/@title} {List/@description}" style="border-collapse:collapse">

            <tr valign="TOP"  bgcolor="#F5F5F5">

然后保存文件，进行iisreset，重新打开页面，你会发现，带表格的视图样式就建成了。

 

同样，我们也可以根据需求进行一些其他修改，让样式显得更美观。

 

在修改的过程中可能存在一些细节问题，比如表头没有表格线、checkbox去不掉等问题，欢迎大家一起探讨，一起研究。