Создание сервиса постраничной разбивки данных
Виджет "Постраничная разбивка" представляет собой группу элементов управления интерфейсом пользователя, которая позволяет разбивать данные по страницам и переключаться между страницами. Например, этот виджет можно использовать для отображения ограниченного числа строк из большого набора данных в виджете "Сетка". Если для таблицы данных, содержащей 30 строк, установить число результатов на странице равным 6, виджет "Постраничная разбивка" отобразит пять страниц. На первой странице отображаются строки с 1 по 6, а на второй - с 7 по 12. Однако этот виджет не включает функциональные возможности, позволяющие разбивать данные по страницам автоматически. Для постраничной разбивки данных для виджетов, таких как "Сетка", необходимо создать сервис постраничной разбивки данных с входными параметрами, которые можно привязать к виджету "Постраничная разбивка". В следующем разделе приведен пример выполнения постраничной разбивки набора данных, отображаемого в виджете "Расширенная сетка".
По умолчанию сетка одновременно отображает все строки данных, которые загружаются из связанной таблицы данных. В результате пользователи для поиска нужных данных вынуждены использовать прокрутку вверх или вниз. При загрузке большого набора данных отображаются полосы прокрутки, что негативно влияет на среду пользователя. Можно добавить виджет "Постраничная разбивка" для управления числом строк, отображаемых одновременно. Это позволит сэкономить место в компоновке мэшапа и упростить поиск определенных значений в наборе данных.
Создание сервиса постраничной разбивки данных
Перед добавлением виджета "Постраничная разбивка" в мэшап создайте сервис данных для постраничной разбивки строк данных в возвращаемой таблице данных.
1. В Composer создайте структуру данных и вещь для определения сервиса и возвращаемой таблицы данных.
2. Добавьте в структуру данных определения полей, чтобы определить столбцы таблицы данных.
3. Отредактируйте объект вещи, созданный на шаге 1, и на вкладке Сервисы щелкните Добавить.
4. Введите имя для сервиса, а затем в разделе Входные данные задайте следующие параметры.
◦ pageNumber - числовой параметр, используемый для хранения номера текущей страницы.
◦ pageSize - числовой параметр, который используется для задания числа строк, отображаемых на каждой странице.
◦ resultsNumber - числовой параметр, используемый для задания общего числа строк в таблице данных.
◦ query - параметр запроса, используемый для сохранения конфигурации фильтра для виджета "Расширенная сетка".
Эти входные параметры можно использовать для передачи данных из виджетов "Расширенная сетка" и "Постраничная разбивка" в сервис.
5. Определите пользовательский сервис данных в редакторе кода для постраничной разбивки данных таблицы данных. Используйте для справки следующий пример.
6. Нажмите кнопку Готово, затем сохраните объект.
В следующем разделе приведен пример сервиса постраничной разбивки.
Определите сервис данных
Определите данные таблицы данных для использования для постраничной разбивки. Можно загрузить данные из того же или другого сервиса. В этом примере для создания и постраничной разбивки данных используется один и тот же сервис. В следующем блоке кода определяется возвращаемая таблица данных и наименование структуры данных.
var params = {
infoTableName : "weatherData",
dataShapeName : "paginationDS"
};
paginatedInfotable = Resources["InfoTableFunctions"].CreateInfoTableFromDataShape(params);
infoTableName : "weatherData",
dataShapeName : "paginationDS"
};
paginatedInfotable = Resources["InfoTableFunctions"].CreateInfoTableFromDataShape(params);
Сервис постраничной разбивки данных должен включать следующие переменные.
• numberOfResults - общее число результатов в наборе данных. Это значение используется для расчета требуемого количества страниц.
• resultsPerPage - число строк данных, включаемых в таблицу данных для постраничной разбивки. Этот параметр задает количество результатов на каждой странице.
• currentPage - номер текущей страницы, который используется для определения диапазона строк данных, отображаемых из полного набора данных.
Каждое из этих значений можно загрузить из виджета "Постраничная разбивка" с помощью привязок к входным параметрам в сервисе. Следующий блок кода используется для генерации случайных значений данных для строк таблицы данных.
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 = 100;
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";
}
paginatedInfotable.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 = 100;
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";
}
paginatedInfotable.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 - переменная, которая используется для задания числа строк, создаваемых для таблицы данных.
Результат сохраняется в таблице данных с использованием метода AddRow. Следующий блок кода используется для расчета и постраничной разбивки строк данных, которые хранятся в таблице данных WeatherData.
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++;
}
Используйте функцию getRowCount, чтобы извлечь общее количество строк в таблице данных.
Во время выполнения при изменении номера страницы инициируется событие PageNumberChanged. Можно вычислить строки для отображения на каждой странице, используя следующие значения:
• Номер текущей страницы
• Число результатов, отображаемых на каждой странице
• Общее число результатов
Сервис постраничной разбивки работает посредством вычисления порядкового номера первой строки на каждой странице. Это позволяет задать начальную строку для номера текущей страницы. Чтобы вычислить номер первой строки для отображения на каждой странице, нужно вычесть 1 из номера текущей страницы, а затем умножить результат на значение размера страницы. При отображении результатов на нескольких страницах порядковый номер рассчитывается следующим образом.
startRow = pageNumber - 1 * pageSize
Используйте цикл for для перемещения по всем строкам данных, начиная с текущего порядкового номера, а затем добавьте приращение с использованием переменной, которая подсчитывает общее число результатов, отображаемых на странице. Значение общего числа является входным параметром, который можно привязать к виджету "Постраничная разбивка". Когда число результатов в переменной numAdded достигает определенного значения, цикл завершается.
В этом примере в сетке отображается 100 строк, возвращаемых из таблицы данных сервиса данных. Число результатов, отображаемых на каждой странице, равно 10. При изменении номера страницы сервис данных возвращает таблицу данных с уникальным набором строк, в зависимости от номера текущей страницы.
 |
