Использование в проектах SharePoint библиотеки jqGrid

В 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

Вот и все....😄

В моем случае все прекрасно работает. Публикую эту информацию в надежде, что она может быть кому нибудь пригодится. А может быть, кто нибудь укажет мне на явные ошибки, что очень приветствуется😂.