PHP

Как сделать раскрывающийся многоуровневый список

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

Плагин 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);

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);

Выведем массив в список 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);

Подключим 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>

Результат:

Список с 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);

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

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

Результат:

09 ноября 2017
В последнее время письма отправляемые с хостингов через функции mail() и mb_send_mail() часто попадают или совсем не...
cURL PHP – это библиотека предназначенная для получения и передачи данных через такие протоколы, как HTTP, FTP, HTTPS....
В статье приведены основные примеры работы с расширением PHP PDO. Такие как подключение к БД, получение, изменение и...
Библиотека GD дает возможность работать с изображениями в PHP. Далее представлены примеры как изменить размер, вырезать...