Поиск

Раскрывающийся многоуровневый список

В данном примере описано как вывести многоуровневый список checkbox и radio button из БД с помощью jQuery плагина treeview.

Плагин делает удобный древовидный список из вложенных тегов <ul> <li>. Скачать его можно с GitHub или архив (1.4.2).

Данные будем брать из таблицы `category` с полями `id`, `name` и `parent`. В поле `parent` хранится id родителя.
Скачать дамп таблицы.

Получаем все записи из таблицы используя расширение PDO:

$dbh = new PDO('mysql:dbname=db_name;host=localhost', 'логин', 'пароль');
$sth = $dbh->prepare("SELECT * FROM `category` ORDER BY `name`");
$sth->execute();
$category = $sth->fetchAll(PDO::FETCH_ASSOC);
PHP

C помощью функции convert() преобразуем массив $category в древовидный вид:

function convert($array, $i = 'id', $p = 'parent')
{
	if (!is_array($array)) {
		return array();
	} else {
		$ids = array();
		foreach ($array as $k => $v) {
			if (is_array($v)) {
				if ((isset($v[$i]) || ($i === false)) && isset($v[$p])) {
					$key = ($i === false) ? $k : $v[$i];
					$parent = $v[$p];
					$ids[$parent][$key] = $v;
				}
			}
		}

		return (isset($ids[0])) ? convert_node($ids, 0, 'children') : false;	
	}
}

function convert_node($index, $root, $cn)
{
	$_ret = array();
	foreach ($index[$root] as $k => $v) {
		$_ret[$k] = $v;
		if (isset($index[$k])) {
			$_ret[$k][$cn] = convert_node($index, $k, $cn);
		}
	}

	return $_ret;
}

$category = convert($category);
PHP

Выведем массив в список <ul> используя рекурсивную функцию out_tree_checkbox().

function out_tree_checkbox($array, $first = true) 
{
	if ($first) {
		$out = '<ul id="tree-checkbox" class="treeview">';
	} else {
		$out = '<ul>';
	}

	foreach ($array as $row) {
		$out .= '<li>';
		$out .= '<label><input type="checkbox" name="category[]" value="' . $row['id'] . '"> ' . $row['name'] . '</label>';
		if (isset($row['children'])) {
			$out .= out_tree_checkbox($row['children'], false);
		}
		$out .= '</li>';
	}
	$out .= '</ul>';
	
	return $out;
}

echo out_tree_checkbox($category);
PHP

Подключим JS и CSS:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="/plugins/treeview/jquery.treeview.js"></script>
<link rel="stylesheet" href="/plugins/treeview/jquery.treeview.css">

<script>
$('#tree-checkbox').treeview({
	collapsed: true,
	animated: 'medium',
	unique: false
});
</script> 

<style type="text/css">
.treeview label {
	margin: 0;
	display: inline-block;
	font-size: 12px;
	font-weight: normal;
	line-height: 14px;
	vertical-align: top;
	cursor: pointer;
}
.treeview input {
	margin: 0;
	padding: 0;
	vertical-align: top;
}
</style>
HTML

Результат:

Список с radio button

Заменим функцию out_tree_checkbox() на out_tree_radio().

function out_tree_radio($array, $first = true) 
{
	if ($first) {
		$out = '<ul id="tree-radio" class="treeview">';
	} else {
		$out = '<ul>';
	}

	foreach ($array as $row) {
		$out .= '<li>';
		$out .= '<label><input type="radio" name="category" value="' . $row['id'] . '"> ' . $row['name'] . '</label>';
		if (isset($row['children'])) {
			$out .= out_tree_radio($row['children'], false);
		}
		$out .= '</li>';
	}
	$out .= '</ul>';
	
	return $out;
}

echo out_tree_radio($category);
PHP

И изменим настройки плагина:

$('#tree-radio').treeview({
	collapsed: true,
	animated: 'medium',
	unique: true
});
JS

Результат:

09.11.2017, обновлено 17.10.2019 3336
Предыдущая запись Как сделать редирект PHP
Следующая запись Примеры использования PDO MySQL

Другие публикации

С помощью расширения dompdf можно легко сформировать PDF файл. По сути, dompdf - это конвертер HTML в PDF который...
16.02.2018 10775
PHP функции для исправление неправильной раскладки клавиатуры в тексте и использование их в поиске по сайту.
15.08.2019 330
Класс значительно упрощает работу с PDO, сокращает код. Реализован на статических классах и не требует создание...
14.03.2018 4073
Пример создания файла карты сайта (sitemap.xml) на PHP. Интеграция его на сайт и подключение его в robots.txt
19.11.2016 2220
В продолжении статьи о верстки рейтинга, рассмотрим PHP-скрипты системы отзывов и рейтинга в интернет-магазине.
26.08.2019 418
Пример как преобразовать массив в CSV и сохранить его диске или отдать на скачивание.
14.06.2019 941