SharePoint 2007 列表页定制--4个默认页定制

以“简单的领导简介”为例，欢迎大家指正

背景：项目中需要有领导简介的模块，就开始制作领导简介，本来很简单，有一个列表就可以，然后在前台展示出来，但是客户看到我们的效果，尤其输入领导信息的时候，SharePoint自带NewForm页就比较难看了，当然不妨碍使用，不过经过商谈，依然没有说服客户，谁让客户就是上帝呢。好吧，硬着头皮做了。

1、新建领导列表，这个不多说了，有多少栏，需要什么建什么就好。

2、开始定制NewForm页，默认的时候大家都知道，就像下面的图一样难看

 

 

然后开始定制，打开Designer，找到我们的列表，打开NewForm页（这些应该不用多说了吧），我们看到不见区域里面有一个默认的ListFormWebPart，不要干掉它，把这个td隐掉就可以了，以免有问题，将来还可以用，如果不熟的同学们，可以先copy一个副本，然后再改。隐掉原来的td，添加一个新的td，插入-sharepoint控件 -自定义列表表单，选择我们的列表，勾选新建，选择项目，确定即可。

3、找到<xsl:template name="dvt_1.rowedit">

<xsl:param name="Pos" />下面的td，同样在上面新建一行tr，隐掉这一样，打一个我们需要的表格，放到上面去，然后，把相应的编辑框拖到我们需要的位置。

定制效果如图，当然我的样式完全没有加，大家可以按照自己需要的或者喜欢的样式，添加上表格线，背景图等等，也可以换个模板页，看大家需要了。

 

 

 

4、新建页算是大功告成了，但是展示页也就是DispForm页也太难看了，这个必然是大大不行的，好吧，那让我们继续定制，将SharePoint定制进行到底！对了，上面的问题还有一个没有提到，就是所有的输入框，都太宽了，我们不需要，当然SharePoint里面有我们需要的属性，就是 DisplaySize="20"，记得双引号里面的是字符个数，不是一般宽度的像素值。

展示页原图

 

 

 

5、好了，关掉NewForm页，打开DispForm页，开始新一轮的定制！废话不多说，隐掉不要的td，添加一行新的td，我们要利用数据视图，在菜单栏中数据视图，插入数据视图，在右侧找到我们的列表，显示数据，选择我们需要的栏目，然后插入单项目视图，即可！

6、接下来的和刚才的工作类似了，找到<xsl:template name="dvt_1.rowview">这样一行，下面的table，在上面粘贴我们的table，然后把相应的显示的部分剪切过来，即可！原谅我吧，我不是美工，样式实在不擅长，大家自己看着弄哈。还有，这张无忌还真帅！另外要说的是，图片的处理，这个必须交代下，要不会被骂，首先写html的图片代码，然后就是url，找到相片字段，然后加上花括号{}，写在url里面就可以了

e.m：<img src="{@_x76f8__x7247_}" width="95" height="140"/>

效果如图

 

 

 

7、我们的任务就算完成了吧，不对，领导不能都是单独的啊，肯定是在一起的，好吧，再麻烦下，定制...定制...定制...说了进行到底的！来喽！关掉DispForm页，打开AllItems页，原谅我吧，我把SharePoint的四个页改了第三个了。主要不是难看，谁也不许说我审美不行，确实不错，挺好看，就是太正式，是吧，咱要炫一点。来吧，虽然有点小困了。

8、打开AllItems页了么？什么...还没有，你太慢了...添加一个表格，两行就够，把原来的部件和区域一起放在一个里，隐藏起来！其实干掉也无妨，不过我比较心软..总是心太软..心太软..依然是利用数据视图，具体过程我就不多说了，我又不是老太婆，虽然不帅也不是哥，好了，这次插入的是多项目视图！修改之~

9、随便点加入的内容，都会点到<td class="ms-vb">里面的东西，好了，修改之，当然，有一些需要的地方，提醒一下大家，一开始插进去的数据视图，是一行一行的，我们先要需要在常用Date View任务里面（表告诉我找不到！！在设计里面，点击插入的数据视图，右上角有个小三角，点击就有了），选择更改布局，布局里面选择你要的。然后图片处理同上。基本就这样！

10、当然，你会看到右下角的翻页太难看了，是吧，这个是可以改的，在代码里就可以，大家可以自己看看，很简单。还有，就是我们只是两列的，还可以编程三列或者四列，大家也可以研究下，好了，就这样了。

结果如图

 

 

 

11、好了，一系列定制页就完成了，什么？！还有修改的那个页？！Oh，my ladygaga！参照新建页，一开始添加自定义列表表单，选择修改就可以了，好了，四个页面的定制，都OK了，大家有问题或者更好的建议，给我留言吧！欢迎交流！我也该休息了，大家晚安！

 

 

作者：霖雨
出处：http://www.cnblogs.com/jianyus
本文版权归 霖雨和博客园共有，欢迎转载，但请注明出处。

 

 

转载于:https://www.cnblogs.com/jianyus/archive/2011/10/13/2210977.html