Урок 9. SapUI5: Форматирование (Formatter). Сортировка и фильтрация.

Размещен в sapui5 27.12.2017 17:51
Теги: , , , , , ,

Продолжим знакомиться с особенностями SapUI5. Сегодня посмотрим возможности форматирования данных, сортировку и фильтрацию данных модели. Поехали!

Форматирование (Formatter).

Форматирование даты в SapUI5:

Часто возникает необходимость вывести дату. И не просто вывести, а вывести дату в определенном формате.
Возьмем наш предыдущий пример https://github.com/kannade/DataBinding_sapui5:
дата formatter

Сделать это можно при помощи нативных (встроенный в стандартный функционал SapUI5) средств форматирования, прописав formatOptions:

/DataBinding_sapui5/blob/master/webapp/view/Formatting.view.xml
1
2
3
4
5
6
7
8
9
10
11
<label text="Short"></label>
<text text="{ path: '/dateStr', type: 'sap.ui.model.type.Date', formatOptions: { style: 'short', source: { pattern: 'yyyy.MM.dd' } } }"></text>
 
<label text="Medium"></label>
<text text="{ path: '/dateStr', type: 'sap.ui.model.type.Date', formatOptions: { style: 'medium', source: { pattern: 'yyyy.MM.dd' } } }"></text>
 
<label text="Long"></label>
<text text="{ path: '/dateStr', type: 'sap.ui.model.type.Date', formatOptions: { style: 'long', source: { pattern: 'yyyy.MM.dd' } } }"></text>
 
<label text="Full"></label>
<text text="{ path: '/dateStr', type: 'sap.ui.model.type.Date', formatOptions: { style: 'full', source: { pattern: 'yyyy.MM.dd' } } }"></text>

Параметры для форматирования даты:

Форматирования чисел в SapUI5:

Или вывести в необходимом формате число:
формат фисла

/DataBinding_sapui5/blob/master/webapp/view/Formatting.view.xml
1
2
3
4
5
6
7
8
<label text="С группировкой разрядов"></label>
<text text="{ path: '/floatVal', type: 'sap.ui.model.type.Float', formatOptions: { groupingEnabled: true, groupingSeparator: ',', decimalSeparator: '.' } }"></text>
 
<label text="2 десятичных разряда"></label>
<text text="{ path: '/floatVal', type: 'sap.ui.model.type.Float', formatOptions: { maxFractionDigits: 2, groupingEnabled: false, groupingSeparator: ',', decimalSeparator: '.' } }"></text>
 
<label text="C ведущими нулями"></label>
<text text="{ path: '/floatVal', type: 'sap.ui.model.type.Float', formatOptions: { minIntegerDigits: 20, groupingEnabled: false, groupingSeparator: ',', decimalSeparator: '.' } }"></text>
1
2
3
4
5
6
7
8
9
10
var oLocale = new sap.ui.core.Locale("en-US");
var oFormatOptions = {
    style: "short",
    decimals: 1,
    shortDecimals: 2
};
 
var oFloatFormat = sap.ui.core.format.NumberFormat.getFloatInstance(oFormatOptions, oLocale);
oFloatFormat.format(1234.56); // результат - 1.23K (применяется параметр shortDecimals)oFloatFormat.format(123.456); // результат - 123.5 (число не "короткое", применяется параметр decimals)

Дополнительные параметры для форматирования чисел:


Возможные значения параметра roundingMode, клик для увеличения картинки.

Подробней про все параметры читаем тут — https://openui5.hana.ondemand.com/#/api/sap.ui.core.format.NumberFormat.

Форматирования "ценовых" чисел:

Пример:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var oLocale = new sap.ui.core.Locale("en-US");
var oFormatOptions = {
    showMeasure: true,
    currencyCode: false,
    currencyContext: 'standard'
};
 
