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

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

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

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

Данные будем брать из таблицы `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.01.2020
16576
Предыдущая запись Как сделать редирект PHP
Следующая запись Примеры использования PDO MySQL

Комментарии

, чтобы добавить комментарий.

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

Счетчик просмотров страниц с графиком
Для примера возьмем статейный сайт, на нём нужно сделать счетчик просмотров статей, с выводом результатов за день,...
19048
+23
Постраничный вывод и базы данных
В SQL запросах, для ограничения количества строк в результате используется инструкция LIMIT, например следующий вернёт...
16908
0
Примеры использования PDO MySQL
В статье приведены основные примеры работы с расширением PHP PDO. Такие как подключение к БД, получение, изменение и...
103033
+8
Замена раскладки на PHP
PHP функции для исправление неправильной раскладки клавиатуры в тексте и использование их в поиске по сайту.
10786
+9
Вывод списка по алфавиту
Представленные способы помогут сделать алфавитный список (указатель) разбитый на колонки, для вывода например станций метро, производителей, категорий и т.д.
9415
+1
Как вывести метки на Яндекс.Картах из MySQL+PHP
В статье рассмотрены примеры как вывести метку на карту из БД и вывод других объектов, которые находятся рядом.
21521
+11