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、好了,一系列定制页就完成了,什么?!还有修改的那个页?!Ohmy ladygaga!参照新建页,一开始添加自定义列表表单,选择修改就可以了,好了,四个页面的定制,都OK了,大家有问题或者更好的建议,给我留言吧!欢迎交流!我也该休息了,大家晚安!

 

 

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

 

 

posted @ 2011-10-13 22:35 霖雨 阅读(...) 评论(...) 编辑 收藏