视图行的颜色由某列的值决定【设置视图记录背景色js javascript】

Q：根据不同的值，使视图的行显示不同的颜色

A：
业务背景：如果时间已经超过当前时间了，就显示红色
在sp6中做法如下：
视图列的脚本如下：

1. var dt=getItemValueAsDate("日期");
   
2. var tm=getToday();
   
3. //转为字符串类型
   
4. var dt1=format(dt,"yyyy-MM-dd HH:mm:ss");
   
5. vat tm1=format(tm,"yyyy-MM-dd HH:mm:ss");
   
6. //计算2者的相隔小时数
   
7. var diff = diffHours(dt1,tm1);
   
8. //设置要显示的内容
   
9. var col = dt1;
   
10. if(diff > 0)
    
11. {
    
12. //设置当前的行为红色
    
13. col +="<script>";
    
14. col += "var obj=document.getElementsByName('_selects'); for(var i=0;i<obj.length;i++){if(obj[i].value == '" + getId() + "') {obj[i].parentNode.parentNode.bgColor = 'red';break;}};";
    
15. col += "</script>";
    
16. }
    
17. col;

复制代码

效果图：


ps：仅保证对普通的视图的效果

在sp7中做法如下：
由于sp7中的视图有重构，输出来的视图表格会被替换成重构后的。所以需要在视图中配一个查询表单。在表单源码中写如下代码：

1. <script>
   
2. jQuery(document).ready(function(){
   
3.         setTimeout(function(){
   
4.                 jQuery("div.changeColor").each(function(){
   
5.                                         jQuery(this).parents("tr").css("backgroundColor","red");
   
6.                 });
   
7.         },300);
   
8. });
   
9. </script>

复制代码

在视图列脚本模式中：

1. var dt=getItemValueAsDate("出生年月");
   
2. var tm=getToday();
   
3. //转为字符串类型
   
4. var dt1=format(dt,"yyyy-MM-dd HH:mm:ss");
   
5. var tm1=format(tm,"yyyy-MM-dd HH:mm:ss");
   
6. //计算2者的相隔小时数
   
7. var diff = diffHours(dt1,tm1);
   
8. //设置要显示的内容
   
9. var col = dt1;
   
10. if(diff > 0)
    
11. {
    
12. col += "<div class='changeColor' style='display:none;'></div>";
    
13. }
    
14. col;

复制代码