在Sharepoint 2013中使用Javascript的空引用类型错误

Question

在sharepoint 2013中存在javascript问题。我们已经设置了javascript，它通过更改任务列表中的行的颜色来工作。问题是当用户进入快速编辑，然后停止编辑，脚本停止运行，颜色被删除。这是剧本。

<script type = "text/javascript"> 
SPClientTemplates.TemplateManager.RegisterTemplateOverrides({ 
      OnPostRender: function(ctx) { 
      var rows = ctx.ListData.Row; 
      for (var i=0;i<rows.length;i++) 
      { 
       var high = rows[i]["Priority"] == "High"; 
       if (high) 
       { 
       var rowElementId = GenerateIIDForListItem(ctx, rows[i]); 
       var tr = document.getElementById(rowElementId); 
       tr.style.backgroundColor = "#F78181"; 
       } 
      } 
      for (var i=0;i<rows.length;i++) 
      { 
       var normal = rows[i]["Priority"] == "Normal"; 
       if (normal) 
       { 
       var rowElementId = GenerateIIDForListItem(ctx, rows[i]); 
       var tr = document.getElementById(rowElementId); 
       tr.style.backgroundColor = "#BCF5A9"; 
       } 
      } 
      for (var i=0;i<rows.length;i++) 
      { 
       var milestone = rows[i]["Priority"] == "Milestone"; 
       if (milestone) 
       { 
       var rowElementId = GenerateIIDForListItem(ctx, rows[i]); 
       var tr = document.getElementById(rowElementId); 
       tr.style.backgroundColor = "#F3F781"; 
       } 
      } 
      for (var i=0;i<rows.length;i++) 
      { 
       var goLive = rows[i]["Priority"] == "Go Live"; 
       if (goLive) 
       { 
       var rowElementId = GenerateIIDForListItem(ctx, rows[i]); 
       var tr = document.getElementById(rowElementId); 
       tr.style.backgroundColor = "#81B1F8"; 
       } 
      } 
      } 
     }); 
</script> 

这是它在页面加载时的样子。

（注：优先在表中，但已经从截图中删除它，因为它有一个用户在那里名称）

这是当我们在快速编辑模式...

这就是我们停止编辑时发生的情况。

我想帮助别人谁正在使用SharePoint。这不是我曾经使用过的语言，所以不知道如何解决问题。我所做的就是创建一些JS代码，对后期渲染做一个简单的提醒。这并没有引起任何问题。但是，一旦我们尝试处理表格内容，就会出现问题。猜测我认为SharePoint正在改变ID，所以JS脚本不再指向正确的对象？话虽如此，我试图写一些没有使用ID的javascript，只是改变了单元格的颜色，如果找到了特定的值，但停止编辑时不会发生任何事情。这是代码。

<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('High')"); 
$Text.css("background-color", "green"); 
$Text.css("font-weight", "bold"); 
$Text = $("td.ms-cellstyle.ms-vb2:contains('Normal')"); 
$Text.css("background-color", "red"); 
$Text.css("font-weight", "bold"); 
}); 
</script> 

我不知道这两种，但在所发生的事情，我可以看到，该计划正在等待一个GIF文件看，它从来没有收到它，这将意味着后期渲染不会被调用？

然而，为什么会报警功能，然后运行？

但是我也可以离开，所以希望有人在web进程和JavaScript的知识更多，可以帮助我解决这个问题？因为在快速编辑模式列表视图呈现不同然后在默认模式下发生

Answer 1

指定的错误，导致下面的选择器返回null：

var rowElementId = GenerateIIDForListItem(ctx, rows[i]); 
var tr = document.getElementById(rowElementId); //returns null in Quick Edit mode since tr element does not contain id attribute 

因为tr元素不包含id属性时列表视图以快速编辑模式呈现。

下面显示的功能，用于检索行元素为默认&快速编辑模式：

function getTableRow(ctx,row) 
{ 
    var rowElementId = GenerateIIDForListItem(ctx, row); 
    if(!ctx.inGridMode) 
     return document.getElementById(rowElementId); 
    return document.querySelectorAll('[iid="' + rowElementId + '"]')[0]; 
} 

最后一个例子

下面提供演示如何突出排在列表视图的例子默认和快速编辑模式

SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() { 
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides({ 
    OnPostRender: function(ctx) { 

      var colorMapping = {"High": "#F78181","Normal": "#81B1F8","Milestone": "#F3F781","Go Live": "#81B1F8"}; 

      var rows = ctx.ListData.Row; 
      for (var i=0;i<rows.length;i++) 
      { 
       var key = rows[i]["Priority"]; 
       var color = colorMapping[key]; 
       highlightRow(ctx, rows[i],color); 
      }    

    } 
    }); 
}); 


function highlightRow(ctx,row,color){ 
    var tr = getTableRow(ctx,row); 
    if(tr != null) 
     tr.style.backgroundColor = color; 
} 



function getTableRow(ctx,row) 
{ 
    var rowElementId = GenerateIIDForListItem(ctx, row); 
    if(!ctx.inGridMode) 
     return document.getElementById(rowElementId); 
    return document.querySelectorAll('[iid="' + rowElementId + '"]')[0]; 
} 

要点：ListView_HighlightRows.js

结果

产品图1.列表视图中快速编辑模式

产品图2.列表视图（默认模式）