javascript - 在 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 文件并且它从未收到它，这是否意味着永远不会调用后期渲染？

但是，为什么警报功能会运行？

但我也可能偏离了方向，所以希望在网络流程和 javascript 方面拥有更多知识的人可以帮助我解决这个问题吗？

Answer 1

指定的错误发生是因为在Quick Edit 模式下 ListView 呈现的方式与在默认模式下不同，这会导致以下选择器返回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 

因为在快速编辑模式下呈现 ListView 时，tr 元素不包含 id 属性。

下面显示了为默认和快速编辑模式检索行元素的函数:

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

最终示例

下面提供的示例演示了如何在默认和快速编辑模式下突出显示 ListView 中的行

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];
}

Gist: ListView_HighlightRows.js

结果

图 1. 快速编辑模式下的 ListView

图 2. ListView (默认模式)