Question

我已按照本网站上的指南进行操作，

http://www.c-sharpcorner.com/UploadFile/sagarp/sharepoint-2013-list-column-status-wise-change-row-color-usi/

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js">   </script>
<script type="text/javascript">
$(document).ready(function () {
    $Text = $("td.ms-cellstyle.ms-vb2:contains('Approved')"); $Text.parent().css("background-  color", "#01DF3A");
    $Text = $("td.ms-cellstyle.ms-vb2:contains('Rejected')");
    $Text.parent().css("background-color", "#F90101");
    $Text = $("td.ms-cellstyle.ms-vb2:contains('Pending')");
    $Text.parent().css("background-color", "#EAC117");
});
</script>

这个有效！但... 问题是当用户访问列表的下一页结果时，不会出现颜色编码。它就像加载列表的下一页时脚本不运行一样。

有没有办法确保脚本运行？

解决方案的另一个想法是显示列表的所有行。目前，每个页面列出的项目只有30个。如果显示了所有项目，则在网页加载并对所有行进行颜色编码时，脚本将运行。如果有办法做到这一点，它也会非常有帮助。

谢谢。

Answer 1

由于您使用的是SharePoint 2013，我建议您考虑采用不同的方法，在SharePoint 2013中引入了一个所谓的Client Rendering Mode (CSR)，用于使用HTML和JavaScript呈现列表视图和表单。要了解CSR，请遵循以下文章：

如何使用CSR突出显示行

下面的示例演示了如何自定义列表视图以突出显示任务行（适用于分页视图）

模板代码：

SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {

   SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
     OnPostRender: function(ctx) {

       var statusColors =  {
          'Not Started' : '#FFF1AD',  
          'In Progress' : '#FFD800',
          'Completed' : '#01DF3A' 
       };

       var rows = ctx.ListData.Row;
       for (var i=0;i<rows.length;i++)
       {
          var status = rows[i]["Status"];
          var rowId = GenerateIIDForListItem(ctx, rows[i]);
          var row = document.getElementById(rowId); 
          row.style.backgroundColor = statusColors[status];
       }
     }
   }); 

});

注意：你必须指定正确的组名，因为在我的情况下我是使用名为Approvers
的组

如何应用更改

如何应用更改至少有两个选项：

使用JSLink property
通过Script Editor / Content Editor在页面上放置JavaScript模板网页零件

以下是使用第二个选项：

将页面切换到编辑模式
在列表视图Web部件正下方添加Script Editor webpart。
将指定的代码用script标记代码包装到脚本编辑器中，例如：<script type="text/javascript">{Template JS code goes here}</script>
保存页面

结果

enter image description here

Answer 2

CSR方法的缺点是你必须在某处添加一个JS文件，并从每个View Webpart配置JSLink。同一页面上一个列表上的两个视图也会导致问题。

另一种快速解决方法是将One Calculated Column中的所有逻辑设置为datatype = Number！所以它评估显示的HTML / JavaScript

=[Status]
&"<img src='/_layouts/images/blank.gif' onload=""
this.parentNode.parentNode.parentNode.style.backgroundColor='#"
&IF([Status]="Approved","01DF3A",
IF([Status]="Rejected","F90101",
IF([Status]="Pending","EAC117","")))
&"';}"">"

详细解释：http://viewmaster365.com/#/How

此方法的缺点：仅适用于不在表单中的视图，因此您必须隐藏表单中的计算列（或不将它们添加到ContentTypes）列排序不起作用（因为它不评估HTML / JS）

但是嘿..这是一个快速解决方案......并且在2010年也有效： - ）

如何为每个页面的共享点列表中的行代码着色？

2 个答案:

如何使用CSR突出显示行

如何应用更改

结果