如何自定义改变SharePoint 中列表Web部件中所有行某列中的固定值为图片或其它HTML代码

在做列表的默认视图中，我们经常发现，自定义的渲染方式不足，对于很多SharePoint的选项，比如“状态”，有“未启动、已推迟... ...”等等

特别是“审批”一栏，在显示的时候，完全可以把比如“已审批”或“未审批”一栏这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>

以下更改后的效果截图，是不是很简单而又神奇呢？