Сегодня, в продолжении темы jQuery + SharePoint 2013 Part 1, я поделюсь своими наработками в применении javascript в представлениях списка.
задачи:
Первая задача – выделение жирным одно поле.
Задача два – форматирование в зависимости от значения поля.
Задача три – выделить цветом просроченные.
Задача четыре – статистика по выполнению.
вот полученный результат
Первая
задача – выделение жирным одно поле.
Переопределяем
шаблон отображения
(function () {
var overrideCtx = {};
overrideCtx.Templates = {};
// выделяем жирным поле Created, используем internalName поля
overrideCtx.Templates.Fields = {
'Created': { 'View' : '<#=ctx.CurrentItem.Created#>' },
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();
Задача
два – форматирование в зависимости от значения поля
Добавляем
функцию форматирования
function FormattingRow (inCtx)
{
for (var i =0; i< inCtx.ListData.Row.length; ++i)
{
var listItem = inCtx.ListData.Row[i];
var iid = GenerateIIDForListItem(inCtx, listItem);
var row = document.getElementById(iid);
if (listItem.Status == "Отложенные")
{
if (row != null)
row.style.backgroundColor = "rgba(253,213,152,1)";
}
if (listItem.Status == "В работе")
{
if (row != null)
row.style.backgroundColor = "rgba(201,245,206,1)";
}
}
inCtx.skipNextAnimation = true;
}
Для ее вызова
добавляем
добавляем
overrideCtx.OnPostRender = [ FormattingRow ];
перед
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
В предыдущем примере
Задача
три – выделить цветом просроченные
Для
этого нам нужно сравнить текущее время машины с значением поля дата в SharePoint. Но так как поле в SharePoint имеет вид dd.mm.yyyy 00:00
а в javascript текущее время имеет вид Fri Oct 31 09:43:13 UTC+0300 2014.
Нам
нужно преобразрование даты SharePoint в занчение даты с котоым работает
javascript.
В
начале я распарсил значение поля а потом значения передал в функцию которая
преобразует в требуемый формат
function getDateTime(itemData) {
// из даты SP фирмируем дату для корректного сравнения
var arrDate = (itemData.replace(' ','.')).split('.')
var arrTime = arrDate[3].split(':')
var yar = arrDate[2]
var month = arrDate[1]-1
var day = arrDate[0]
var hours = arrTime[0]
var minute = arrTime[1]
var dateTime = new Date (yar,month,day,hours,minute,0)
return dateTime;
}
При
вызове функции передаем значение поля SharePoin и получаем в ответ требуемое
значение даты и времени.
Задача
четыре – статистика по выполнению
Так
как у нас форматирование (окрашивание просроченных и в зависимости от статуса)
проходит циклом по всем элементам вебчасти. То можно добавить переменные для
подсчета количестава (это не сложно). Но возник опрос куда и ка вывести
полученные данные и я решил менять название вебчасти.
Название
можно получить
var titleWP = $( '#WebPartCaption… ').parent().text()
но
что делать, когда на странице несколько веб частей?
У
каждой веб-части на странице есть свой уникальный wpq, вот получив его мы и
можем потом поменять название у конкретной веб-части.
Его
получить можно - inCtx.wpq
Так
вызвать функцию по смене названия
var statistics = 'Всего заявок - ' + allCount +', В работе - ' + workCount + ', Отложенных - ' + deferredCount +', Просроченных - ' +overdueCount
setWPTitle(statistics, inCtx.wpq)
вот
функция смены названия
function setWPTitle(stat, wpq)
{
// изменяем название вебчасти
var newWPQ = '#WebPartCaption'+ wpq // получаем текущую вебчасть
var newTitleWP = ': '+ stat //формируем новое название
$(newWPQ).text(newTitleWP)
}
В веб-частях можно включить ajax и все будет работать. при обновлении содержимого веб-части происходить обновления и цвета и статистики.
Вот весь код :
(function () {
var overrideCtx = {};
overrideCtx.Templates = {};
// выделяем жирным
overrideCtx.Templates.Fields = {
//'Created': { 'View' : '<#=ctx.CurrentItem.Created#>' },
'DueDate1': { 'View' : '<#=ctx.CurrentItem.DueDate1#>' }
};
overrideCtx.OnPostRender = [ FormattingRow ];
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();
function FormattingRow (inCtx)
{
var deferredCount = 0
var workCount = 0
var overdueCount = 0
var allCount = 0
for (var i =0; i< inCtx.ListData.Row.length; ++i)
{
allCount = allCount+1
var listItem = inCtx.ListData.Row[i];
var iid = GenerateIIDForListItem(inCtx, listItem);
var row = document.getElementById(iid);
var now = new Date() // получаем текущую дату
var itemData = getDateTime(listItem.DueDate1)
if (itemData < now )
{
overdueCount = overdueCount + 1
if (row != null)
row.style.backgroundColor = "rgba(255, 0, 0, 0.5)"; //red
}
else
{
if (listItem.Status == "Отложенные")
{
deferredCount = deferredCount + 1
//alert("listItem.Status");
//row.style.backgroundColor = "rgba(255, 0, 0, 0.5)";
if (row != null)
row.style.backgroundColor = "rgba(253,213,152,1)";
}
if (listItem.Status == "В работе")
{
workCount = workCount + 1
if (row != null)
row.style.backgroundColor = "rgba(201,245,206,1)";
}
}
}
var statistics = 'Всего заявок - ' + allCount +', В работе - ' + workCount + ', Отложенных - ' + deferredCount +', Просроченных - ' +overdueCount
// alert (statistics)
setWPTitle(statistics, inCtx.wpq)
inCtx.skipNextAnimation = true;
}
function setWPTitle(stat, wpq)
{
// изменяем название вебчасти
var newWPQ = '#WebPartCaption'+ wpq // получаем текущую вебчасть
var newTitleWP = ': '+ stat //формируем новое название
$(newWPQ).text(newTitleWP)
}
function getDateTime(itemData) {
// из даты SP фирмируем дату для корректного сравнения
var arrDate = (itemData.replace(' ','.')).split('.')
var arrTime = arrDate[3].split(':')
var yar = arrDate[2]
var month = arrDate[1]-1
var day = arrDate[0]
var hours = arrTime[0]
var minute = arrTime[1]
var dateTime = new Date (yar,month,day,hours,minute,0)
return dateTime;
}
Релевантные ссылки:
Свойство полей readonly и disabled в формах NewForm и EditForm (jQuery + SharePoint 2013 Fields Part 1)
Работа с полями элемента с помощью jQuery (jQuery + SharePoint 2013 Fields Part 3)
Работа с полями элемента с помощью jQuery в EditForm (jQuery + SharePoint 2013 Fields Part 4)
Комментариев нет:
Отправить комментарий