zoukankan      html  css  js  c++  java
  • 如何自定义改变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代码中不能包含逗号“,”,否则系统会出错。

    以下是代码:

     1 <script type="text/javascript">
     2 _spBodyOnLoadFunctionNames.push('changeTable');    
     3 function changeTable(){
     4       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>")); 5 } 6 function changeStringToHTML(listGUID,viewGUID,fieldIndex,replaceArray) 7 { 8 var tableID=listGUID + "-" + viewGUID ; 9 var cellIndex =fieldIndex; 10 var rowcount = document.getElementById(tableID).rows.length; 11 //alert(rowcount + replaceArray[0] + " " + replaceArray[1]); 12 for (i = 1; i < rowcount; i++) { 13 if(document.getElementById(tableID).rows[i].cells[cellIndex]) 14 { 15 for(j=0;j<replaceArray.length;j++) 16 { 17 if(document.getElementById(tableID).rows[i].cells[cellIndex].innerHTML.indexOf(replaceArray[j].split(',')[0])>=0) 18 document.getElementById(tableID).rows[i].cells[cellIndex].innerHTML=replaceArray[j].split(',')[1]; } 19 20 21 } 22 } 23 24 25 } 26 27 </script>


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

  • 相关阅读:
    有点忙啊
    什么是协程
    HDU 1110 Equipment Box (判断一个大矩形里面能不能放小矩形)
    HDU 1155 Bungee Jumping(物理题,动能公式,弹性势能公式,重力势能公式)
    HDU 1210 Eddy's 洗牌问题(找规律,数学)
    HDU1214 圆桌会议(找规律,数学)
    HDU1215 七夕节(模拟 数学)
    HDU 1216 Assistance Required(暴力打表)
    HDU 1220 Cube(数学,找规律)
    HDU 1221 Rectangle and Circle(判断圆和矩形是不是相交)
  • 原文地址:https://www.cnblogs.com/dosboy/p/3091788.html
Copyright © 2011-2022 走看看