var oCurrencyFormat = sap.ui.core.format.NumberFormat.getCurrencyInstance(oFormatOptions, oLocale);
oCurrencyFormat.format(1234.567, "USD"); // результат US$1,234.57 (дробная часть по умолчанию = 2 для USD)oCurrencyFormat.format(1234.567, "JPY"); // результат JP¥1,235 (дробная часть по умолчанию = 0 для JPY) 
oFormatOptions = {
    showMeasure: true,
    currencyCode: true,
    currencyContext: 'standard'
};
oCurrencyFormat = sap.ui.core.format.NumberFormat.getCurrencyInstance(oFormatOptions, oLocale);
oCurrencyFormat.format(1234.567, "USD"); // результат - USD1,234.57 (вместо символа валюты используется код валюты)oCurrencyFormat.format(1234.567, "JPY"); // результат JPY1,235 (вместо символа валюты используется код валюты)

Форматирования размера файла в SapUI5:

Подробней про формат размера файла — https://openui5.hana.ondemand.com/#/topic/24f340bdd59e4428aab30a20d14e2ebc.

Это все нативные средства форматирования, но в SapUI5 можно создать собственные методы для форматирования данных.

Пользовательское форматирование.

Вернемся к нашему предыдущему примеру, который мы делали в уроке 4.

Сделаем так, что при выводе числа у него отображалось две десятичные цифры.
Например, в модели число 12.1, но на экране будет отображено 12.10.

В контроллере определим форматтер:

