SapUI5: Нажатие по заголовку колонки таблицы / click on column header sap.m.Table

Опубликовано автором

Привет!
При визуализации данных очень часто приходиться использовать таблицы. Но стандартные решения не всегда покрывают потребности заказчика.
В данном посте разберем как сделать сортировку и поиск по клику на столбец таблицы.

Пример, который мы будем рассматривать ниже, можно импортировать в свой WebIDE отсюда https://github.com/kannade/sapui5_click_header_column_table.

За реализации спасибо https://blogs.sap.com/2016/08/22/responsive-sapm-table-on-click-column-sort-filter/. Пример работы из ссылки — http://plnkr.co/edit/YKiSLvByFwjE6kMwE0Yl?p=preview.

В качестве примера возьмем уже заполненную таблицу из примеров в документации sapui5: https://sapui5.hana.ondemand.com/#/sample/sap.m.sample.Table/code.

Скачаем:

и импортируем в свой WebIDE:
.

Первое, что нам необходимо сделать — на все заголовки колонок повесить событие, которое будет вызываться при клике на этот заголовок:

/sapui5_click_header_column_table/blob/master/Table.controller.js
onAfterRendering: function () {
var oTab = this.getView().byId("idProductsTable");
 
//после отрисовки таблицы возьмем все колонки и добавим им событие click
oTab.addEventDelegate({
	"onAfterRendering": function (id) {
		var that = this;
		var oHeader = this.getView().$().find(".sapMListTblHeaderCell"); //Get hold of table header elements
 
		for (var i = 0; i < oHeader.length; i++) {
			var oID = oHeader[i].id;
			that.onClick(oID);
		}
	}.bind(this)
}, this);
 
},

После отрисовки таблицы получим все заголовки по классу sapMListTblHeaderCell, возьмем их ID и вызовем метод onClick(), в котором повесим событие click по выбранному id:

/sapui5_click_header_column_table/blob/master/Table.controller.js
onClick: function (oID) {
	var that = this;
	$("#" + oID).click(function (oEvent) { //добавим событие "click" к колонке
		var oTarget = oEvent.currentTarget; //Get hold of Header Element
		var oLabelText = oTarget.childNodes[0].textContent; //Get Column Header text
		var oIndex = oTarget.id.slice(-1); //Get the column Index
		var oView = that.getView();
		var oTable = oView.byId("idMyReqTable");
		//var oModel = oTable.getModel().getProperty("/ProductCollection"); //Get Hold of Table Model Values
		//var oKeys = Object.keys(oModel[0]); //Get Hold of Model Keys to filter the value
		//oView.getModel().setProperty("/bindingValue", sap.ui.getCore().byId(oEvent.currentTarget.id).data("key")); //Save the key value to property
		oView._bindingValue = sap.ui.getCore().byId(oEvent.currentTarget.id).data("key"); // запомним название поля в модели
		that._oResponsivePopover.openBy(oEvent.target);
},

Так же мы описали действия, которые будут выполняться после клика на заголовок колонки таблицы. После нажатия мы будем запоминать колонку, на которую нажали, в глобальную переменную oView._bindingValue и открывать всплывающую подсказку, которую описали в фрагменте TableSorter.fragment.xml и создали при инициализации контроллера:

/sapui5_click_header_column_table/blob/master/Table.controller.js
onInit: function () {
	// set explored app's demo model on this sample
	var oModel = new JSONModel(jQuery.sap.getModulePath("sap.ui.demo.mock", "/products.json"));
	this.getView().setModel(oModel);
 
	//создадим всплывающее окошко
	if (!this._oResponsivePopover) {
		this._oResponsivePopover = sap.ui.xmlfragment("sap.m.sample.Table.TableSorter", this);
		//this._oResponsivePopover.setModel(this.getView().getModel());
	}
},

Обратите внимание, что название столбца мы получаем, используя customData, про которые я напишу отдельную записку.
В примере по ссылке в начале поста используется немного другой подход, который работает только если у Вас JSON модель, в своем продуктивном приложении я биндил oData модель на таблицу, поэтому моя реализация получения ключа отличается от примера.

После открытия всплывающего окошка вызывается метод onOpen (свойство afterOpen=»onOpen»):

/sapui5_click_header_column_table/blob/master/Table.controller.js
onOpen: function (oEvent) {
	//On Popover open focus on Input control
	var oPopover = sap.ui.getCore().byId(oEvent.getParameter("id"));
	var oPopoverContent = oPopover.getContent()[0];
	var oCustomListItem = oPopoverContent.getItems()[2];
	var oCustomContent = oCustomListItem.getContent()[0];
	var oInput = oCustomContent.getItems()[1];
	oInput.focus();
	oInput.$().find(".sapMInputBaseInner")[0].select();
},

который устанавливает указатель мыши в поле поиска.

sap.m.Table click header column

После выбора сортировки или поиска будет отрабатывать соответствующий метод. Поиск — onChange, сортировки — onDescending, onAscending.

Все три метода похожи, посмотрим на onAscending:

/sapui5_click_header_column_table/blob/master/Table.controller.js
onAscending: function (evt) {
	var oTable = this.getView().byId("idProductsTable"); //Получим таблицу
	var oItems = oTable.getBinding("items"); //Возьмем биндинг (элементы таблицы)
	//	var oBindingPath = this.getView().getModel().getProperty("/bindingValue");
	var oBindingPath = this.getView()._bindingValue; //Получим ранее сохраненное название столбца
	var oSorter = new Sorter(oBindingPath); //Создадим новую сортировку 
	oItems.sort(oSorter); //Применим сортировку для элементов таблицы
	this._oResponsivePopover.close(); //закроем всплывающее окошко
},

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

Домашнее задание: при помощи css изменить иконку мыши на «poiner» при наведении на заголовок колонки таблицы :).