JSLink - “所有项目”页面中的颜色代码行

问题描述

嗨。

我正在尝试使用JSLink为自定义列表中的每一行设置颜色。我将js文件上传到站点资源，编辑了AllItems.aspx页面，并在webpart属性中提供了JsLink选项提供的文件路径。但行不会改变颜色。

I am trying to use JSLink to set colors to each row in a custom list. I uploaded the js file to site assets, edited the AllItems.aspx page and in webpart properties JsLink option provided the path of the file. But the rows are not changing colors.

标题栏重命名为环境

我使用了以下代码：

<script src="/s/sitename/SiteAssets/jquery-3.3.1.min.js"></script>
<script type="text/javascript"> 

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

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

       var statusColors =  {
          'WW-0Y1' : '#FFF1AD',  
          'WW-0Y3' : '#FFD800'
                 };

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

});

</script>

如何解决此问题？

谢谢

推荐答案

请将以下代码添加到脚本中列表视图页面中的编辑器Web部件。

Please add the code below into a script editor web part in the list view page.

<script type="text/javascript"> 
SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {
	SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
		OnPostRender: function(ctx) {
			var statusColors =  {
				'WW-0Y1' : '#FFF1AD',  
				'WW-0Y3' : '#FFD800'
			};
			var rows = ctx.ListData.Row;
			for (var i=0;i<rows.length;i++){
				var status = rows[i]["Environment"];
				var rowId = GenerateIIDForListItem(ctx, rows[i]);
				var row = document.getElementById(rowId);
				if(row!=null){
					row.style.backgroundColor = statusColors[status];
				}				
			}
		}
	});
});
</script>

最好的问候，

Dennis

这篇关于JSLink - “所有项目”页面中的颜色代码行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！