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

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

下面显示的功能是检索 default＆amp;的行元素。快速编辑模式：

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.列表视图（默认模式）

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

1 个答案: