Question

我是SharePoint新手，几乎从未使用过JavaScript。我编写了一个简短的脚本来测试，它应该将每一行变成黄色（在编辑Web部件下，我给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: function(ctx) { },

  Templates: {

  //     View: function(ctx) { return ""; },
  //     Header: function(ctx) { return ""; },
  //     Body: function(ctx) { return ""; },
  //     Group: function(ctx) { return ""; },
  //     Item: function(ctx) { return ""; },
  //     Fields: {
  //         "<field internal name>": {
  //             View: function(ctx) { return ""; },
  //             EditForm: function(ctx) { return ""; },
  //             DisplayForm: function(ctx) { return ""; },
  //             NewForm: function(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";
       }
     }
   }); 

});

<强>结果

Sharepoint Listview Javascript变成行颜色

1 个答案: