Null Reference Type Ошибка при использовании Javascript в Sharepoint 2013

Question

Ошибка с javascript в sharepoint 2013. Мы настроили 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 меняет идентификатор, поэтому сценарий JS больше не указывает на правильный объект? Сказав, что я попытался написать некоторый 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 атрибут когда просмотр списка отображается в режиме быстрого редактирования.

Ниже приведена функция для извлечения строк элемента для по умолчанию & Быстрый режим Edit:

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

Результаты

Pic 1. Просмотр списка в режиме быстрого редактирования

Pic 2. Просмотр списка (режим по умолчанию)