/layout_sapui5/blob/master/webapp/controller/Main.controller.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/m/MessageToast",
	"sap/ui/Device",
	"hello/layout/model/formatter",	"hello/layout/model/type/digits"
], function(Controller, MessageToast, Device, formatter, Digits) {	"use strict";
 
	return Controller.extend("hello.layout.controller.Main", {
 
		formatter: formatter, 
		onInit: function() {

определим число в JSON модели, которое будет в последствии выводить:

/layout_sapui5/blob/master/webapp/controller/Main.controller.js
1
2
3
4
5
6
var oData = {
	"name": "123456",
	"enabled": true,
	"date": new Date(),
	"price": "12.1"};

Сделаем сам форматтер, который мы указали — hello/layout/model/formatter и сделаем метод numberUnit, который мы после укажем в представлении:

/layout_sapui5/blob/master/webapp/model/formatter.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
sap.ui.define([
	] , function () {
		"use strict";
		return {
			/**
			 * Rounds the number unit value to 2 digits
			 * @public
			 * @param {string} sValue the number string to be rounded
			 * @returns {string} sValue with 2 digits rounded
			 */
			numberUnit : function (sValue) {				if (!sValue) {
					return "";
				}
                                //принимаем пришедшее число sValue и задаем 2 цифры после запятой
				return parseFloat(sValue).toFixed(2);
			}
		};
	}
);

В представлении выводим число и указываем для него форматтер:

/layout_sapui5/blob/master/webapp/view/form.fragment.xml
1
2
3
4
<objectnumber number="{
              path: 'odata>/price',              formatter: '.formatter.numberUnit' }"></objectnumber>

Готово:
formatter

Так же собственные форматтеры используются и в примере из урока 8:

/DataBinding_sapui5/blob/master/webapp/view/Formatting.view.xml
1
2
3
4
5
6
<link href="{ parts: [ 'inputData/>/firstName', 'inputData>/lastName', 'inputData>/midName' ], formatter: '.formatMail' }" text="{i18n>sendEmail}"/>
 
…
 
<standardlistitem icon="{ path : 'globalData>typeId', formatter : 'alfa.DataBindingExample.model.formatter.formatIcon' }" type="Navigation" title="{globalData>type}" description="{globalData>name}"/>
</standardlistitem>

Принцип аналогичный, попробуйте разобраться сами.

Еще один примерчик из официальной документации — https://openui5.hana.ondemand.com/#/topic/0f8626ed7b7542ffaa44601828db20de.

Сортировка и фильтрация данных в JSON модели.

Создадим таблицу:

/DataBinding_sapui5/blob/master/webapp/view/SortingAndFiltering.view.xml
1
2
3
<table noDataText="Нет данных" id="table0" visible="{globalData>/showTable}"
items="{ path : '/Employees', sorter: { path: 'Pernr', descending: true } }">
…</table>

…и выведем в нее JSON модель:

/DataBinding_sapui5/blob/master/webapp/controller/SortingAndFiltering.controller.js
1
2
3
4
onInit: function() {
	var oModel = new sap.ui.model.json.JSONModel(); // создаем JSON модель
	oModel.loadData("./model/employees.json", "", false); //загружаем данные из /model/employees.json
	this.getView().byId("table0").setModel(oModel); // получаем таблицу с id = table0 и устанавливаем для нее модель

visible="{globalData>/showTable}" — типичный пример property binding:

/DataBinding_sapui5/blob/master/webapp/view/SortingAndFiltering.view.xml
1
2
<checkbox text="Отобразить таблицу" selected="{globalData>/showTable}"/>
</checkbox>

Когда checkbox нажат selected="{globalData>/showTable}"=true, следовательно visible="{globalData>/showTable}"=true.

Property binding применяется и к полю поиска:

/DataBinding_sapui5/blob/master/webapp/view/SortingAndFiltering.view.xml
1
2
3
4
5
<flexbox width="100%" id="__box1">
	<items>
	<searchfield visible="{globalData>/showTable}" search="onTableSearch"/>	</searchfield></items>
</flexbox>

Поиск по элементам JSON модели.

Если введем какую-либо строку в SearchField и нажмем enter отработает метод search="onTableSearch":

/DataBinding_sapui5/blob/master/webapp/controller/SortingAndFiltering.controller.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
onTableSearch: function(oEvt) {
	var aFilter = [], //создаем массив aFilter
	resFilter = []; //создаем массив resFilte
	var sQuery = oEvt.getParameter("query"); //получаем строку из поля поиска
	if (sQuery) { //если строка не пустая
		//добавляем в массив aFilter 3 элемента:
		//1) Поиск по полю LastName. Ищем строку, содержащую sQuery.
		//2) Поиск по полю FirstName. Ищем строку, содержащую sQuery.
		//3) Поиск по полю MidName. Ищем строку, содержащую sQuery.
		aFilter.push(new sap.ui.model.Filter("LastName", sap.ui.model.FilterOperator.Contains, sQuery));
		aFilter.push(new sap.ui.model.Filter("FirstName", sap.ui.model.FilterOperator.Contains, sQuery));
		aFilter.push(new sap.ui.model.Filter("MidName", sap.ui.model.FilterOperator.Contains, sQuery));
 
		//В массив resFilter добавляем массив aFilter, в котором содержаться условия поиска 
		//and: false - Вместо логического И будет использоваться логическое ИЛИ.
		//Другими словами, хотя бы одно поле из трех должно содержать строку поиска!
		resFilter.push(new sap.ui.model.Filter({
			filters: aFilter,
			and: false
		}));
	}
 
	var oList = this.getView().byId("table0"); //получаем таблицу
	var oBinding = oList.getBinding("items"); //биндинг таблицы
	oBinding.filter(resFilter); //применяем созданный фильтр
},

Поиск по элементам реализован!

Фильтрация в официальной документации — https://sapui5.hana.ondemand.com/#/topic/5295470d7eee46c1898ee46c1b9ad763.

Группировка и сортировка элементов JSON модели.

Сделаем сортировку и группировку таблицы по заданным параметрам.
Установку параметров будет делать в диалоговом окне, которое открывается по нажатию на кнопку:

/DataBinding_sapui5/blob/master/webapp/view/SortingAndFiltering.view.xml
1
2
<button icon="sap-icon://action-settings" press="onViewSettings">
</button>

По нажатию вызываем метод onViewSettings, в котором открываем диалог (диалоговые окна мы учились создавать в 7 уроке) и создаем список сортировки:

/DataBinding_sapui5/blob/master/webapp/controller/SortingAndFiltering.controller.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
onViewSettings: function(oEvent) {
	if (!this._oDialog) {
                //создаем диалог из фрагмента
		this._oDialog = sap.ui.xmlfragment("alfa.DataBindingExample.view.TableViewSettingsDialog", this);
 
 
		var oCols = this.getView().byId("table0").getColumns(); // количество колонок
		var aCells = this.getView().byId("table0").getBindingInfo("items").template.getCells(); //получаем первую ячейку каждого столбца
 
//в созданный диалог добавляем еще элементы сортировки (SortItem) по количеству столбцов и с названиями, соответствующими названиям столбцов
		for (var i = 0; i < oCols.length; i++) {
			this._oDialog.addSortItem(new sap.m.ViewSettingsItem({
				text: oCols[i].getHeader().getBindingInfo("text").binding.oValue,
				key: aCells[i].getBindingInfo(i === 4 ? "value" : "text").parts[0].path,
				selected: i === 0
			}));
		}
	}
	this._oDialog.open();
,

Нажмем и вызовем диалог:
группировка и сортировка

Список элементов, по которым можно сортировать, мы только что динамически сделали в методе onViewSettings.

Список элементов для группировки мы указали в представлении:

/DataBinding_sapui5/blob/master/webapp/view/TableViewSettingsDialog.fragment.xml
1
2
3
4
5
6
<viewsettingsdialog id="SettingsId" confirm="handleViewSettingsConfirm">
	<groupitems>
		<viewsettingsitem text="Город" key="City"></viewsettingsitem>		<viewsettingsitem text="Орг единица" key="OrgehName"></viewsettingsitem>	</groupitems>
</viewsettingsdialog>

По нажатию на кнопку Ok применяем сортировку и группировку:

/DataBinding_sapui5/blob/master/webapp/controller/SortingAndFiltering.controller.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
handleViewSettingsConfirm: function(oEvent) {
	var oView = this.getView(); //выбираем представление
	var oTable = oView.byId("table0"); //выбираем таблицу
 
	var mParams = oEvent.getParameters(); //параметры
	var oBinding = oTable.getBinding("items"); //биндинг
 
	var sPath;
	var bDescending;
	var vGroup;
	var aSorters = [];
 
	// группировка
	if (mParams.groupItem) {
		sPath = mParams.groupItem.getKey(); //получаем значение, по которому будет группировать
		bDescending = mParams.groupDescending; //по возрастающей или убывающей
		vGroup = this.mGroupFunctions[sPath];
		aSorters.push(new Sorter(sPath, bDescending, vGroup));
	}
 
	// сортировка
	sPath = mParams.sortItem.getKey(); //получаем значение, по которому будет группировать
	bDescending = mParams.sortDescending; //по возрастающей или убывающей
 
// для поля pernr особые условия сортировки. Так как надо сравнивать цифры из pernr, а не строки.
//Для этого создали функцию compareIntegers, которая описана ниже в данном контроллере
	if (sPath === "Pernr") {
		aSorters.push(new Sorter(sPath, bDescending, false, this.compareIntegers));
	} else {
		aSorters.push(new Sorter(sPath, bDescending));
	}
		oBinding.sort(aSorters);
	},

Отметим, что this.mGroupFunctions из группировки мы определили в методе инициализации onInit:

/DataBinding_sapui5/blob/master/webapp/controller/SortingAndFiltering.controller.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
this.mGroupFunctions = {
	OrgehName: function(oContext) {
		var name = oContext.getProperty("OrgehName");
		return {
			key: name,
			text: name
		};
	},
 
	City: function(oContext) {
		var name = oContext.getProperty("City");
		return {
			key: name,
			text: name
		};
	}
};

Не забываем подключать необходимые библиотеки:

/DataBinding_sapui5/blob/master/webapp/controller/SortingAndFiltering.controller.js
1
2
3
4
5
sap.ui.define([
	"sap/ui/core/mvc/Controller",
	'sap/ui/model/Filter',	'sap/ui/model/Sorter'], function(Controller, Filter, Sorter) {

Таким образом можно сортировать и группировать данные из JSON модели!

Про сортировку и группировку в официальной документации: https://sapui5.hana.ondemand.com/#/topic/5295470d7eee46c1898ee46c1b9ad763.html.

Оставить комментарий: