Sharepoint Listview Javascript turn行颜色

Question

我是SharePoint的新手，几乎从未使用过JavaScript。我已经写了一个简短的脚本，只是为了测试，它应该会把每一行都变成黄色(在Edit web part下，我给了Listview脚本的位置。

当我查看调试器时，它似乎看到了脚本，但什么也没有发生。最后，我想让它根据列表视图中的值更改颜色。但目前我只想让一些东西正常工作。

(function () {
    var overrideCtx = {};

    overrideCtx.Templates = {};

    overrideCtx.Templates.fields = {'Contractdaysleft': { 'View' : HighlightRowOverride }};


    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

function HighlightRowOverride(inCtx) {

    for (var i = 0; i < inCtx.ListData.Row.length; ++i) {
        var listItem = inCtx.ListData.Row[i];

        var idd = GenerateIIDForListItem(inCtx, listItem);

        var row = document.getElementId(idd);

        row.style.backgroundColor = "yellow";

    } 
}

Answer 1

模板声明中存在拼写错误，您需要将overrideCtx.Templates.fields更改为overrideCtx.Templates.Fields

模板骨架提供如下：

SPClientTemplates.TemplateManager.RegisterTemplateOverrides({ // OnPreRender:函数(Ctx){ }，模板：{ //视图:函数(Ctx){ return ""；}，//表头:函数(Ctx){ return ""；}，// Body:函数(Ctx){ return ""；}，//分组:函数(Ctx){ return ""；}，//项:函数(Ctx){ return ""；}，//字段：{ // ""：{ //查看:函数(Ctx){ return ""；}，// EditForm:函数(Ctx){ return ""；}，// DisplayForm:函数(Ctx){ return ""；}，// NewForm:函数(Ctx){ return ""；} // } // }，// Footer: function(ctx) { return ""；} }，// OnPostRender: function(ctx) { }，})；

从另一方面来说，语法：

Templates: {
      //     Fields: {
      //         "<field internal name>": {
      //             View: function(ctx) { return ""; }
      //         }
      //     }
 }

通常用于自定义列表视图中特定字段的显示。

为了突出显示列表视图行，我建议使用一种稍微不同的方法(通过OnPostRender事件)，如下所示

在列表视图中突出显示行的模板示例

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

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

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

});

结果

​

​