Создание сервиса постраничной разбивки данных
Виджет "Постраничная разбивка" представляет собой группу элементов управления интерфейсом пользователя, которая позволяет разбивать данные по страницам и переключаться между страницами. Например, этот виджет можно использовать для отображения ограниченного числа строк из большого набора данных в виджете "Сетка". Если для таблицы данных, содержащей 30 строк, установить число результатов на странице равным 6, виджет "Постраничная разбивка" отобразит пять страниц. На первой странице отображаются строки с 1 по 6, а на второй - с 7 по 12. Однако этот виджет не включает функциональные возможности, позволяющие разбивать данные по страницам автоматически. Для постраничной разбивки данных для виджетов, таких как "Сетка", необходимо создать сервис постраничной разбивки данных с входными параметрами, которые можно привязать к виджету "Постраничная разбивка". В следующем разделе приведен пример выполнения постраничной разбивки набора данных, отображаемого в виджете "Сетка".
По умолчанию сетка одновременно отображает все строки данных, которые загружаются из связанной таблицы данных. Когда загружен большой набор данных, появляются полосы прокрутки и пользователям приходится выполнять прокрутку для поиска нужных данных. Такая компоновка делает работу пользователя менее удобной. Можно добавить виджет "Постраничная разбивка" для управления числом строк, отображаемых одновременно. Это позволит сэкономить место в компоновке мэшапа и упростить поиск определенных значений в наборе данных.
Пример. Создание сервиса постраничной разбивки данных
Можно загрузить данные из того же или другого сервиса. В этом примере для создания и постраничной разбивки данных используется один и тот же сервис. Можно также создать два отдельных сервиса данных, чтобы создать данные сетки и применить разбивку на страницы. Чтобы создать требуемые сервисы и сущности для постраничной разбивки, выполните следующие шаги.
1. В Composer создайте следующие сущности:
◦ Сущность вещи для сохранения сервиса постраничной разбивки данных.
◦ Структура данных для определения родительской таблицы данных, которая содержит числовое свойство numberOfRows и вложенную таблицу данных.
◦ Структура данных для определения вложенной таблицы данных, содержащей данные сетки.
2. Добавьте определения полей в структуры данных, созданные на предыдущем шаге, чтобы определить столбцы для каждой таблицы данных.
3. Отредактируйте объект вещи, созданный на шаге 1, и на вкладке Сервисы щелкните Добавить.
4. Введите имя для сервиса, а затем в разделе Входные данные задайте следующие параметры.
◦ pageNumber - числовой параметр, используемый для хранения номера текущей страницы.
◦ pageSize - числовой параметр, который используется для задания числа строк, отображаемых на каждой странице.
◦ numberOfResults - числовой параметр, используемый для задания общего числа строк в таблице данных. Задайте значение по умолчанию 100.
◦ query - параметр запроса, используемый для сохранения конфигурации фильтра для виджета "Расширенная сетка".
Эти входные параметры можно использовать для передачи в сервис данных из виджетов "Сетка" и "Постраничная разбивка".
5. Определите пользовательский сервис в редакторе кода для постраничной разбивки данных таблицы данных. Используйте для справки следующий пример.
6. Нажмите кнопку Готово, затем сохраните объект.
Ниже приведен пример сервиса постраничной разбивки. Первый блок кода определяет две таблицы данных, используемые для хранения данных сервиса.
let result = Resources["InfoTableFunctions"].CreateInfoTableFromDataShape({
infoTableName: "InfoTable",
dataShapeName: "PaginationInfotable",
});
let GridData = Resources["InfoTableFunctions"].CreateInfoTableFromDataShape({
infoTableName: "InfoTable",
dataShapeName: "WeatherData",
});
infoTableName: "InfoTable",
dataShapeName: "PaginationInfotable",
});
let GridData = Resources["InfoTableFunctions"].CreateInfoTableFromDataShape({
infoTableName: "InfoTable",
dataShapeName: "WeatherData",
});
Вторая таблица данных содержит данные сетки, а первая таблица данных используется, чтобы включать в нее как общее число строк во вложенной таблице данных, так и данные, отображаемые в сетке.
Следующий блок кода используется для генерации случайных значений данных для строк таблицы данных.
function randomDate(start, end) {
function randomValueBetween(min, max) {
return Math.random() * (max - min) + min;
}
var date1 = start || "01-01-1970";
var date2 = end || new Date().toLocaleDateString();
date1 = new Date(date1).getTime();
date2 = new Date(date2).getTime();
if (date1 > date2) {
return new Date(randomValueBetween(date2, date1)).toLocaleDateString();
} else {
return new Date(randomValueBetween(date1, date2)).toLocaleDateString();
}
}
var rows = numberOfResults;
var num = 1;
var img = "/Thingworx/MediaEntites/sunny";
let dateT = randomDate("01/01/2010", "01/01/2022");
for (var i = 0; i < rows; i++) {
date = randomDate("01/01/2010", "01/01/2022");
if (i % 5 == 1) {
img = "/Thingworx/MediaEntities/cloudy";
} else if (i % 5 == 2) {
img = "/Thingworx/MediaEntities/rain";
} else if (i % 5 == 3) {
img = "/Thingworx/MediaEntities/snow";
}
GridData.AddRow({
number: num,
name: "The result number is:" + i,
date: new Date(dateT),
location: "-75.617798, 40.028035, 0",
image: img,
});
num++;
}
function randomValueBetween(min, max) {
return Math.random() * (max - min) + min;
}
var date1 = start || "01-01-1970";
var date2 = end || new Date().toLocaleDateString();
date1 = new Date(date1).getTime();
date2 = new Date(date2).getTime();
if (date1 > date2) {
return new Date(randomValueBetween(date2, date1)).toLocaleDateString();
} else {
return new Date(randomValueBetween(date1, date2)).toLocaleDateString();
}
}
var rows = numberOfResults;
var num = 1;
var img = "/Thingworx/MediaEntites/sunny";
let dateT = randomDate("01/01/2010", "01/01/2022");
for (var i = 0; i < rows; i++) {
date = randomDate("01/01/2010", "01/01/2022");
if (i % 5 == 1) {
img = "/Thingworx/MediaEntities/cloudy";
} else if (i % 5 == 2) {
img = "/Thingworx/MediaEntities/rain";
} else if (i % 5 == 3) {
img = "/Thingworx/MediaEntities/snow";
}
GridData.AddRow({
number: num,
name: "The result number is:" + i,
date: new Date(dateT),
location: "-75.617798, 40.028035, 0",
image: img,
});
num++;
}
Цикл for применяется для создания строк таблицы данных с использованием случайных дат с дополнительными значениями из следующих переменных.
• num - номер строки.
• name - строка, отображающая отсчитываемый от нуля порядковый номер каждой строки.
• date - содержит случайную дату, которая генерируется с помощью функции randomDate.
• img - содержит ссылку на медиаобъект для отображения.
• location - строка с координатами расположения, разделенными запятыми.
• rows - переменная, которая используется для задания числа строк, создаваемых для таблицы данных.
Результат сохраняется во вложенной таблице данных GridData с помощью метода AddRow. Чтобы создать родительскую таблицу данных с использованием свойства numberOfResults, добавьте следующую строку:
result.AddRow({numberOfResults: rows, GridData: GridData});
Следующий блок кода используется для расчета и постраничной разбивки строк данных, которые хранятся в таблице данных GridData.
var paginatedResult = Resources["InfoTableFunctions"].CreateInfoTableFromDataShape(params);
var numRows = paginatedInfotable.getRowCount();
var startRow = (pageNumber > 0 ? pageNumber - 1 : 0) * pageSize;
var numAdded = 0;
for (var r = startRow; r < numRows && numAdded < pageSize; r++) {
paginatedResult.addRow(paginatedInfotable.getRow(r));
numAdded++;
}
var numRows = paginatedInfotable.getRowCount();
var startRow = (pageNumber > 0 ? pageNumber - 1 : 0) * pageSize;
var numAdded = 0;
for (var r = startRow; r < numRows && numAdded < pageSize; r++) {
paginatedResult.addRow(paginatedInfotable.getRow(r));
numAdded++;
}
Сервис должен использовать значения следующих входных параметров:
• numberOfResults - общее число результатов в наборе данных. Это значение используется для расчета требуемого числа страниц. Это значение можно привязать из других сервисов, виджета или функции.
• resultsPerPage - число строк данных, включаемых в таблицу данных для постраничной разбивки. Этот параметр задает количество результатов на каждой странице.
• currentPage - номер текущей страницы, который используется для определения диапазона строк данных, отображаемых из полного набора данных.
Во время выполнения при изменении номера страницы инициируется событие PageNumberChanged. Можно вычислить строки для отображения на каждой странице, используя следующие значения:
• Номер текущей страницы
• Число результатов, отображаемых на каждой странице
• Общее число результатов
Сервис постраничной разбивки используется для расчета порядкового номера первой строки на каждой странице. Это позволяет задать начальную строку для номера текущей страницы. Чтобы вычислить номер первой строки для отображения на каждой странице, нужно вычесть 1 из номера текущей страницы, а затем умножить результат на размер страницы. При отображении результатов на нескольких страницах порядковый номер рассчитывается следующим образом.
startRow = pageNumber - 1 * pageSize
Используйте цикл for для перемещения по всем строкам данных, начиная с текущего порядкового номера, а затем добавьте приращение с использованием переменной, которая подсчитывает общее число результатов, отображаемых на странице. Значение общего числа является входным параметром, который также можно привязать к виджету "Постраничная разбивка" как выходные данные. Когда число результатов в переменной numAdded достигает определенного значения, цикл завершается.
В этом примере в сетке отображается 100 строк, возвращаемых из таблицы данных сервиса данных. Число результатов, отображаемых на каждой странице, равно 10. При изменении номера страницы сервис данных возвращает таблицу данных с уникальным набором строк, в зависимости от номера текущей страницы.
 |