С помощью входного параметра таблицы данных можно выполнить постраничную разбивку данных, загружаемых из других сервисов. В текущем примере данные изначально загружаются из одного и того же сервиса данных.
|
Последний блок кода сохраняет разбитые на страницы строки данных в таблице данных, присваивая значения paginatedResult переменной result.
paginatedInfotable = paginatedResult;
Возвращаемая таблица данных теперь обновляется на основе размера страницы и номера текущей страницы.
Добавление сервиса данных в мэшап
1. Щелкните значок "+" на панели Данные.
2. На левой панели выберите объект, который содержит сервис постраничной разбивки данных.
3. Добавьте сервис данных в список выбранных сервисов на правой панели.
4. Установите флажок Выполнить при загрузке для автоматического выполнения сервиса данных во время выполнения.
5. Щелкните Готово, чтобы закрыть диалоговое окно.
Сервис постраничной разбивки будет добавлен в мэшап.
Постраничная разбивка данных для виджета "Расширенная сетка"
Затем настройте виджеты и создайте все требуемые привязки. В этом примере виджет "Расширенная сетка" отображает строки данных из возвращаемой таблицы данных сервиса постраничной разбивки данных. На следующем рисунке показаны привязки данных для виджета "Расширенная сетка".
Свойство All Data сервиса данных привязано к свойству Data. Событие Filter используется для запуска сервиса GetPaginationData, а событие QueryFilter привязано к входному параметру Query сервиса. По умолчанию сетка отображает все данные из таблицы данных. Чтобы разбить по страницам данные для сетки, выполните следующие шаги.
1. Добавьте виджет "Постраничная разбивка" в контейнер на канве.
2. Выполните сервис постраничной разбивки данных с помощью следующих событий.
◦ Событие Loaded мэшапа.
◦ Событие Filter виджета "Расширенная сетка".
◦ Событие PageNumberChanged виджета "Постраничная разбивка".
3. Привяжите следующие свойства виджета "Постраничная разбивка" к параметрам сервиса данных.
◦ PageNumber - номер текущей страницы. Это свойство также можно использовать для задания начального номера страницы при загрузке мэшапа. По умолчанию номер страницы равен 1.
◦ PageSize - максимальное число строк данных, отображаемых на каждой странице.
◦ ResultsNumber - необязательное свойство, которое позволяет задать общее число результатов для постраничной разбивки.
На следующем рисунке показаны привязки между сервисом данных и виджетом "Постраничная разбивка".
| | Данные не хранятся в виджете "Постраничная разбивка" и используются только для генерации событий и предоставления значений параметров для сервиса постраничной разбивки данных. |
4. Щелкните Сохранить, а затем щелкните Просмотр мэшапа.
Просмотр виджета во время выполнения
Виджет "Расширенная сетка" отображает данные, возвращаемые сервисом данных. Виджет "Постраничная разбивка" показывает общее число результатов в таблице данных, а на каждой странице отображается 10 результатов. При нажатии кнопок перехода на следующую или предыдущую страницу для изменения текущей страницы сервис выполняется с помощью события PageNumberChanged и строки данных автоматически обновляются.