Изменения цвета строк по содержимому ячеек в SharePoint 2013 с помощью javascript

Теги: SharePoint,Customization SharePoint 2013,SharePoint 2013

Сегодня я делаю стилизацию таблиц, это помогает воспринимать информацию в больших таблицах.

В моей таблице один уровень группировки, и скрипт вставлен в веб-часть. В результате получится примерно так:

Требуется jquery, но при желании можно обойтись без jquery, достаточно использовать javascript.

Файлы библиотеки jquery у меня хранится в активах сайта.

Привожу полный код с комментариями, который нужно вставить в веб-часть на странице списка.

Думаю многие знают как вставить веб-часть на страницу (представление списка AllItems.aspx). Нажать на шестеренку в верхнем правом углу окна браузера, в выпадающем списке выбрать пункт Изменить страницу, далее нажать на Добавить веб честь,
Веб-часть называется редактор сценариев. Она находится в категории среда и контент.

теперь достаточно вставить следующий код и все должно заработать.

красным цветом я выделил строки для которой нужнен jquery.

активы сайта можно найти на странице контента сайта SharePoint.

<script src="http://sharepoint/SiteAssets/jquery/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function () {

var listView = getElementsByClass("ms-listviewtable"); //get the list on the page

var columnIndexToSearch = 10; // индеск колоноки в которой будет искомая страка
var columnSpan = 13; // количество колонок в таблице
var j = 0;
var i = 0;
var cellcounter = 0;
var tRows;

        // для всех группировок
        for( chld = 6; chld < listView[0].childNodes.length; chld++)
        {
       
            id_row = listView[0].childNodes[chld].id;
            // группы содержат два символа _ ищем эти символы в идентификаторе элемента
            if(id_row.indexOf("__") >= 0) {
               
               
                // ---------- начало обработки
               
                tRows = listView[0].childNodes[chld].childNodes;   
                //console.dir(listView);
                //console.log('количество строк: ' + tRows.length);
                for( j = 0; j < tRows.length; j++)
                {
                    //console.log('className строки ' + j + ': ' + tRows[j].className);
                  var x = tRows[j].childNodes; // find all of the TRs
                  for (i = 0; i < x.length; i++)
                  {
                   if( cellcounter == columnIndexToSearch)
                   {
                    /*if (x[i].innerHTML.indexOf("In Progress") >= 0)
                    {
                     x[i].parentNode.style.backgroundColor='lightgreen';
                    }

                    else if (x[i].innerHTML.indexOf("Completed") >= 0)
                    {
                     x[i].parentNode.style.backgroundColor='lightblue';
                    }

                    else if (x[i].innerHTML.indexOf("Deferred") >= 0)
                    {
                     x[i].parentNode.style.backgroundColor='lightgrey';
                    }

                    else if (x[i].innerHTML.indexOf("Waiting on someone else") >= 0)
                    {
                     x[i].parentNode.style.backgroundColor='orange';
                    }*/
                    if (!$.trim(x[i].innerHTML).length)
                    {
                     x[i].parentNode.style.backgroundColor='#faf2cc';
                    }
                    else {
                        x[i].parentNode.style.backgroundColor='#dff0d8';
                    }
                  }

                   cellcounter++;
                   if( cellcounter >= columnSpan)
                   {
                    cellcounter = 0;
                   }
                  }
                }

                function getElementsByClass(searchClass, node, tag)
                {

                 var classElements = new Array();
                 if ( node == null )
                  node = document;
                 if ( tag == null )
                  tag = '*';
                 var els = node.getElementsByTagName(tag);
                 var elsLen = els.length;
                 var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
                 for (i = 0, j = 0; i < elsLen; i++)
                 {
                  if ( pattern.test(els[i].className) )
                  {
                   classElements[j] = els[i];
                   j++;
                  }
                 }
                 return classElements;
                }
                //----------- конец обработки
            }
        }

 
});

</script>