С помощью входного параметра таблицы данных можно выполнить постраничную разбивку данных, загружаемых из других сервисов. В текущем примере данные изначально загружаются из одного и того же сервиса данных.
|
Последний блок кода сохраняет разбитые на страницы строки данных во вложенной таблице данных, присваивая значения paginatedResult переменной GridData.
GridData = paginatedResult;
Возвращаемая таблица данных теперь обновляется на основе размера страницы и номера текущей страницы. На следующем рисунке показано содержимое таблицы данных, если для numberOfResults задано значение 100.
Добавление сервиса "Постраничная разбивка" в мэшап
1. Щелкните значок "+" на панели Данные.
2. На левой панели выберите объект, который содержит сервис постраничной разбивки данных.
3. Добавьте сервис данных в список выбранных сервисов на правой панели.
4. Установите флажок Выполнить при загрузке для выполнения сервиса данных при первоначальной загрузке мэшапа во время выполнения.
5. Щелкните Готово, чтобы закрыть диалоговое окно.
Сервис постраничной разбивки будет добавлен в мэшап.
Постраничная разбивка данных для виджета "Сетка"
Затем настройте виджеты и создайте все требуемые привязки. В этом примере виджет "Сетка" отображает строки данных из вложенной таблицы данных сервиса постраничной разбивки. На следующем рисунке показаны привязки данных для виджета "Сетка".
Свойство GridData таблицы данных сервиса данных привязано к свойству Data виджета "Сетка". Событие Filter используется для запуска сервиса GetPaginationData, а событие QueryFilter привязано к входному параметру Query сервиса. По умолчанию сетка отображает все данные из таблицы данных. Чтобы разбить по страницам данные для сетки, выполните следующие шаги.
1. Добавьте виджет "Постраничная разбивка" в контейнер на канве.
2. Выполните сервис постраничной разбивки данных с помощью следующих событий.
◦ Событие Loaded мэшапа.
◦ Событие Filter виджета "Сетка".
◦ Событие PageNumberChanged виджета "Постраничная разбивка".
3. Привяжите следующие свойства виджета "Постраничная разбивка" к входным параметрам сервиса данных.
◦ PageNumber - номер текущей страницы. Это свойство также можно использовать для задания начального номера страницы при загрузке мэшапа. По умолчанию номер страницы равен 1.
◦ PageSize - максимальное число строк данных, отображаемых на каждой странице.
| | Данные не хранятся в виджете "Постраничная разбивка" и используются только для генерации событий и предоставления значений параметров для сервиса постраничной разбивки данных. |
4. Привяжите свойство ResultsNumber из источника таблицы данных к свойству ResultsNumber виджета.
На следующем рисунке показаны привязки между сервисом данных и виджетом "Постраничная разбивка".
5. Можно также добавить виджет, чтобы позволить пользователям указать число результатов, отображаемых в сетке, с помощью входного параметра numberOfResults сервиса данных.
6. Щелкните Сохранить, а затем щелкните Просмотр мэшапа.
Просмотр виджета во время выполнения
Виджет "Сетка" отображает данные, возвращаемые сервисом данных. Виджет "Постраничная разбивка" показывает общее число результатов в таблице данных, а на каждой странице отображается 10 результатов. При нажатии кнопок перехода на следующую или предыдущую страницу для изменения текущей страницы сервис выполняется с помощью события PageNumberChanged и строки данных автоматически обновляются.