В данном примере описано как вывести многоуровневый список 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);
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);
И изменим настройки плагина:
Результат: