如何自定义改变SharePoint 中列表Web部件中所有行某列中的固定值为图片或其它HTML代码
2013-05-21 22:28
519 查看
在做列表的默认视图中,我们经常发现,自定义的渲染方式不足,对于很多SharePoint的选项,比如“状态”,有“未启动、已推迟... ...”等等
特别是“审批”一栏,在显示的时候,完全可以把比如“已审批”或“未审批”一栏这3个文字替换成打勾或是打XX的图片,这样系统会有更好的显示效果。
请看如下的图片示例“同意备案”一栏,就显示“否”,非常地不友好!
上图中,第2列(第1列是附件)总是显示“否”,这样非常不好看。
对于这种值,我们一般都会使用一个图片来代替,如果是“否”,我们一般显示一个红灯,如果是“是”,我们一般显示一个绿灯。
为了改变这个样式,我们必须使用Javascript来对这个值进行更改,如果更改呢?
1、 打开SharePoint Designer ,在SPD中打开这个视图的ASPX文件,然后找到如下的行
2、在如下的行后面,插入如下的代码:
代码中红色的部分,需要你去改成你的参数,第1个参数是你列表的GUID值,第2个参数是你当前视图的GUID值
第3个参数是你想更改的第几列,第4个参数是想更改的值和更改后HTML的数组,数组中我们使用逗号来分隔原值和更改后的替代HTML
在本示例中,可以看出,我想把凡是第2列中所有值:
“是”,替换成一个图片地址是:/_layouts/images/ewr212m.gif,当然这个图片我已经上传到服务器中去了。
“否”,替换成一个图片地址是:'/_layouts/images/ewr213m.gif'
你可以根据情况,自由定义多个值,而不是2个。当然你的HTML代码中不能包含逗号“,”,否则系统会出错。
以下是代码:
以下更改后的效果截图,是不是很简单而又神奇呢?
特别是“审批”一栏,在显示的时候,完全可以把比如“已审批”或“未审批”一栏这3个文字替换成打勾或是打XX的图片,这样系统会有更好的显示效果。
请看如下的图片示例“同意备案”一栏,就显示“否”,非常地不友好!
上图中,第2列(第1列是附件)总是显示“否”,这样非常不好看。
对于这种值,我们一般都会使用一个图片来代替,如果是“否”,我们一般显示一个红灯,如果是“是”,我们一般显示一个绿灯。
为了改变这个样式,我们必须使用Javascript来对这个值进行更改,如果更改呢?
1、 打开SharePoint Designer ,在SPD中打开这个视图的ASPX文件,然后找到如下的行
<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">
2、在如下的行后面,插入如下的代码:
代码中红色的部分,需要你去改成你的参数,第1个参数是你列表的GUID值,第2个参数是你当前视图的GUID值
第3个参数是你想更改的第几列,第4个参数是想更改的值和更改后HTML的数组,数组中我们使用逗号来分隔原值和更改后的替代HTML
在本示例中,可以看出,我想把凡是第2列中所有值:
“是”,替换成一个图片地址是:/_layouts/images/ewr212m.gif,当然这个图片我已经上传到服务器中去了。
“否”,替换成一个图片地址是:'/_layouts/images/ewr213m.gif'
你可以根据情况,自由定义多个值,而不是2个。当然你的HTML代码中不能包含逗号“,”,否则系统会出错。
以下是代码:
<script type="text/javascript"> _spBodyOnLoadFunctionNames.push('changeTable'); function changeTable(){ changeStringToHTML("{E78E86F4-E55C-48DC-B05B-9A2E8FD0309F}", "{CB213FC2-9847-403A-9498-BC717D50F97A}", 2, new Array("是,<img src='/_layouts/images/ewr212m.gif'></img>","否,<img src='/_layouts/images/ewr213m.gif'></img>")); } function changeStringToHTML(listGUID,viewGUID,fieldIndex,replaceArray) { var tableID=listGUID + "-" + viewGUID ; var cellIndex =fieldIndex; var rowcount = document.getElementById(tableID).rows.length; //alert(rowcount + replaceArray[0] + " " + replaceArray[1]); for (i = 1; i < rowcount; i++) { if(document.getElementById(tableID).rows[i].cells[cellIndex]) { for(j=0;j<replaceArray.length;j++) { if(document.getElementById(tableID).rows[i].cells[cellIndex].innerHTML.indexOf(replaceArray[j].split(',')[0])>=0) document.getElementById(tableID).rows[i].cells[cellIndex].innerHTML=replaceArray[j].split(',')[1]; } } } } </script>
以下更改后的效果截图,是不是很简单而又神奇呢?
相关文章推荐
- sharepoint 2010 如何给文档库或自定义列表添加评论功能
- [转]如何在SharePoint中配置和自定义Content Query Web Part(二)
- 在SharePoint2010可见Web部件中使用Web Service获得所有列表
- 一步步学习微软InfoPath2010和SP2010--第十三章节--SharePoint视图和仪表板(7)--XSLT列表视图web部件
- 进击的KFC:iOS WebView 如何通过js获取网页中所有图片并加入点击事件,实现浏览图片的功能
- 如何用VS2010在SharePoint中创建自定义字段类型(以eWebEditor为例)
- 如何在SharePoint中配置和自定义Content Query Web Part(一)
- sharepoint 2010 如何给文档库或自定义列表添加评论功能
- 一步步学习微软InfoPath2010和SP2010--第十三章节--SharePoint视图和仪表板(7)--XSLT列表视图web部件
- 如何在SharePoint中配置和自定义Content Query Web Part (二)
- 如何让网页背景图片固定不变 不会随着网页的放大缩小而改变
- sharepoint 2010 如何给文档库或自定义列表添加评论功能
- SharePoint 根据列表项目的元属性按照条件筛选列表项目 Web 部件
- 一步步学习SPD2010--第三章节--处理列表和库(8)----自定义XSLT列表视图Web部件
- SharePoint 根据列表项目的元属性按照条件筛选列表项目 Web 部件
- 如何在SharePoint中配置和自定义Content Query Web Part (二)
- sharepoint 2010 可视web部件 自定义属性 控件获取到自定义属性的值
- 一步步学习SPD2010--第三章节--处理列表和库(8)----自定义XSLT列表视图Web部件
- 如何在SharePoint中配置和自定义Content Query Web Part(一)
- sharepoint 2010 自定义列表启用版本记录控制 如何在修改数据不产生新版本