В SharePoint 2013(2016) для отображения элементов списка используется Client Side Rendering (CSR). Работа на стороне клиента в первую очередь гарантирована методами clienttemplates.js. Для нормальной работы сайтов на SharePoint этого вполне может быть достаточно, но очень часто возникают нестандартные ситуации, решение которых потребует подключить к проекту библиотеки сторонних разработчиков.
Сегодня я хотел бы показать небольшой пример работы с библиотекой
jqGrid. Это JavaScript-элемент с поддержкой Ajax, который предоставляет решения для показа и обработки табличных данных в Интернете.
Предположим, у нас имеется очень простой список (
SPList) PMBirthdayBoys (ПМ-Именинники). В него, кроме обязательных столбцов, добавлен один столбец - BirthdayBoy, тип
SPUser. Данные этого списка нужно показать в отдельном окне
JQuery Dialog.
Следующий ниже JavaScript-метод легко решает эту задачу:
function GetDataPM(ListTitle) {
var url = _spPageContextInfo.siteAbsoluteUrl +
"/_api/web/lists/getByTitle('" + ListTitle + "')/items?" +
"$select=Id,BirthdayBoy/Title,BirthdayBoy/Department,"+
BirthdayBoy/EMail,BirthdayBoy/JobTitle,"+
BirthdayBoy/Name&" +
"$expand=BirthdayBoy/Id,BirthdayBoy/Picture&" +
"$orderby=Id desc";
var wWidth = $(window).width(), wHeight = $(window).height(),
ContainetID = "InformersID", TableID = "Table_" + ContainetID;
$('body').append($('<div />').attr('id', ContainetID).css('background-color', 'white')
.addClass('my-dialog')
.append($('<div />').addClass('main-forms-dialog')));
//-----------------------------
SetDocData_pm(url, function (data) {
var data_res = data.results;
if (data_res.length > 0) {
var grid = $("#" + TableID), dialog = $('#' + ContainetID);
dialog.dialog({
buttons: [{
text: "Закрыть", click: function () {
$(this).dialog('close');
}
}
],
height: wHeight,
width: wWidth,
closeText: "",
modal: true,
title: "Форма уведомлений",
show: "slide",
hide: "slide",
resizable: true,
create: function (event, ui) { },
open: function () {
$('#' + ContainetID).remove('#' + TableID).children('div')
.append($('<div />').attr('id', 'jqGridPager')
.addClass('main-forms-col-dialog padding-10')).append($('<table />')
.attr('id', TableID));
var grid = $("#" + TableID);
//----------------------
grid.jqGrid({
regional: "ru",
data: data_res,
datatype: "local",
rowList: [],
pgbuttons: false,
pgtext: null,
viewrecords: true,
pager: "#jqGridPager",
colMenu: true,
height: wHeight * 0.7,
width: wWidth * 0.9,
rownumbers: true,
sortname: "invdate",
sortorder: "desc",
colModel: [
{ name: "Id", width: 30, formatter: "integer", hidden: true,
colmenu: false, key: true, index: "Id" },
{ name: "BirthdayBoy.EMail", label: "EMail", colmenu: false },
{ name: "BirthdayBoy.Title", label: "Именинник", colmenu: false },
{ name: "BirthdayBoy.JobTitle",
label: "Должность", colmenu: false },
{ name: "BirthdayBoy.Department",
label: "Место работы", colmenu: false },
{ name: "BirthdayBoy.Name", label: "Логин", colmenu: false }
]
})
.jqGrid("navGrid", "#jqGridPager", { edit: false, add: false,
del: false, search: true, refresh: false, view: false,
position: "left", cloneToTop: true })
.jqGrid("gridResize")
.jqGrid("navButtonAdd", "#jqGridPager", {
buttonicon: "ui-icon-mail-open",
title: "Поздравить именинника",
caption: "Поздравить",
position: "next",
onClickButton: function () {
var rowid = grid.jqGrid("getGridParam", "selrow");
if (rowid) {
var getCell_Id = grid.jqGrid('getCell', rowid, 'Id');
//--что то делаем здесь
}
else {
alert("Строка не выделена. Необходимо установить курсор мыши на строку таблицы.");
}
}
});
},
close: function () { $('body').find('#' + ContainetID).remove(); }
});
}
else {
alert("Список «Именинник» пустой...");
}
}, true);
Метод
GetDataPM принимает имя списка. Далее выполняет запрос об указанном в списке пользователе, выясняет его электронный адрес, имя, логин и место работы (все эти данные хранятся в базе профилей пользователей SP). Инициализирует jqGrid таблицу, загружает туда полученные с сервера данные и сохраняет все это в форме JQuery Dialog
Вот и все....😄
В моем случае все прекрасно работает. Публикую эту информацию в надежде, что она может быть кому нибудь пригодится. А может быть, кто нибудь укажет мне на явные ошибки, что очень приветствуется😂.
