Статьи

Удовольствие от прикосновения к DHTMLX: создание простого, но фильтруемого списка

Октябрь 18, 2018

В этом уроке я опишу, как построить представление списка с фильтрацией в реальном времени, используя DHTMLX Touch , мобильную среду JavaScript HTML5. Представление списка является популярным элементом пользовательского интерфейса, и вам часто приходится выполнять эту задачу при разработке мобильных веб-интерфейсов. Я также объясню, как привязать данные списка к базе данных на стороне сервера.

DHTMLX Touch совместим с основными браузерами на основе Webkit, поэтому представление списка будет работать на разных мобильных платформах (iOs, Android, BlackBerry). Давайте начнем.

Сначала загрузите последний пакет библиотеки DHTMLX Touch. Лицензирование позволяет вам использовать библиотеку бесплатно как в коммерческих, так и в приложениях с открытым исходным кодом (поэтому не беспокойтесь о ценах).

Гайки и болты библиотеки DHTMLX Touch:

  • необходимые файлы кода: touch.js , touch.css
  • содержимое: различные основные компоненты пользовательского интерфейса (список, сетка, форма и т. д.) и элементы управления (кнопка, флажок, выбор и т. д.) + специальные вспомогательные библиотеки
  • общий конструктор объекта для компонентов (элементов управления) — dhx.ui ({})
  • тип компонента (контроль) задается свойством зрения

 

Для начала создайте 2 элемента на странице: 1) панель инструментов с фильтрующим входом и 2) список. Добавьте этот код в файл HTML:

dhx.ui({
   	rows:[
                	{view:"toolbar", elements:[
                    	{
                       		id: "filter",
                       		view: "text",
                       		label: <div class='dhx_el_icon_search' ></div>",
                       		labelWidth: 30
                    	}
                	]},
                	{
                     	view:"list",
                     	id:"mylist",
                     	url:"data/users.php",// the path to the server script. See details below
                     	template:"#name#",
                     	select:true
                	}
             ]
});

Теперь у нас есть представление списка с фильтром ввода сверху, например:

Простой список с DHTMLX Touch 

Затем расширьте панель инструментов библиотекой dhx.KeyEvents, которая требуется для обработки ключевых событий, которые вызываются при вводе текста на входе (связанные с ключом события).

dhx.extend($$('filter'),dhx.KeyEvents); //adds the support  for key events

Создайте функцию filterText (), которая добавляет стандартную логику фильтрации. Для этого необходимо ввести значение, введенное в поле ввода, отфильтровать список и отобразить отфильтрованные результаты.

Нам нужно связать функцию filterText () с обработчиком события onTimedKeyPress . Мы выбираем это событие (не onKeyPress), потому что оно позволяет нам обрабатывать нажатия клавиш с задержкой, которая уменьшает количество запросов к серверу и обеспечивает более плавную фильтрацию.

function filterText() {
   	 var text = $$("filter").getValue();
        	$$("mylist").filter("#name#",text); //filters the list by the "name" property
 }
	 
$$('filter').attachEvent("onTimedKeyPress", filterText); //sets a function that is called on a key press with a delay

Теперь, если вы введете в поле ввода, элементы списка будут отфильтрованы, и в списке будут отображаться только элементы, содержащие введенные символы. 

Список с фильтрацией  

Данные в списке загружаются из базы данных на сервере, и ими нельзя управлять без интеграции на стороне сервера. Для библиотеки DHTMLX Touch существует специальный помощник — dhtmlxConnector , который доступен для Java, .Net и PHP. Он реализует обмен данными между клиентом и сервером, что делает интеграцию на стороне сервера хорошо организованной и удобной для разработчиков.

В нашем случае мы используем dhtmlxConnector для PHP, который можно скачать здесь . Создайте файл PHP со следующим кодом:

<!--?php
require_once("../codebase/connector/data_connector.php");// the required code file
require_once("../codebase/connector/db_sqlite.php");

if (!$db = sqlite_open('db', 0777, $sqliteerror)) {
    die($sqliteerror);
}
$data = new JSONDataConnector($db,"SQLite"); // the connector object
$data--->render_table("tblusers", "id", "name"); // data configuration
?>

Это стандартное использование dhtmlxConnector. Во-первых, нам нужно включить необходимые файлы кода. Затем откройте базу данных SQLite, создайте объект коннектора и настройте данные для извлечения.

Стороны клиента и сервера будут объединены с помощью параметра url списка. Как только вы установите для параметра URL-адрес файла PHP, список будет заполнен данными из базы данных.

Вот и все. Теперь у нас есть список с возможностью фильтрации, который загружает данные со стороны сервера и может быть интегрирован в ваш мобильный веб-сайт или приложение. Загрузите прилагаемый демонстрационный пакет, чтобы увидеть, как все работает, и адаптировать его для своих собственных целей.

43
Share: