SharePoint：扩展DVWP

fdhfgh

　　上一次，我们对我们的DVWP的外观进行了最后的加工，实现了下图中 1-5 的部分。这一次，我们将继续完成剩下的6 和 7 ,来为其添加一个图标。

　　在本系列中间的部分，Greg Schaefer提了一个很好的建议, 正因如此，我打算把我们的表单操作链接改成图标的形式。 Greg 建议我参考一下 Peter Allen的博客中有关 SharePoint Layout Images 的部分，使用SharePoint内置的一些图片来替换默认的表单操作链接：update, remove和insert。
　　本文也可以看作是对Greg所提建议的一个回应。

将超链接图标化
　　Peter 提到通过查找SharePoint Layout Images 目录往往可以发现很多有用的图片资源，这些图片都可以通过 /_layouts/images/ 路径进行访问。
　　下面是我找到的比较合适的图标:

Update		edititem.gif
Remove		crit_16.gif
Insert		newitem.gif

　　
　　对它们的使用也很简单：

• 点击链接
  
• 把原来的链接文本替换成图片：
     
  <a href="javascript: {ddwrt:GenFireServerEvent(concat('__cancel;dvt_1_form_editkey={',$KeyValue,'}'))}">update</a>
  
  
  …改成：
  
  
  
  <a href="javascript: {ddwrt:GenFireServerEvent(concat('__cancel;dvt_1_form_editkey={',$KeyValue,'}'))}"><img src="/_layouts/images/edititem.gif" border="0" alt="" /></a>
  
  

在remove 链接上重复该步骤。这里还有一个可以用于remove的图片：



Remove

Delitem.gif

　　有了图片, 原来添加的竖线就不需要了… 但还是需要定义一下外边框空白:



<td class="ms-vb" width="1%" nowrap="">
<a href="javascript: {ddwrt:GenFireServerEvent(concat('__cancel;dvt_1_form_removekey={',$KeyValue,'}'))}">
<img src="/_layouts/images/crit_16.gif" border="0" alt="" />
</a>
</td>


• 对于Insert，我还添加了一些描述文字：
  
  
  <a href="javascript: {ddwrt:GenFireServerEvent('__cancel;dvt_1_form_insertmode={1}')}">
  <img src="/_layouts/images/newitem.gif" border="0"/> Add a new employee
  </a>
  

　　至此… 包装工作完成。
　　好了，到目前为止，已经走过了34个部分。除了需要把所有的内容连接成一个完整的解决方案外，基本没有什么了。下一次，我们就可以完成我们的扩展DVWP系列了。
　　参考资料
　　SharePoint:Extending the DVWP - Part 34:Using Icons for Form Action Links