在 Sharepoint 2013 中使用 Javascript 时出现空引用类型错误

Question

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

<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>

这是页面加载时的样子。

（注意：优先级在 table 中，但已将其从屏幕截图中删除，因为它上面有用户名）

这是我们处于快速编辑模式时...

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

我正在努力帮助使用 Sharepoint 的人。这不是我曾经使用过的语言，所以真的不知道如何解决问题。我所做的是创建一些 JS 代码，在 post 渲染上做一个简单的警报。这没有引起任何问题。但是，当我们尝试处理 table 内容时，问题就出现了。我猜测我认为 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 文件并且它从未收到它，这是否意味着 post 渲染永远不会叫什么？

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

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

Answer 1

发生指定的错误是因为在 快速编辑 模式下列表视图的呈现方式与默认模式下的呈现方式不同，这会导致以下选择器 return 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];
}

Gist: ListView_HighlightRows.js

结果

图1.快速编辑模式下的列表视图

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

在 Sharepoint 2013 中使用 Javascript 时出现空引用类型错误

Null Reference Type Error using Javascript in Sharepoint 2013

javascript

nullreferenceexception

sharepoint-2013