Color rows when "group by" sharepoint 2013

Question

I need some help. I'm trying to set color when group by in a sharepoint list.

I'm using the following code

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

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

   var statusColors =  {
      'Liberada' : '#FFF1AD',  
      'Cancelada' : '#FFD800',
      'Créditos' : '#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];
   }
 }

});

});

Can someone give a hint?

Answer 1

正如我在本地Sharepoint 2013环境中所看到的，当我使用group by创建视图时，Sharepoint会在包含组名的表格单元格上添加名为«ms-gb»的CSS类。

了解这一点，解决方案是编辑视图的页面。

然后，您可以向页面添加脚本编辑器Webpart。

在此脚本编辑器Webpart中，您可以添加一些JavaScript代码来添加背景颜色。

例如：

<script>
$(document).ready(function(){
    var statusNames = ['Liberada', 'Cancelada', 'Créditos'];
    var statusColors = {
      'Liberada' : '#FFF1AD',  
      'Cancelada' : '#FFD800',
      'Créditos' : '#01DF3A' 
    };
    $('td.ms-gb').each(function(){
        for (var x=0;x<statusNames.length;x++) {
            if ($(this).text().indexOf(statusNames[x]) > -1) {
                $(this).css('background-color',statusColors[statusNames[x]]);
            }
        }       
    });
});
</script>

如果您尝试使用此脚本并且您的母版页或页面布局中尚未引用JQuery，则需要在脚本编辑器webpart中添加一个。

您可以下载JQuery的本地副本或使用托管类似的：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

希望得到这个帮助。